前端基础-Ajax缓存问题

第4章 缓存问题

4.1 缓存的产生

以上一节的案例为模板，使用IE9以下版本浏览器测试，有缓存问题；

原因： 在Ajax的get请求中，如果运行在IE内核的浏览器下， 其如果向同一个url发送多次请求时，就会产生所谓的缓存问题。 缓存问题最早设计初衷是为了加快应用程序的访问速度， 但是其会影响Ajax实时的获取服务器端的数据。

4.2 客户端解决缓存问题

产生缓存的问题就是 我们的客户端向同一个 url 发送了多次请求； 如果我们每次请求的url不同，那么，缓存问题就不会存在了；

我们可以在请求地址的后面加上一个无意义的参数，参数值使用随机数即可， 那么每次请求都会产生随机数，URL就会不同，缓存问题就被解决了；

Math.random()：返回 0–1 之间的随机数，包括 0 但不包括 1；

修改代码如下：

var url = '03-1.php?names='+inp.value+'&_='+Math.random();
xhr.open('get',url);

但是，随机数虽然解决了问题，但是，我们不能保证每次生成的随机数都不一样； 也就是说，使用随机数存在一定的隐患；

new Date().getTime() ： 获取当前时间的毫秒时间戳 修改代码如下：

var url = '03-1.php?names='+inp.value+'&_='+new Date().getTime();
xhr.open('get',url);

4.3 设置响应头禁用客户端缓存

服务器端在相应客户端请求时，可以设置相应头详细，如： header(‘Content-type:text/html; charset=utf-8’) ：告诉客户端浏览器，使用utf-8的编码格式解析html页面信息。

设置不缓存的响应头标识即可：

//告诉客户端浏览器不要缓存数据
res.setHeader('Cache-Control','no-cache');