今天在做ajax页面无刷新请求后台服务器数据的时候,IE下遭遇Ajax缓存,FF和Chrome均正常,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题。
在默认情况下,IE会针对请求地址缓存Ajax请求的结果。换句话说,在缓存过期之前,针对相同地址发起的多个Ajax请求,只有第一次会真正发送到服务端。在某些情况下,这种默认的缓存机制并不是我们希望的(比如获取实时数据)。
在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱(比如说多次请求却没有响应)。
问题再现:
window.setInterval(realtimeHandle,3000); /** ポーリング処理(リアルタイムテーブルの変化を監視する) */ function realtimeHandle(){ var tempCounter = getDbCounter(); if(dbCounter != tempCounter && tempCounter != undefined){ dbCounter = tempCounter; alert("リアルタイムテーブルが変化されました!Now Count = " + dbCounter); } } /** Ajaxリクエストを発信し、DBのレコード件数を取得する */ function getDbCounter(){ var counter; $.ajaxSetup({ async:false // Disable caching of AJAX responses */ //cache: false }); $.get( "RealtimeHandleAjaxAction.do", //"RealtimeHandleAjaxAction.do?t=" + new Date().toTimeString(), //"RealtimeHandleAjaxAction.do" + getRandomString(), function(data){ counter = data.dbChangeCounter; }, dataType = "json" ); return counter; }
[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览 器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]
而FF和Chrome下不会出现这种情况。
?
为了不受缓存影响,解决方法:
一、改变IE访问策略
Internet选项--浏览历史记录--设置-- Internet 临时文件的选项改为每次访问网页时也可以
?
二、通过为URL地址添加后缀
在AJAX请求的页面后加个随机函数,例如我们可以使用随机时间函数。在javascript发送的URL后加上。
随机函数代码例:
// TERASOLUNAのカスタムJSPタグ(ts:formやts:linkなど)のURLの末尾に?r=xxxを付与するキャッシュ避け機能の代替 function getRandomString() { var randomString = "?r="; for ( var i = 0; i < 20; i++) { randomString += Math.floor(Math.random() * 10); } return randomString; }
例如这样:
? URL+"&"+"t="+Math.random();//或者new Date();<