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

欢迎大家访问我的个人网站 萌萌的IT人

今天在做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();
  "?timestamp=" + new Date().getTime();

三、改变jQuery的Ajax设置

另外我们还可以这样设置：
$.ajaxSetup({

cache:false

})
实际上jQuery的这个机制也是通过为请求地址添加不同的查询字符串后缀来实现的。

 

评论

2 楼 MrLee23 2013-09-17  

日本人的代码也不过如此嘛，哈哈哈

1 楼 panpan2011 2013-09-17  

缓存问题解决。