解决Ajax中的缓存问题

当我们向服务器发送Ajax请求时,在W3C浏览器下,数据可以及时更新,但是如果使用的是IE浏览器且发送的是GET请求,系统会自动缓存请求结果,当下次访问时,系统自动会调用缓存信息,这会造成数据更新不及时。

一、Ajax缓存起源

IE缓存设计初衷:

在实际项目开发中,如果我们向同一url地址发送请求时,系统在第一次访问,会将请求的资源缓存到浏览器的客户端的缓存文件中,当下次继续向同一url地址发送请求时,如果请求资源没有变化,则直接调用缓存文件,这样可以加快网站的访问速度。

二、缓存解决的4中方案

1. 通过随机数的形式解决缓存问题

var url = 'test.php?id='+id+'&_='+Math.random();

缺点:随机数会让我们每次请求的url地址都是不同的,但是由于缓存机制,其每次请求都会进行缓存,所以会在客户端会生成大量的缓存文件。随机数也会重复的可能

2. 通过时间戳的形式来解决缓存问题

var url = 'test.php?id='+id+'&_='+new Date().getTime();

缺点:由于每次请求的url地址都是不同的,所以其也会在客户端生成大量的缓存文件。

3. 通过资源文件的最后修改时间来解决缓存

发送请求时,系统在第一次请求时会生成缓存文件,第二次请求时,会在请求头信息中追加如下参数:

If-Modified-Since:缓存资源文件的最后修改时间

当我们第一次访问服务器时,系统会自动生成请求的资源文件,每个文件在生成时都有三个时间(创建时间、访问时间、最后修改时间),生成完成后,系统会将资源内容+文件的最后修改时间一起返回给客户端IE浏览器,当第二次向同一url发送请求时,系统会自动在请求头信息中携带资源文件的最后修改时间,如果一致,则认为资源文件没有任何改变,将告诉浏览器,不需要重新请求,调用自身缓存即可。

实际项目开发中,我们可以通过设置请求头来解决以上问题

// 设置请求头信息解决缓存问题
Ajax对象.setRequestHeader('If-Modified-Sinece','0');

以上方法可以解决缓存问题,同时只会在客户端生成一个缓存文件。

 4. 在服务端禁止客户端进行缓存

header("Cache-Control: no-cache, must-revalidate");

真正含义:告诉浏览器不要对当前请求资源进行缓存

以上方法不会生成任何缓存。

原文地址:https://www.cnblogs.com/chenjiacheng/p/6522260.html