「GET」リクエストメソッドがキャッシュの問題を発生アヤックス解決

まず、キャッシュ何についてのletの話:
get要求は、ブラウザが要求されたリソースのキャッシュがデフォルトになります。

次のようにもちろん、これは、その利点両刃の剣である:ページをユーザーがクリックすると、リソースを要求すると、リソース要求がそのように、我々は彼らのリソースへのアクセスをクリックするときに、ブラウザのキャッシュにデフォルトで生成されるためには、ユーザーエクスペリエンスを強化します最初のキャッシュから自動的にリソースを検索します。ない場合には、直接ロードすることができた場合は、そのサーバーを要求します。ユーザーはすぐに彼らが必要とするリソースを取得できるように、これは非常に、時間応答を保存します。しかし、単にまた、彼はそれが有利であるが、我々はいくつかのデータを変更するかどうかにもいくつかの欠点は、その時々のでキャッシュのため、ユーザーが新しいリソースを取得することができない、これは諸刃の剣であることを述べました。必要に応じて、我々はバイパスにキャッシュを必要とするので、その後、我々はそれをどのようにすればよいですか?今、私はそれは、このように(キャッシュが同じアドレスにアクセスがロードされている)キャッシュをバイパスし、メソッドのアドレスを変更することにより、同じアドレスではありません訪ねてくるでしょう。

昨日、私は、アカウントにキャッシュGETリクエストの問題になりません共有Ajaxのラッパー関数にブログを公開し、私はそれが完璧になりますここにいるよそう。別に我々のコードに何か他のものから。

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

我々は、変更を行った場所を確認慎重に友人は確かに、右、我々は、取得する必要があり、それは同じアドレスに代わって、各訪問を参照していない場合、要求は、我々は記事のアドレスの下でそれを行う必要がある方法であればということです私たちは、あるキャッシュの問題を、バイパス

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

我々は問題がキャッシュそれは解決されて実現するように、データのタイムスタンプを追加する必要があります!
複数のキャッシュを解決する一つの方法よりも、私は、このアプローチは、それが簡単に誰もが理解できるようにすることだと思う、私はあなたには、いくつかの不要なミスを防ぐため、より効率的に使用アヤックスの下で研究に将来的にはもっとそうであることを願って。

公開された15元の記事 ウォン称賛10 ビュー487

おすすめ

転載: blog.csdn.net/weixin_43797492/article/details/104823487