readyStateChange事件

什么是readyStateChange事件？

在使用 Ajax 技术进行网络通信时，我们经常需要使用XMLHttpRequest对象。在这个对象中，readyState表示 XMLHttpRequest 对象的状态。而readystatechange事件则是在这个状态发生变化时被触发。

具体来说，当readyState属性从一个状态变为另一个状态时，会触发readystatechange事件。通常情况下，我们会在读取服务器响应的过程中使用readystatechange事件。

readyState有几种状态？

readyState属性的值有五个状态，分别是：

• 0: 请求未初始化（XMLHttpRequest对象已创建，但未调用open()方法）
• 1: 服务器连接已建立（open()方法已被调用）
• 2: 请求已接收（send()方法已被调用）
• 3: 请求处理中（服务器正在处理请求并返回响应）
• 4: 请求已完成，且响应已就绪（响应已下载完成）

可以使用XMLHttpRequest对象的onreadystatechange属性来绑定readystatechange事件的处理程序（handler）：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 响应已就绪，并且响应状态码为200（表示成功）
    // 此时可以在这个回调函数中操作响应文本或者进行其他操作。
  }
}

xhr.open('GET', '/my/url', true);
xhr.send();

为什么要使用readyStateChange事件？

在使用 XMLHttpRequest 对象进行服务器通信时，通常需要根据服务器返回的响应内容来更新页面显示。如果每次向服务器请求数据都需要重新加载页面，那么用户体验将会大幅下降。因此使用 Ajax 技术可以在保证网站性能的同时，提升用户体验。

当我们使用 XMLHttpRequest 对象时，异步请求响应不会中断 JavaScript 运行，因此我们可以在请求发送后继续执行其他代码。一旦响应就绪，系统就会自动回调我们绑定好的onreadystatechange事件处理程序。在这个处理程序当中，我们可以获取响应体内容，并且通过JavaScript代码将其更新到页面上。

结语

readystatechange事件是使用 XMLHttpRequest 对象进行 Ajax 通信的重要一环。熟悉这个事件的使用，对于编写高效、优美的前端代码是至关重要的。