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

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:不推荐

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">


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值