至顶网›软件频道 ›使用AJAX技术实现网页无闪自动局部刷新

使用AJAX技术实现网页无闪自动局部刷新

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

作者：dxaw 来源：赛迪网 2007年11月20日

关键字：局部刷新网页无闪 AJAX

我们在网页制作的过程中经常会遇到及时刷新数据的问题，如果使用的方法，会造成整个屏幕不断闪烁刷新的效果，这会降低用户的操作满意度。

所以我们需要一种可以实现无闪自动刷新数据的方法来解决以上问题。

实例解决问题：

希望实现用户在进入系统以后（整个session的时效之内）,如果收到新邮件则发出声音提示。

实现思路：

1.首页部分：< body onload="init('<%=ses_userBean.getUsername()%>');"> // load时调用init(user);

2.js部分：用XMLHTTP实现页面局部刷新，调用check_mail.jsp对后台数据库进行检索判断并返回结果。

<!--
      var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      var checkresult=null;
      var username =null; 
      
      function init(user){
      username=user;
      window.setInterval('Checkmail()',5000);//每隔5秒自动调用Checkmail()
      }

      function Checkmail()
      {
      xmlhttp.open("POST", "check_mail.jsp?uName="+username, false);
      xmlhttp.onreadystatechange = updatePage;
      xmlhttp.send();
      }
      function updatePage() {
      if (xmlhttp.readyState < 4) {
      test1.innerHTML="loading...";
      }
      if (xmlhttp.readyState == 4) {
      var response = xmlhttp.responseText;
      if(response==1){//判断为假
      test1.innerHTML="&nbsp;";
      checkresult=1;
      }
      else{//判断为真
      test1.innerHTML="<ccid_file alt=新邮件 values="img/tp024" 
alt=新邮件 src=img/tp024.gif />
      <EMBED src='music/nudge.wma' hidden=true autostart=true loop=false>";
      checkresult=0;
      }
      }
      }
// -->

3.check_mail.jsp

<%@ page contentType="text/html; charset=GBK" %>
<%@ page errorPage="error/login_error.jsp"%>
<%@ page import="myweb.*" %>
<%@ page import="java.sql.*" %>
<%
String user=request.getParameter("uName");
Connection conn=null;
try{
  conn=DBConnection.getConnection();
  PreparedStatement pStat=conn.divpareStatement("
select * from message where r_name='"+user+"' and status=0");
  ResultSet rs=pStat.executeQuery();
  if(rs.next()){//有记录
  response.getWriter().print(0);
  }else{
  response.getWriter().print(1);
  }
}finally{
  if(conn!=null) conn.close();
  }
%>

4.首页结果显示

将< span id="test1" > < /span >插入指定位置。

href="http://java.ccidnet.com/art/3559/20070821/1184049_1.html" target=_blank>查看本文来源