使用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);
}