如何处理XHR错误显示消息？

我正在尝试使用XHR从其他来源获取一些内容，如下所示：

function fetchPage(str) { if(str=="") { document.getElementById("table").innerHTML=""; resetFilters(); $('#progress').hide(); //fetching progress bar 
 return; } if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); else // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=postCallback; xmlhttp.open("GET", "fetch.php?url=http://www.sis.itu.edu.tr/tr/ders_programlari/LSprogramlar/prg.php?fb="+str, true); xmlhttp.send(); // any stuff that goes here will happen before callback // (this is a good place to update a UI element showing a call is resolving.) // (for example a spinner or text saying "fetching") $('#progress').show(); progressFetching(); switch(xmlhttp.readyState){ //loading bar adjustments case 0: $('.bar').css("width","0%"); $('.bar').text("0%"); break; case 1: $('.bar').css("width","25%"); $('.bar').text("25%"); break; case 2: $('.bar').css("width","50%"); $('.bar').text("50%"); break; case 3: $('.bar').css("width","75%"); $('.bar').text("75%"); break; } } function postCallback() { if (xmlhttp.readyState==4 && xmlhttp.status==200){ progressDone(); //loading is finished $('#error').hide(); document.getElementById("table").innerHTML=xmlhttp.responseText; // continue to process post callback. resetFilters(); } else { // report error with fetch /*if(xmlhttp.status==404 || xmlhttp.responseText == "") $('#error').show();*/ //$('#error').show(); } } 

我希望我的页面在发生连接超时时显示错误，或者当计算机没有互联网连接时（可能是在挂机时发生断开连接）或网页无法获取其他源的内容的任何其他情况。

使用上面的代码，在else块中，如果我在/* */ comment部分中找到if(xmlhttp.status==404 || xmlhttp.responseText == "") ，我将不会收到错误，除非它不是404错误。 如果我去//评论部分，在启动提取过程之后将显示错误，直到它完成，即在xmlhttp.readyState = 0到xmlhttp.readyState = 4 。 如何使用这些属性或其他内容显示连接错误消息？

谢谢你的关注:)

Answer 1

问题是我先前问题中的模板存在缺陷。 我相信这会更好用，因为它会创建一个闭包来传递你需要使用的变量。

再一次，我没有测试这个，所以它可能有拼写错误和错误 – 除了如何调用postCallback()并添加一个参数，我也没有改变任何东西。

 function fetchPage(str) { if(str=="") { document.getElementById("table").innerHTML=""; resetFilters(); $('#progress').hide(); //fetching progress bar 
 return; } var xmlhttp; if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); else // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function () { postCallback(xmlhttp); }; xmlhttp.open("GET", "fetch.php?url=http://www.sis.itu.edu.tr/tr/ders_programlari/LSprogramlar/prg.php?fb="+str, true); xmlhttp.send(); // any stuff that goes here will happen before callback // (this is a good place to update a UI element showing a call is resolving.) // (for example a spinner or text saying "fetching") $('#progress').show(); progressFetching(); switch(xmlhttp.readyState){ //loading bar adjustments case 0: $('.bar').css("width","0%"); $('.bar').text("0%"); break; case 1: $('.bar').css("width","25%"); $('.bar').text("25%"); break; case 2: $('.bar').css("width","50%"); $('.bar').text("50%"); break; case 3: $('.bar').css("width","75%"); $('.bar').text("75%"); break; } } function postCallback(xmlhttp) { if (xmlhttp.readyState==4 && xmlhttp.status==200){ progressDone(); //loading is finished $('#error').hide(); document.getElementById("table").innerHTML=xmlhttp.responseText; // continue to process post callback. resetFilters(); } else { // report error with fetch /*if(xmlhttp.status==404 || xmlhttp.responseText == "") $('#error').show();*/ //$('#error').show(); } } 

Answer 2

根据这个stackoverflow： XMLHttpRequest（Ajax）错误

  xmlhttp.onreadystatechange = function (oEvent) { if (xmlhttp.readyState === 4) { if (xmlhttp.status === 200) { console.log(xmlhttp.responseText) } else { console.log("Error", xmlhttp.statusText) } } }