为什么 XMLHttpRequest.onreadystatechange return status 但 XMLHttpRequest.onload 没有？

Question

我正在学习使用 XMLHttpRequest 对象。在网络的帮助下，我编写了一个简单的 html 文件来检索数据并在页面中显示。

<!DOCTYPE html>
<html>
  <head>
    <title>XMLHttpRequest</title>
  </head>
  <body>
    <script>
      var request = new XMLHttpRequest();
      request.onload = function(){
        if(this.status !== 200){
          console.log("Error: " + this.status);
        }
        else{
          document.getElementById("stat").innerHTML = this.status;
          document.getElementById("size").innerHTML = this.response.length;
          document.getElementById("data").innerHTML = JSON.parse(this.response);
        }
      }
      request.open('GET','https://hplussport.com/api/products');
      request.send();
    </script>
    <div>
      Response Data<br/>
      Status: <span id="stat">Loading...</span><br/>
      Size  : <span id="size">Loading...</span> bytes<br/>
      Data  : <span id="data">Loading...</span>
    </div>
  </body>
</html>

如果 URL 正确，则请求工作正常，但如果 URL 中有任何错误，则不会发生任何事情。我知道如果没有响应，那么 this.response 将是空的，但我认为 this.status 仍然有一个值，因此控制台会报告 "Error" + this.status 但是，它没有'吨。如果我将 request.onload 更改为 request.onreadystatechange，它确实会触发控制台中的错误报告，但我收到了两次错误报告。

所以我的问题是，为什么 request.onload 不起作用而 request.onreadystatechange 起作用（两次），我应该使用哪一个？我觉得我应该使用 request.onload.

Answer 1

onload在请求完成时触发一次，是2xx状态。对于错误代码，您必须添加 onerror = callback

onreadystatechange 将被调用 4 次，不管你得到什么状态代码

当它打开一个请求时，
当完整请求 header + body 已发送时
当响应headers时returns（那你就知道响应状态和响应headers）
最后当漏洞响应 body 下载时

XMLHttpRequest 已经很老了，它的 bugs/quirks 已在现代浏览器中修复，但有一个更新的 api 称为 fetch 它更高级一些，因为您也可以使用 ReadableStreams 流式传输大数据 + 它在网络工作者、Deno 和 NodeJS 中也能很好地工作（与 XMLHttpRequest 不同）我建议 learn/use 取而代之

那么您的代码将如下所示：

var res = await fetch('https://hplussport.com/api/products')
if (response.ok) {
  // status was 2xx
  const json = await res.text()
  document.getElementById("stat").innerHTML = res.status;
  document.getElementById("size").innerHTML = new Blob([text]).size;
  document.getElementById("data").innerHTML = json;
} else {
  // status was not 2xx
  console.log("Error: " + res.status);
}

为什么 XMLHttpRequest.onreadystatechange return status 但 XMLHttpRequest.onload 没有？

Why does XMLHttpRequest.onreadystatechange return status but XMLHttpRequest.onload does not?

javascript

xmlhttprequest