Ajax缓存

一、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：不推荐

7、jQuery提供一个防止ajax使用缓存的方法：

<script type="text/javascript" language="javascript">
$.ajaxSetup ({
cache: false //close AJAX cache
});
</script>
8、修改load 加载的URL地址，如在url 多加个时间参数就可以：

function loadEventInfoPage(eventId){

$.ajaxSetup ({
cache: true // AJAX cache 下面加上时间后load的页面中的js、css图片等都会重新加载，

//加上这句action会重新加载，但是js、css、图片等会走缓存
});
$("#showEventInfo").load(ctx + "/custEvents/viewEvent.action",{"complaint.Id":eventId,"tt":(new Date()).getTime()},function(){})
}

9、设置html的缓存

<Meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> <Meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <Meta HTTP-EQUIV="Expires" CONTENT="0">