php 页面无闪刷新,5.5.1 网页无闪自动局部刷新

5.5  利用Ajax实现局部刷新

5.5.1  网页无闪自动局部刷新

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

实例解决问题：

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

实现思路：

1. 首页部分：

getUsername()%>');">// load时调用init(user);

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

varcheckresult=null;

varusername=null;

function init(user){

userusername=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) {

varresponse=xmlhttp.responseText;

if(response==1){//判断为假

test1.innerHTML=" ";

checkresult=1;

}

else{//判断为真

test1.innerHTML="

gif'>

autostart=true loop=false>";

checkresult=0;

}

}

}

3. check_mail.jsp用于处理客户端发送上来的请求，并返回对数据库查询得到的结果。如果有结果返回0，没有返回1。

Stringuser=request.getParameter("uName");

Connectionconn=null;

try{

conn=DBConnection.getConnection();

PreparedStatementpStat=conn.prepareStatement("select * from message

wherer_name='"+user+"'andstatus=0");

//查询SQL语句

ResultSetrs=pStat.executeQuery();

if(rs.next()){//有记录

response.getWriter().print(0);

}else{

response.getWriter().print(1);

}

}finally{

if(conn!=null) conn.close();

}

%>

4. 首页结果显示。

将插入指定位置。

5. 数据库部分，以及数据库连接部分的内容请大家自己给出。

得到效果如图5-6所示。

图5-6  图片自动刷新

【责任编辑：云霞 TEL：(010)68476606】

点赞 0