Solve ajax "get" request method generate the cache problem

First, let's talk about what's cache:
when the get request, the browser will default to the requested resource cache.

Of course, this is a double-edged sword, its advantages as follows: it will enhance the user experience, because when a user clicks on a page requests a resource, a resource request is generated by default in the browser cache, so that when we click access to their resources when will first automatically find resources from the cache. If it can be loaded directly, if not, then request their server. This greatly saves time response, so that users can quickly get the resources they need. But just also he said that this is a double-edged sword, it is advantageous but also some disadvantages, if we will change some data, so sometimes because of the cache, the user is unable to get new resources. So we need to bypass the cache if necessary, then how should we do it? Now I will come to visit it is not the same address by changing the address of the method, thus bypassing the cache (cache is the same address will load access);

Yesterday I published a blog to share ajax wrapper function, which does not take into account the problem of cache get requests, so I'm here it will be perfect. Apart from anything else on our code.

//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);
            }
        }
    }

Carefully friends certainly see where we made a change, right, we need to get is that if the request is the way we need to do it under article addresses, when it does not refer to each visit on behalf of the same address, so we bypassed the cache problem, that is,

  if(ops.type=="get"){
        // 在get请求时,使用时间戳避免,缓存问题
        let t = new Date().getTime();
        ops.url = ops.url + "?__qft="+ t + "&" + ops.data;
    }

We have to add a time stamp of the data, so that we realize the problem is solved cache it!
More than one way to solve the cache, but I think this approach is to make it easier for everyone to understand, I hope you can be more so in the future to study under better use ajax, prevent some unnecessary mistakes.

Published 15 original articles · won praise 10 · views 487

Guess you like

Origin blog.csdn.net/weixin_43797492/article/details/104823487