AJAX – onreadystatechange 事件（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，AJAX（Asynchronous JavaScript and XML）技术是实现“无刷新交互”的核心工具，它让网页能够在不重新加载整个页面的情况下，与服务器进行数据交换并更新局部内容。而 onreadystatechange 事件则是 AJAX 的“心脏”，负责监听 HTTP 请求的状态变化，并在状态更新时触发相应的处理逻辑。对于编程初学者和中级开发者而言，理解这一事件的运作机制和应用场景，是掌握异步编程的关键一步。本文将从基础概念出发，结合代码示例和实际案例，深入解析 onreadystatechange 事件的原理与实践技巧。

一、AJAX 的核心概念与 onreadystatechange 的角色

1.1 AJAX 的基本原理

AJAX 的核心是通过 XMLHttpRequest（简称 XHR）对象与服务器进行通信。当开发者调用 open() 和 send() 方法发起请求后，服务器会逐步返回响应数据。然而，这个过程是异步的，因此需要一种机制来“监听”请求的实时状态变化，以便在数据准备好时执行后续操作。

onreadystatechange 的作用
onreadystatechange 是 XHR 对象的一个事件处理器，它会在 XHR 的 readyState 属性发生变化时被触发。开发者可以通过绑定这个事件，根据不同的状态值（readyState）执行对应的逻辑，例如：

• 当请求完成时更新页面内容
• 在请求失败时显示错误信息
• 在等待响应时显示加载动画

形象比喻
可以将 onreadystatechange 想象为一位“快递员”，它会实时报告包裹（HTTP 响应）的运输状态：

• 状态 0：快递员还未出发（请求未初始化）
• 状态 1：快递员已出发（请求已建立）
• 状态 2：包裹正在运输途中（响应头已接收）
• 状态 3：包裹即将到达（响应体正在接收）
• 状态 4：包裹已送达（响应体完全接收）

二、readyState 状态详解与事件处理逻辑

2.1 readyState 的五种状态值

下表总结了 readyState 的五个状态及其含义：

关键点：只有当 readyState 达到 4 时，才能安全地访问服务器返回的响应数据（如 responseText 或 responseXML）。

2.2 如何绑定 onreadystatechange 事件

在代码中，通常通过以下方式绑定事件处理器：

const xhr = new XMLHttpRequest();  
xhr.open("GET", "/api/data", true); // true 表示异步请求  
xhr.onreadystatechange = function() {  
  if (xhr.readyState === 4) { // 状态 4 表示请求完成  
    if (xhr.status === 200) { // HTTP 状态码 200 表示成功  
      console.log("数据获取成功:", xhr.responseText);  
    } else {  
      console.error("请求失败，状态码:", xhr.status);  
    }  
  }  
};  
xhr.send();  

注意事项：

1. 必须在调用 send() 之前绑定 onreadystatechange，否则可能错过早期状态变化。
2. 在状态 4 时，需检查 status 属性（如 200 表示成功，404 表示资源未找到）。

三、实战案例：构建一个简单的 AJAX 数据请求

3.1 案例目标

假设我们需要从服务器获取用户列表数据，并在页面中动态渲染。

3.2 HTML 结构

<div id="user-list">  
  <h2>用户列表</h2>  
  <ul></ul>  
</div>  

3.3 JavaScript 代码实现

// 创建 XHR 对象  
const xhr = new XMLHttpRequest();  

// 绑定事件处理器  
xhr.onreadystatechange = function() {  
  if (xhr.readyState === 4) {  
    if (xhr.status === 200) {  
      // 解析 JSON 数据  
      const users = JSON.parse(xhr.responseText);  
      // 渲染到页面  
      const userList = document.querySelector("#user-list ul");  
      users.forEach(user => {  
        const li = document.createElement("li");  
        li.textContent = `${user.name} - ${user.email}`;  
        userList.appendChild(li);  
      });  
    } else {  
      alert(`请求失败，状态码：${xhr.status}`);  
    }  
  }  
};  

// 初始化并发送请求  
xhr.open("GET", "/api/users", true);  
xhr.send();  

关键步骤解析：

1. 创建 XHR 对象：通过 new XMLHttpRequest() 初始化。
2. 绑定事件处理器：在 onreadystatechange 中检查状态，确保只在 readyState 4 时处理数据。
3. 处理响应数据：将 JSON 字符串转换为 JavaScript 对象，并动态生成 HTML 元素。

四、常见问题与进阶技巧

4.1 为什么需要同时检查 readyState 和 status？

虽然 readyState 4 表示请求已完成，但若服务器返回错误（如 404 或 500），此时 status 属性会记录具体错误码。因此，必须同时验证这两个条件，确保数据的有效性。

4.2 如何处理超时或网络中断？

可以通过设置 timeout 属性和 onerror 事件来增强容错性：

xhr.timeout = 5000; // 设置超时时间为 5 秒  
xhr.ontimeout = function() {  
  console.error("请求超时");  
};  

xhr.onerror = function() {  
  console.error("请求发生错误");  
};  

4.3 在现代开发中，是否还需要直接使用 XMLHttpRequest？

虽然 fetch API 和 axios 等库提供了更简洁的语法，但理解底层 XMLHttpRequest 的机制（包括 onreadystatechange）仍然是必要的。例如，在某些老旧浏览器或特殊场景下，仍可能需要直接操作 XHR 对象。

五、总结

onreadystatechange 事件是 AJAX 技术的核心组件之一，它通过监听 readyState 的变化，让开发者能够精准控制异步请求的生命周期。从初始化到数据接收完成的每一个阶段，开发者都可以通过这一事件实现定制化的逻辑处理。

对于初学者而言，掌握以下要点至关重要：

1. 状态机制：理解 readyState 的五个状态及其触发条件。
2. 事件绑定：在正确的时间点（调用 send() 之前）绑定 onreadystatechange。
3. 错误处理：结合 status 属性和 onerror 等事件，构建健壮的请求流程。

通过本文的案例和代码示例，读者可以快速上手实现基础的 AJAX 请求，并逐步扩展到更复杂的场景（如表单提交、实时聊天等）。随着对 XMLHttpRequest 的深入理解，开发者也将更好地适应现代前端框架（如 React、Vue）中基于 AJAX 的数据交互模式。

希望本文能帮助你掌握 onreadystatechange 事件的精髓，并在实际项目中灵活应用这一技术！