Ajax 中的 readyState - JavaScript

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器进行数据交互的技术。它通过 JavaScript 来实现异步加载数据，并且可以与服务器进行数据的交换，更新网页的特定部分。在 Ajax 中，readyState 属性是用来跟踪标识 Ajax 请求的状态，通过检查这个属性的值，我们可以确定 Ajax 请求的进行过程和结果。

readyState 属性介绍

readyState 是 XMLHttpRequest 对象的一个属性，它用来表示当前 Ajax 请求的状态。此属性包含五个不同的值：

• 0（UNSENT）：请求未初始化。XMLHttpRequest 对象已被创建，但尚未调用 open() 方法。
• 1（OPENED）：已调用 open() 方法。请求已经启动，但尚未发送。可以通过设置请求头（request header）来指定一些参数，如请求的类型和目标 URL。
• 2（HEADERS_RECEIVED）：已调用 send() 方法。请求已发送，响应头（response header）和响应状态码（response status）已经可用。
• 3（LOADING）：正在接收响应体（response body）中的数据。 HTTP响应的消息体正在加载。
• 4（DONE）：响应已经完成。请求已成功接收，并且响应体（response body）已经完全加载，可以通过 responseText 或 responseXML 来获取响应数据。

可以通过以下代码片段来获取 readyState 属性的值：

var xhr = new XMLHttpRequest();
console.log(xhr.readyState);

使用 readyState 属性进行 Ajax 请求的监测

在进行 Ajax 请求时，通常会使用 XMLHttpRequest 对象来发送请求并接收响应。这时，我们可以通过检查 readyState 属性的变化来监测请求的状态。

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

在上述示例中，我们使用 open() 方法初始化了一个 GET 请求，并设置了指定的 URL。然后，我们给 XMLHttpRequest 对象的 onreadystatechange 属性赋值一个回调函数。当 readyState 发生改变时，该回调函数会被触发。在回调函数中，我们检查了 readyState 属性是否为 4（DONE），同时还检查了响应的状态码是否为 200。如果满足这两个条件，则表示请求已经成功，并且可以从 responseText 属性中获取到响应数据。

通过正确地使用 readyState 属性，我们可以根据不同的状态来执行适当的操作，例如显示加载状态、处理错误、更新页面内容等。

请注意，当 Ajax 请求状态发生改变时，onreadystatechange 事件会被触发多次。因此，在回调函数中应该进行适当的条件判断以确保只执行想要的操作。

以上是有关 Ajax 中的 readyState 的介绍，希望对你有所帮助！