ajax请求请求数据缓存问题分析以及解决方案

JavaScript013

ajax请求请求数据缓存问题分析以及解决方案,第1张

在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳

大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的时候总是使用IE缓存

什么是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使用缓存的方法:

javascript" language=" JavaScript ">

$.ajaxSetup ({

cache: false //close AJAX cache

})

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的缓存

1、AJAX请求时有三个参数,一个是请求的地址,一个是请求成功时候的回调函数,一个是请求失败的回调函数

2、消除缓存带来的影响就让请求的地址发生改变

Ajax('aaa.txt?t='+new Date().getTime(), fnsucess, fnfailed)

3、Ajax交互过程

(1)、创建Ajax对象 //只兼容非IE6:var oAjax new XMLHttpRequest()

IE6:var oAjax=new ActiveXobject("Microsoft.XMLHTTP") 

(2)、连接到服务器 oAjax.open('get/post', 'a.txt', true)//open参数,请求方式,文件名, 异步传输,false为同步传输

正常的同步和异步:

同步:多个事情一起来

异步:事情一个个来

而在js里面同步和一步相反,异步是多个事情一起来

(3)、发送请求  oAjax.send()

(4)、接收返回值