本文对比了jQuery与Prototype在实现Ajax轮询时的代码差异，重点分析了Prototype中因URL相同导致的缓存问题。当使用setInterval进行定时刷新时，Prototype会返回缓存数据导致页面更新异常或空白。通过为URL添加随机参数可有效绕过缓存，确保每次请求获取最新数据。
首先展示jQuery和Prototype两种库中Ajax功能的具体实现方式。
jQuery Ajax实现示例
jQuery的实现方式如下：
代码示例：
<script language="javascript">
$(function(){
var box = {};
var remoteUrl = 'index.php';
box.interval = 5*60*1000;//5分钟
box.showBoxInfo = function() {
jQuery.get(remoteUrl, function(data){
var msg_box = $('#msg_box');
msg_box.innerHTML = data;
}
});
}
box.run = function(){
this.showBoxInfo();
setInterval(this.showBoxInfo,this.interval);
};
box.run();
})
</script>Prototype Ajax实现示例
Prototype的实现方式如下：
代码示例：
<script language="javascript">
var box = {};
box.interval = 5*60*1000;//5分钟
box.showBoxInfo = function(){
var pars = "";
var remoteUrl = 'index.php';
var myAjax = new Ajax.Request(
remoteUrl,
{
method: 'get',
parameters: pars,
onComplete: box.showResponse
});
};
box.showResponse = function(data){
var msg_box = $("msg_box") ;
msg_box.innerHTML = data.responseText;
};
box.run = function(){
this.showBoxInfo();
setInterval(this.showBoxInfo,this.interval);
};
box.run();
</script>Prototype缓存问题与解决方案
在实际引入setInterval函数后，发现Prototype无法正确刷新内容，原因何在？
这是因为Prototype对相同URL的请求存在缓存机制，导致无法获取最新数据。特别是在用户按下F5或点击浏览器“刷新”按钮后，Ajax响应区域可能出现空白错误，因此必须避免Prototype的缓存行为。
解决方法是在Prototype请求的URL后添加随机数参数。
原始代码：var remoteUrl = 'index.php';
修改后代码：var remoteUrl = 'index.php?rand='+Math.random();
通过GET方式添加一个与页面显示内容无关的随机参数，即可有效防止缓存。