ajax计数器的实现
- 七月 12th, 2009
本文代码实现页面计数器在无刷新情况下自动更新同步计数器数据。
<script language="javascript">
var xmlHttp;
function create(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function count(){
create();
xmlHttp.open("GET","http://www.xxx.com/3.php?aa="+Math.random());
xmlHttp.onreadyStatechange=handle;
xmlHttp.send(null);
}
function handle(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){document.getElementById("jishu").innerHTML=escape(xmlHttp.responseText);}
}
}
function myShow(){
window.setInterval(count,5000);
}
</script>
<body onload="count();myShow();">
共有<span id="jishu"></span>人访问
</body>
var xmlHttp;
function create(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function count(){
create();
xmlHttp.open("GET","http://www.xxx.com/3.php?aa="+Math.random());
xmlHttp.onreadyStatechange=handle;
xmlHttp.send(null);
}
function handle(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){document.getElementById("jishu").innerHTML=escape(xmlHttp.responseText);}
}
}
function myShow(){
window.setInterval(count,5000);
}
</script>
<body onload="count();myShow();">
共有<span id="jishu"></span>人访问
</body>
需要注意的是xmlhttp在刷新的时间会使用缓存，所以需要在请求的地址上加随机数（Math.random）以防止使用缓存数据。另外setInterval与setTimeout的区别是前者为间隔循环执行，后者为定时执行一次。