IE浏览器仅在Ajax get请求的缓存问题的几种解决方案

1、IE浏览器仅在get请求的缓存问题

1.1、缓存介绍

浏览器的第一次请求需要从服务器获得许多 css、img、js 等相关的文件，如果每次请求都把相关的资源文件加载一次，对 带宽、服务器资源、用户等待时间 都有严重的损耗，浏览器有做优化处理，其把css、img、js等文件在第一次请求成功后就在本地保留一个缓存备份，后续的每次请求就在本身获得相关的缓存资源文件读取就可以了，可以明显地加快用户的访问速度。css、img、js等文件可以缓存，但是动态程序文件例如php文件不能缓存，即使缓存我们也不要其缓存效果。

(仅有IE浏览器仅在get请求下会缓存动态程序文件,post请求不会缓存)

1.2、IE浏览器缓存现象

解决办法：让每次的请求的url地址不一样即可，这样就会获取服务器最新的文件内容。

1.3、解决IE浏览器缓存动态文件的方案

（1）设置随机数

Math.random();

直接在open()方法的url参数中追加随机数，目的是改变每次请求的url，url地址不一样，则每次都会请求服务器最新的文件内容

再次请求则不会读取缓存，因为url地址不一样了:

通过在url中加随机数，虽然解决了缓存的问题，但是每次请求成功，都会在本地产生一个垃圾动态php文件，会造成本地存储大量的缓存垃圾文件。

（2）设置时间戳

new Date().getTime()；。

设置时间戳和上面设置随机数的原理一样，都是改变url地址，同时也会生成对应请求数的缓存垃圾文件，时间戳从概率论上讲一定是唯一的。

（3）设置请求头

xhr.setRequestHeader(‘If-Modified-Since’,‘0’); // 值随意不一定是0, 1,2,3,4都可以。

解释:

客户端通过If-Modified-Since头将服务器端最后发过来的页面时间戳发送回去，服务器端通过时间戳判断客户端的页面是否是最新的，如果不是最新的则返回新的内容，如果是最新的，则返回304重定向到客户端缓存中的页面。

示例代码：

注意:

request.open('get','2-demo.php');
request.setRequestHeader('If-Modified-Since','0');  //必须放在open()的后面

http请求过程，请求头会携带我们所设置的信息：

结论：通过设置请求头的方式可以解决缓存的问题，只不过多次请求还是会产生一个缓存文件。

（4）PHP设置响应头禁止缓存

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

<?php
header('Cache-Control:no-cache');
header('Pragma:no-cache');
header('Expires:-1');
echo time();

HTTP的请求头标签 If-Modified-Since与Last-Modified
1.基本定义

Last-Modified 与If-Modified-Since 都是标准的HTTP请求头标签，用于记录页面的最后修改时间。

2.发送方向

Last-Modified 是由服务器发送给客户端的HTTP请求头标签

If-Modified-Since 则是由客户端发送给服务器的HTTP请求头标签

3.应用场景

（1）Last-Modified

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间，格式类似这样：

Last-Modified: Fri, 12 May 2006 18:53:33 GMT

后面跟的时间是服务器存储的文件修改时间

（2）If-Modified-Since

客户端第二次请求此URL时，根据 HTTP 协议的规定，浏览器会向服务器传送 If-Modified-Since 报头，询问该时间之后文件是否有被修改过：

If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT

后面跟的时间是本地浏览器存储的文件修改时间

如果服务器端的资源没有变化，则时间一致，自动返回HTTP状态码304（Not Changed.）状态码，内容为空，客户端接到之后，就直接把本地缓存文件显示到浏览器中，这样就节省了传输数据量。

如果服务器端资源发生改变或者重启服务器时，时间不一致，就返回HTTP状态码200和新的文件内容，客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示到浏览器中。

以上操作可以保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。