使用XMLHttpRequest緩存頁面

Question

在最新版本的主要瀏覽器中，所有內容都並且都在同一個域上運行。

 var xmlhttp = new XMLHttpRequest();
 var sites = ["/page1", "/page2", "/page3"];
 var cache = {};

 function xhrStart(url) {
   xmlhttp.open("GET", url, true);
   xmlhttp.send();
 }

 function isOkXhr() {
   return (xmlhttp.readyState == 4 &&
     (xmlhttp.status >= 200 && xmlhttp.status < 300));
 }

 function reload() {
   var len = sites.length;
   var i;
   for (i = 0; i < len; i++) {
     var url = sites[i];

     xmlhttp.onreadystatechange = function() {
       if (isOkXhr())
         cache[url] = xmlhttp.responseText;
     }
     xhrStart(url);
   }
 }

重新加載功能應該是緩存所有頁面，但實際上所有查詢都在調試器中返回“異常終止”，最后一個除外。 可能是什么問題呢？

Answer 1

您正在使用一個XHR對象，並在循環中繼續對其進行寫入。 當您調用open（）時，它將中止上一個請求。 for循環不等待請求。

創建新的XHR請求或等待直到另一個請求完成，然后再發出下一個請求。

var sites = ["/page1", "/page2", "/page3"];
var cache = {};

function xhrStart(url) {
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.open("GET", url, true);
   xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == 4) {
           if(xmlhttp.status >= 200 && xmlhttp.status < 300) {
               cache[url] = xmlhttp.responseText;
           } else {
               //what are you going to do for error?
           }
       }       
   };
   xmlhttp.send();
}

for (var i = 0; i < sites.length; i++) {
    var url = sites[i];
    xhrStart(url);
}