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