为什么警报在XMLHttp请求的http.onload中不起作用？

Question

const http = new XMLHttpRequest();
const url = 'http://192.168.1.10/';
http.open('get', url, false);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onload = function () {
    if(http.status === 200 || http.status == 0) {
         alert("succeed")
    } else {
          alert("failed")
    }
}
http.send();

为什么虽然它没有得到 http.status === 200 但它没有警报失败！

Answer 1

只需使用XMLHttpRequest。它是为这种情况制作的一个错误函数。但您可能需要使用异步请求（true）。

const http = new XMLHttpRequest();
const url = 'http://192.168.1.10/';
http.open('get', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onload = function () {
    if(http.status === 200 || http.status == 0) {
         alert("succeed")
    }
}
http.onerror = function () {         
        alert("failed")
};
    http.send();

Answer 2

您可以尝试使用< code>onreadystatechange来捕捉错误，如下所示:

const http = new XMLHttpRequest();
const url = 'http://192.168.1.10/';
http.open('get', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.setRequestHeader("Access-Control-Allow-Origin:", "*");
http.setRequestHeader("Access-Control-Allow-Methods", "GET,POST,PUT");
http.onreadystatechange = function (oEvent) {  
    if (http.readyState === 4) {  
        if (http.status === 200) {  
           console.log(http.responseText);
           alert("succeed");
        } else {  
           console.log("Error", http.statusText); 
           alert("failed");
        }  
    }  
}; 
http.send();

摘自此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

Answer 3

更新：服务器可能处于脱机状态，并且 OP 希望在 Ajax 请求超时时重试。

要“修复”此问题，您可以将 http.send（） 语句包装到 try-catch 块中，例如：

...
try {
  http.send();
} catch(e) {
  //e.name would be "NetworkError" if the server is offline.
  console.log(e);
}

如果捕获到“NetworkError ”,则检测到服务器离线，稍后可以重试Ajax请求。

这个问题有3个问题：

>

根据错误截图（net:：ERR_CONNECTION_TIMED_OUT），目标服务器（http://192.168.1.10/）没有响应。请检查它是否可访问。

在代码中，内容类型定义为application/x-www-form-urlencoded，这意味着提交了表单。然而，Ajax请求是一个GET请求，没有任何数据发送逻辑。这是一个非常奇怪的组合，可以被浏览器或服务器端逻辑拒绝。如果您只想处理Ajax GET请求，则无需配置ContentType。

XMLHttp请求的load事件（问题中的http.onload）不受很好的支持，请使用@Katie建议的onreadystatechange。