夏日博客

A-A+

Ajax页面缓存问题分析与解决办法

2016年01月07日 前端设计 暂无评论 阅读 4 views 次

Ajax页面缓存是ajax处理数据时对一些重复相同数据进行一个缓存操作，这样从另一个层面对于我们来讲是非常的不错了，但有时我们并不希望它缓存要如何处理呢？下面我们一起来看看关于页面缓存问题分析与解决，希望例子对各位会带来帮助。

一、什么是Ajax缓存原理？

Ajax在发送的数据成功后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求时，它会直接从缓存中把数据取出来，这是为了提高页面的响应速度和用户体验。当前这要求两次请求URL完全相同，包括参数。这个时候，浏览器就不会与服务器交互。

二、Ajax缓存的好处

这种设计使客户端对一些静态页面内容的请求，比如图片，css文件，js脚本等，变得更加快捷，提高了页面的响应速度，也节省了网络通信资源。

三、Ajax缓存的不足

Ajax缓存虽然有上述的好处，但是如果通过Ajax对一些后台数据进行更改的时候，虽然数据在后台已经发生改变，但是页面缓存中并没有改变，对于相同的URL，Ajax提交过去以后，浏览器还只是简单的从缓存中拿数据，这种情况当然就不行了。

四、解决Ajax缓存问题的方法

解决这个问题最有效的办法是禁止页面缓存，有以下几种处理方法：

1.在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);

2.在服务端加 header(“Cache-Control: no-cache, must-revalidate”);

3.在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);

补充

4、在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了

5、第五种方法和第四种类似，在 URL 参数后加上 "?timestamp=" + new Date().getTime();

6、用POST替代GET：不推荐

jQuery提供一个防止ajax使用缓存的方法，

  1. <script type="text/javascript" language="javascript">   
  2. $.ajaxSetup ({   
  3. cache: false //close AJAX cache   
  4. });   
  5. </script>  

第二就是修改load 加载的url地址

例如 再url 多加个时间参数就可以 这个方法再wap1.0 中 我也用过避免读取缓存

  1. function loadEventInfoPage(eventId){  
  2.   
  3.     $.ajaxSetup ({   
  4.        cache: true // AJAX cache  下面加上时间后load的页面中的js、css图片等都会重新加载，     
  5.   
  6.          //加上这句action会重新加载，但是js、css、图片等会走缓存   
  7.     });   
  8.     $("#showEventInfo").load(ctx + "/custEvents/viewEvent.action",   
  9.                     {"complaint.Id":eventId, "tt":(new Date()).getTime()},function(){})   
  10. }  

第三种、设置html的缓存

  1. <META HTTP-EQUIV="Pragma" CONTENT="no-cache">      
  2. <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">      
  3. <META HTTP-EQUIV="Expires" CONTENT="0">  
标签：

给我留言