首先我们先谈一谈什么是缓存:
当get请求时,浏览器会默认缓存要请求的资源。
当然这是一个双刃剑,其优点表现为:这样会提升用户的体验,因为当用户点击页面请求资源后,请求的资源会默认在浏览器中生成缓存,这样当我们再点击访问其资源时,会先自动从缓存中查找资源。如果有的话就直接加载即可,如果没有的话再对其服务器进行请求。这样大大的节省了响应的时间,使用户很快的可以拿到自己需要的资源。但是刚刚也说到了这是一把双刃剑,有利的同时也会存在一些缺点,倘若我们将有些数据更改了,这样有时候因为缓存的原因,用户是拿不到新资源的。所以我们必要时需要绕过这些缓存,那么我们应该怎么做呢?下面我会通过改变地址的方法来使其访问的不是同一地址,这样就绕过了缓存(缓存是访问同一地址时才会加载);
在昨天我发表了博客分享了ajax的封装函数,其中并没有考虑到get请求的缓存问题,所以我在此会进行完善。二话不说我们上代码。
//ajax的封装函数
function ajax(ops){
// 先处理默认属性
ops.type = ops.type || "get";
ops.data = ops.data || "";
// 根据当前的请求方式,决定是否需要拼接数据,处理url
// ops.url = ops.type=="get" ? ops.url + "?" + ops.data : ops.url;
if(ops.type=="get"){
// 在get请求时,使用时间戳避免,缓存问题
let t = new Date().getTime();
ops.url = ops.url + "?__qft="+ t + "&" + ops.data;
}
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 开启请求
xhr.open(ops.type, ops.url);
// 根据类型决定send的内容及内容数据格式
if(ops.type == "get"){
xhr.send();
}else{
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(ops.data);
}
// 开启监听
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
// 执行回调函数,取出数据
ops.success(xhr.responseText);
}
}
}
细心地朋友肯定看出来我们在哪里做了更改,对的,我们需要的就是如果是get请求方式时,我们需要对其地址做下文章,使其每次访问时不指代是同一个地址,这样我们就绕开了缓存问题,也就是
if(ops.type=="get"){
// 在get请求时,使用时间戳避免,缓存问题
let t = new Date().getTime();
ops.url = ops.url + "?__qft="+ t + "&" + ops.data;
}
我们为其添加了一个时间戳的数据,这样我们就实现了解决缓存的问题啦!
解决缓存的方式不止一种,但是我认为这个方法是更容易使大家理解的,也希望大家可以多去研究下以至于将来能更好的运用ajax,防止一些没必要的出错。