純 js 讓瀏覽器不緩存 ajax 請求

開發「bufpay.com 我的即時到帳收款平臺」支付頁面須要用到 ajax 輪詢訂單的支付狀態。

如今瀏覽器對 ajax 的緩存策略遵循 http response header 裏面的緩存設置，爲了保證每次輪詢須要獲取最新的訂單信息，咱們須要對 ajax 請求作一些修改。

若是你使用 jquery 能夠直接在 document ready 的時候用

 $.ajaxSetup({ cache: false });

 

來讓每一個 ajax 請求都在後面添加時間戳。

bufpay.com 的支付頁面爲了最快的加載速度，就沒有使用任何第三方庫（jquery 庫壓縮後都有大概100K），因此這裏就手動在每一個 ajax 請求裏面添加時間戳，代碼以下：

 

//純 js 實現 ajax 請求            
var ajax = function(url, method, callback, params = null) {
                 var obj;
                 try {
                  obj = new XMLHttpRequest();
                 } catch(e){
                   try {
                     obj = new ActiveXObject("Msxml2.XMLHTTP");
                   } catch(e) {
                     try {
                       obj = new ActiveXObject("Microsoft.XMLHTTP");
                     } catch(e) {
                       alert("Your browser does not support Ajax.");
                       return false;
                     };
                   };
                 };
                 obj.onreadystatechange = function() {
                  if(obj.readyState == 4) {
                     callback(obj);
                  };
                 };
                 obj.open(method, url, true);
                 obj.send(params);
                 return obj;
             };

//請求的時候
var obj = ajax("{{domain}}/api/query/{{aoid}}?_=" + new Date().getTime(), "GET",  function(obj) {
    // do something
})

 

這樣，就能夠啦。

 

插播廣告 ✧(≖ ◡ ≖✿)嘿嘿