解决ajax “get”请求方式生成缓存问题

首先我们先谈一谈什么是缓存:
当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,防止一些没必要的出错。

发布了15 篇原创文章 · 获赞 10 · 访问量 487

猜你喜欢

转载自blog.csdn.net/weixin_43797492/article/details/104823487