Resolver ajax "llegar" método de la petición genera el problema de caché

En primer lugar, vamos a hablar de lo que es la caché:
cuando la petición GET, el navegador por defecto en la memoria caché recurso solicitado.

Por supuesto, esto es una espada de doble filo, sus ventajas como sigue: se mejorará la experiencia del usuario, ya que cuando un usuario hace clic en una página solicita un recurso, una solicitud de recursos se genera por defecto en la memoria caché del navegador, de modo que cuando hacemos clic en el acceso a sus recursos cuando primero encontrarán automáticamente los recursos de la caché. Si se puede cargar directamente, si no, entonces solicitar su servidor. Esto ahorra mucho tiempo de respuesta, por lo que los usuarios pueden obtener rápidamente los recursos que necesitan. Pero así también dijo que esta es una espada de doble filo, es ventajoso, pero también algunas desventajas, si vamos a cambiar algunos datos, por lo que a veces debido a la caché, el usuario es incapaz de conseguir nuevos recursos. Así tenemos que el caché de derivación si es necesario, entonces, ¿cómo debemos hacerlo? Ahora voy a venir a visitar no es la misma dirección al cambiar la dirección del método, evitando así la memoria caché (caché es la misma dirección se carga el acceso);

Ayer publiqué un blog para función de contenedor cuota de Ajax, que no toma en cuenta el problema de la caché de peticiones GET, por lo que estoy aquí será perfecto. Aparte de cualquier otra cosa en nuestro código.

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

Con cuidado, amigos, sin duda ver donde hicimos un cambio, a la derecha, tenemos que conseguir es que si la solicitud es el camino que tenemos que hacer en los términos de las direcciones del artículo, cuando no se refiere a cada visita en nombre de la misma dirección, así que bypassed el problema de caché, es decir,

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

Tenemos que añadir una marca de tiempo de los datos, por lo que nos damos cuenta del problema se resuelve caché de él!
Más de una manera de resolver el caché, pero creo que este enfoque es hacer que sea más fácil de entender para todos, espero que puedan ser más en el futuro para estudiar con un mejor uso de Ajax, prevenir algunos errores innecesarios.

Publicado 15 artículos originales · ganado elogios 10 · vistas 487

Supongo que te gusta

Origin blog.csdn.net/weixin_43797492/article/details/104823487
Recomendado
Clasificación