XMLHttpRequest状态0（responseText是空的）-JavaScript中文网-JavaScript教程资源分享门户

XMLHttpRequest（XHR）是一个在前端常用的对象，它允许浏览器通过 JavaScript 发送 HTTP 请求和接收服务器响应。XHR 对象有多种状态，其中状态 0 表示 XHR 对象已经被创建但还没有调用 open() 方法，因此 responseText 属性是空的。

XHR 状态码

XHR 对象的 readyState 属性代表了其当前的状态，取值如下：

0：请求未初始化。open() 方法还未被调用。
1：服务器连接已建立。open() 方法已经被调用，但 send() 方法还未被调用。
2：请求已接收。send() 方法已经被调用，并且头部和状态已经可获得。
3：请求处理中。响应体下载中；responseText 属性已经包含部分数据。
4：请求已完成，且响应已就绪。响应体下载完成；responseText 属性已经包含完整的响应数据。

当 XHR 的 readyState 属性为 0 时，表示该对象已经被创建但还未调用 open() 方法。此时如果尝试获取 XHR 的 responseText 属性，则会返回空字符串。

const xhr = new XMLHttpRequest();
console.log(xhr.readyState); // 0
console.log(xhr.responseText); // ""

可能的原因

XHR 对象还未调用 open() 方法，因此请求还未初始化。
跨域请求遭到了阻止。
网络连接存在问题。
服务器无法响应请求。

解决方案

为避免在状态 0 下尝试获取 responseText 属性时返回空字符串，我们应该确保在 send() 方法调用前 XHR 对象已经正确地初始化。同时，我们也要避免跨域请求受到限制，确保网络连接正常并且服务器能够正确地响应请求。

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.open("GET", "https://example.com/api/data");
xhr.send();

在以上示例中，我们通过在 send() 方法调用前指定 onreadystatechange 事件回调函数来确保 XHR 对象已经初始化成功。当 readyState 的值变为 4 且 status 的值为 200 时，表明响应已完成，此时可以对 responseText 进行操作。

总结

从状态码分析 XHR 对象的各种状态可以帮助我们更好地理解它的工作原理和可能出现的问题。在使用 XHR 对象时，我们需要注意其状态，并根据状态做出相应的处理，以确保我们的代码能够正常地运行。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/12135