AJax技术

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

字号+ 作者:H5之家 来源:H5之家 2015-10-05 15:04 我要评论( )

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

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

 

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

 

实例解决问题:

 

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • 判断用户是不是为ajax请求

    判断用户是不是为ajax请求

    2016-02-24 17:00

  • Ajax与WEB开发 by alixixi.com

    Ajax与WEB开发 by alixixi.com

    2016-02-11 11:02

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

网友点评