使用XMLHttpRequest缓存页面

Question

Everything is and is run on the same domain in the latest versions of the major browsers.

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

Reload function should be to cache all pages, but in fact all queries return Aborted in the debugger, except the last one. What could be the problem?

Answer 1

You are using one XHR object and keep writing over it in the loop. When you call open() it aborts the previous request. The for loop does not wait for the request.

Either create a new XHR request or wait til the other request is done before you make the next request.

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