电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
使用AJAX技术实现网页无闪自动局部刷新
使用AJAX技术实现网页无闪自动局部刷新
2007-8-23 10:24:34  文/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 >插入指定位置。

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    页面自动跳转的几种实现方法
    网站内容的四种分类形式 或多或少的…
    如何指定规范网页?rel="canonical"
    浅谈网站评论体系设计的不足之处
    网页中“上一篇”“下一篇”设计思考
    网页设计进度指示器帮助用户预测步骤
    网页用户体验:网页注册表单设计分析
    网页设计常出现8大问题
    关于20个Ajax关键问题的疑问及解答
    网页设计的形象思维归纳
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号