现在是少女时代,以后是少女时代,永远是少女时代!
sone :少时的假粉丝

Ajax ie get的请求没有更新,而是提取IE自身的缓存,解决数据没有更新问题



在IE下通过ajax来get请求URL,但是发现,每次提交后得到的数据都是一样的,每次清除缓存后,就又可以得到一个新的数据。看了一下后端接口日志,IE请求第二次的时,实际上没有请求后端接口而是提取自己浏览器下的缓存,导致数据没有更新显示。修改URL添加URL,问题解决。


1、问题


在IE下通过ajax来get请求URL,但是发现,每次提交后得到的数据都是一样的,每次清除缓存后,就又可以得到一个新的数据。看了一下后端接口日志,IE请求第二次的时,实际上没有请求后端接口而是提取自己浏览器下的缓存,导致数据没有更新显示。


2、问题说明


Ajax能提高页面载入的速度主要的原因是ajax能实现局部刷新.

通过局部刷新机制减少了重复数据的载入,也就是说在载入数据的同时将数据缓存到内存中,一旦数据被加载其中,只要没有刷新页面,这些数据就会一直被缓存在内存中。

当我们提交 的URL与历史的URL一致时,就不需要提交给服务器,也就是不需要从服务器上面去获取数据,那么,我们得到还是最开始缓存在浏览器中的数据。

虽然降低了服务器的负载提高了用户的体验,但是我们不能获取最新的数据。为了保证我们读取的信息都是最新的,我们就需要禁止他的缓存功能。


下图:从请求的发出到解析响应的过程

1615127652179880.png


3、解决办法


(1)在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。


          原理:If-Modified-Since:0 故意让缓存过期


(2)在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。 


         原理:直接禁用缓存机制


(3)在URL后面加上一个随机数: "fresh=" + Math.random();。 


         原理:强行让每次的请求地址不同


(4)在URL后面加上时间搓:"nowtime=" + new Date().getTime();。


         原理:强行让每次的请求地址不同


(5)如果是使用jQuery,直接这样就可以了$.ajaxSetup({cache:false})。

         原理:$.ajaxSetup方法禁止掉Ajaz的缓存机制


4、示例


1、添加一个随机参数  如这里日期 为例

<script>
  $.ajax({
    url:'request.php?time='+ new Date().toTimeString(),
    success: function (result) {
      alert("请求返回");
    }
  });
</script>

2、通过jQuery的Ajax设置解决问题

<script>
  $.ajaxSetup({ cache: false });
  $.ajax({
    url:'request.php',
    success: function (result) {
      alert("请求返回");
    }
  });
</script>



参考文档

Ajax解决浏览器缓存问题

谈谈IE针对Ajax请求结果的缓存

解决Ajax中IE浏览器缓存问题

琼ICP备16001221号-1