XMLHttpRequest readyState - JavaScript

在 JavaScript 中，XMLHttpRequest 对象是用于与服务器进行交互的关键工具之一。而 readyState 属性则可以告诉我们 XMLHttpRequest 的状态，从而在交互过程中进行适当的操作。

readyState 属性

readyState 属性有以下几个可能的值：

• 0: UNSENT - XMLHttpRequest 对象已被创建，但尚未调用 open() 方法。
• 1: OPENED - open() 方法已被调用，但 send() 方法尚未被调用。
• 2: HEADERS_RECEIVED - send() 方法已被调用，并且头部和状态已经可用。
• 3: LOADING - 下载中，responseText 属性已经开始包含部分数据。
• 4: DONE - 请求操作已完成。

使用 readyState

为了观察和操作 XMLHttpRequest 对象的 readyState 属性，我们可以使用以下示例代码：

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

在上述代码中，我们创建了一个 XMLHttpRequest 对象，并将 onreadystatechange 事件设置为一个函数。该函数会在对象的 readyState 属性发生变化时被触发。我们使用 readyState === 4 来检查请求是否完成，而 status === 200 则确保服务器返回成功响应。

在 readyState 等于 4 且状态码为 200 的情况下，我们可以通过 responseText 属性获取服务器返回的数据。

常见应用场景

readyState 属性的常见应用场景包括：

• 动态获取数据并更新页面内容。
• 监视文件上传或下载的进度。
• 检查服务器是否可用。
• 发送和接收实时数据。

总结

readyState 是一个用来指示 XMLHttpRequest 对象状态的属性。通过观察该属性的值，我们可以获取请求的当前状态并执行相应的操作。在 JavaScript 中使用 XMLHttpRequest 对象进行服务器交互时，理解和使用 readyState 是非常重要的。

注意：以上示例代码仅为说明 readyState 的使用方式，实际应用中需要根据具体情况进行适当的错误处理和逻辑处理。