以上一节的案例为模板,使用IE9以下版本浏览器测试,有缓存问题;
原因: 在Ajax的get请求中,如果运行在IE内核的浏览器下, 其如果向同一个url发送多次请求时,就会产生所谓的缓存问题。 缓存问题最早设计初衷是为了加快应用程序的访问速度, 但是其会影响Ajax实时的获取服务器端的数据。
产生缓存的问题就是 我们的客户端向同一个 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);
服务器端在相应客户端请求时,可以设置相应头详细,如: header(‘Content-type:text/html; charset=utf-8’) :告诉客户端浏览器,使用utf-8的编码格式解析html页面信息。
设置不缓存的响应头标识即可:
//告诉客户端浏览器不要缓存数据
res.setHeader('Cache-Control','no-cache');