XMLHttpRequest中的不同readystates是什么意思,我该如何使用它们？

当您使用 XMLHttpRequest 对象向服务器发起请求时，您可以在请求的生命周期中监听不同的 readystates。readystates 是 XMLHttpRequest 对象的属性，表示请求的状态。它们可以帮助您了解请求的进展情况，并在不同阶段执行相应的操作。以下是 XMLHttpRequest 的常见 readystates 及其含义：

1. UNSENT（未发送）：此阶段表示请求尚未初始化。XMLHttpRequest 对象已创建，但尚未调用 open() 方法。
2. OPENED（已打开）：此阶段表示请求已初始化。open() 方法已调用，但尚未调用 send() 方法。
3. HEADERS_RECEIVED（接收到头部）：此阶段表示请求已发送，并且浏览器已接收到响应的头部。此时，您可以获取响应头信息，例如状态码、响应类型等。
4. LOADING（加载中）：此阶段表示请求正在处理中。可能正在接收响应体，也可能尚未接收完毕。此阶段可用于处理大文件或长时间运行的请求。
5. DONE（完成）：此阶段表示请求已完成。您可以获取到完整的响应数据，处理响应或执行其他操作。

要使用这些 readystates，您可以在 XMLHttpRequest 对象上添加事件监听器。例如，您可以在 readystatechange 事件中检查 readystate 的值，并在特定阶段执行相应的操作。以下是一个简单的示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.OPENED) {
    console.log('请求已打开');
  }
  if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
    console.log('已接收到响应头部');
  }
  if (xhr.readyState === XMLHttpRequest.LOADING) {
    console.log('加载中');
  }
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log('请求成功，响应数据为：', xhr.responseText);
    } else {
      console.error('请求失败，状态码为：', xhr.status);
    }
  }
};
xhr.send();

在这个示例中，我们在 readystatechange 事件中检查 readystate 的值，并在不同阶段执行相应的操作。例如，当 readystate 变为 HEADERS_RECEIVED 时，我们可以获取响应头信息。当 readystate 变为 DONE 时，我们可以检查请求是否成功，并处理响应数据。