zoukankan      html  css  js  c++  java
  • 关于解决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();
      "?timestamp=" + new Date().getTime();

    三、改变jQuery的Ajax设置

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

    cache:false

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

  • 相关阅读:
    DataTable转换成List
    gitbash如何修改可恶的蓝色字体
    nvm use exit status 1
    搭建CNPM私有库
    Angular2项目,刷新后页面显示404错误的?
    基于webpack模块加载,ts里对系统对象prototype的扩展
    Angular2 primeNG的p-dropdown的选中值未初始化
    移动端开发常见问题
    weinre的使用
    利用百度地图API进行GPS坐标转换成百度地图坐标,创建点,标签,多边形
  • 原文地址:https://www.cnblogs.com/lys_013/p/3243435.html
Copyright © 2011-2022 走看看