解决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