注册 | 登录 | 设为首页 | 加入收藏
您当前的位置:飞翔学院-IT中国 → 编程开发AJAX → 文章内容

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

作者:IT 来源:不详 发布时间:2007-9-1 16:20:51

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

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

实例解决问题:

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

实现思路:

1.首页部分:< body onload="init('');"> // 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=" ";      checkresult=1;      }      else{//判断为真      test1.innerHTML="<ccid_file alt=新邮件 values="img/tp024" alt=新邮件 src=http://www.xker.com/page/e2007/0822/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 >插入指定位置。


  • 打印文档
  • 推荐好友
  • 返回顶部
  • 增大字体
  • 减少字体
关于本站 | 工作机会 | 合作网站 | 广告服务 | 市场合作| 联系我们 | 抽奖活动
版权所有: 武汉威俊科技有限公司 Copyright 2005-2007 www.ITCNW.COM All rights reserved