为什么警报在 XMLHttpRequest 的 http.onload 中不起作用？答案

【问题标题】：why alert didn't work in a http.onload from an XMLHttpRequest?为什么警报在 XMLHttpRequest 的 http.onload 中不起作用？
【发布时间】：2019-06-24 22:42:01
【问题描述】：

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 它没有警告失败！

【问题讨论】：

您可以尝试使用https://www.google.com/ 而不是http://192.168.1.10/，您是否尝试在此地址连接您的浏览器？有效吗？
@BenoitChassignol 我是故意这样做的......如果发生任何意外情况，看看 else 是否会起作用！！！但它没有
没有成功，因为地址不存在，不是服务器响应而是浏览器报错，没有状态返回。

标签： javascript ajax http if-statement xmlhttprequest

【解决方案1】：

更新：服务器可能离线，当Ajax请求超时时OP想重试。

要“修复”此问题，您可以将 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/）没有响应。请检查是否可以访问。
在代码中，Content-Type定义为application/x-www-form-urlencoded，表示提交了一个表单。但是，Ajax 请求是一个GET 请求，没有任何数据发送逻辑。这是一个非常奇怪的组合，可以被浏览器或服务器端逻辑拒绝。如果你只是想玩Ajax GET 请求，则不需要配置Content-Type。
XMLHttpRequest的load事件（问题中的http.onload）是not supported well，请使用@Katie建议的onreadystatechange。

【讨论】：

我是故意这样做的 .. 看看如果发生任何意外情况 else 是否会起作用！！！但它没有......并且 http.onreadystatechange 没有任何区别！
您拥有 192.168.1.10 吗？它存在吗？如果是，它是否收到 HTTP 请求？
嗯，这就是你没有得到 http 状态的原因。相反，您会从浏览器收到超时错误。
是的，我希望它重试“如果发生任何意外”，就像超时错误一样......但是如果它不是 http 状态，它会被称为什么？
这里没有调用任何内容。 http.onload 根本没有被触发，因为没有加载任何内容。 “超时错误”有两种类型： 1. 浏览器无法连接服务器导致超时错误。 2.超时错误，因为服务器花费了太多时间（但服务器本身已连接）-您只能收听第二种超时错误。如果服务器本身不存在，则不会调用任何内容。

【解决方案2】：

您可以尝试使用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

【讨论】：

不，它不起作用“未捕获的 DOMException：无法在 'XMLHttpRequest' 上执行 'send'：加载失败”@Katie
嘿@mooooooon ！我更新了代码 - 试一试，希望这次能成功！
还是不行！！！！！！和 Uncaught TypeError: http.setHeader is not a function btw Allow-Origin is not case !!
它现在可以工作了我删除了这些行http.setHeader("Access-Control-Allow-Origin:", "*"); http.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT");你能解释一下你添加了什么使它工作吗？
如果失败，我现在如何让它在 1 秒后重试请求？我试图将完整的 xmlhttp 请求放入一个函数中，然后将其回调，在 else 部分我再次调用它，但我得到了这个“未捕获的 DOMException：无法在 'XMLHttpRequest' 上执行'发送'：无法加载 192.168.1.10”代码pastiebin.com/5d124d28e45d0，如果我有多个相互依赖的请求，我该怎么办！

【解决方案3】：

只需使用 XMLHttpRequest.onerror 函数，它就是为这种情况而设计的。但你可能需要使用异步请求（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();

【讨论】：