赛迪网 > IT技术 Java > 技术动态
  IT资讯搜索
 
IT产品搜索
[程序开发][网管世界][网络安全][数据库技术]
[操作系统][嘉宾聊天·在线访谈][活动集锦]
[精彩专题][Symantec专区][订阅IT技术周刊]
[开发论坛][网管论坛][安全论坛][数据库论坛]
[操作系统论坛][Sybase专区][IBM dW技术专区]
[病毒求助][病毒与漏洞播报][文档·源码下载]

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

发布时间:2007.08.22 06:05     来源:赛迪网    作者:dxaw

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

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

实例解决问题:

希望实现用户在进入系统以后(整个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 >插入指定位置。

(责任编辑:龚勋)


[ 发表评论 ] 字体[  ] [ 打印 ] [ 进入博客 ] [ 进入论坛 ]  [ 推荐给朋友 ]
  相关文章
· Java SE 6入门之脚本引擎加大程序功能 (08-17) · 用J2ME的通用联网框架开发联网应用程序 (08-17)
· 怎样优化J2ME程序之中的 paint() 函数 (08-17) · 使用J2ME技术实现手机触摸屏开发的方法 (08-17)
· 如何在JSP页面发送一个动态图像 (08-17) · 实现基于Spring技术应用的远程服务编程 (08-16)
· 整合Java6脚本、Groovy实现动态MVC模式 (08-16) · 解析SQL中的10个新技巧 (08-15)
· 从用户体验与编程模型方面看AJAX与B/S (08-15) · JAVA编程技巧之如何实现HTTP的断点续传 (08-14)
  客户需求反馈表
* 姓  名:
更多资料  了解方案  认识厂商
* 单位名称:
* 联系电话:
* 电子邮件:
  赛迪推荐  
  手机·资费 ·新品·导购·评测·手机资费·宽带
手机搜索  诺基亚 N73 MOTO Z6
  IT产品 ·笔记本·台式机·服务器·打印·投影
IT产品搜索 
  IT技术 ·开发·网管·安全·数据库·操作系统
  信息化 ·热点·专题·访谈·周刊·方案案例
· 工信部“三定”公布 总编制731名设24司局
· 北京发电子商务监管意见 营利性网店须办照
· 直播 08中国城市信息化高峰论坛 案例点评
· 烽火网络校园解决方案 移民安置信息管理系统
  IT博客 ·曾剑秋·项立刚·Java学习·网管
  IT技术论坛 ·开发·网管·安全·数据库·系统