XHR readyState学习笔记

什么是XHR readyState

XMLHttpRequest (XHR) 是浏览器中的一个API，可以用来向服务器发送请求并接收响应。在发送请求和接收响应的过程中，XHR对象会有一个 readyState 属性，用于表示请求的当前状态。

以下是 readyState 的五个值及其含义：

• 0: 请求未初始化，即 xhr.open() 方法还未调用。
• 1: 服务器连接已建立，即 xhr.open() 方法已调用并连接到了服务器，但 send() 方法还未调用。
• 2: 请求已接收，即 send() 方法已经被调用，并且响应头和响应状态已经可获取。
• 3: 请求处理中，即正在下载响应体。
• 4: 请求已完成，且响应已就绪，即已经可以使用响应体。

实例演示

以下是一个简单的实例，用以演示 xhr.readyState 的不同状态：

javascriptCopy Code
const xhr = new XMLHttpRequest(); // 创建一个XHR对象
 
xhr.onreadystatechange = function() { // 绑定 onreadystatechange 事件监听函数
  if(xhr.readyState == 4 && xhr.status == 200) { // 当 readyState 为 4 且状态码为 200 时
    console.log(xhr.responseText); // 打印响应体
  }
};
 
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1'); // 初始化请求，请求地址为 jsonplaceholder 上的一个 Todo
xhr.send(); // 发送请求

在这个实例中，我们首先创建了一个 XHR 对象，然后绑定了一个 onreadystatechange 事件监听函数。当 XHR 对象的 readyState 值改变时，该函数就会被触发。

然后，我们以 GET 方式发送了一个请求到 jsonplaceholder 上的一个 Todo，这个请求是异步的，也就是说，JavaScript 代码不会阻塞等待响应。

当响应返回时，onreadystatechange 事件就会被触发，如果 readyState 值为 4，且响应状态码为 200，就说明请求已经完成，我们就可以访问响应体里面的数据了。

以上就是一个简单的演示，希望对您有所帮助！