日期:2014-05-16  浏览次数:20647 次

关于解决JQuery发送Ajax请求后,IE缓存数据不更新的问题

今天在做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();<