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