下面图老师小编要跟大家分享使用AJAX技术实现网页无闪自动局部刷新,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!
【 tulaoshi.com - Web开发 】
实例解决问题:
希望实现用户在进入系统以后(整个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()
}
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)function Checkmail()
{
xmlhttp.open("POST", "check_mail.jsp?uName=" username, false);
xmlhttp.onreadystatechange = updatePage;
xmlhttp.send();
}
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)function updatePage() {
if (xmlhttp.readyState 4) {
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)test1.innerHTML="loading...";
}
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)if (xmlhttp.readyState == 4) {
var response = xmlhttp.responseText;
if(response==1){//判断为假
test1.innerHTML=" ";
checkresult=1;
}
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)else{//判断为真
test1.innerHTML="
alt=新邮件 src=img/tp024.gif /
";
checkresult=0;
}
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)}
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)}
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)//
3.check_mail.jsp
4.首页结果显示
将 span id="test1" /span 插入指定位置。
来源:http://www.tulaoshi.com/n/20160219/1617660.html
看过《使用AJAX技术实现网页无闪自动局部刷新》的人还看了以下文章 更多>>