JavaScript XMLHttpRequest readyState 五种状态详解

今天早睡

发布时间：2026-10-14 | 3人浏览过

原创

深入解析 JavaScript AJAX 核心技术 XMLHttpRequest 对象中 readyState 的五种状态（0-4），详细说明从对象创建、请求发送到数据完成的完整生命周期，并展示如何结合状态码与代码正确处理异步请求。

AJAX 核心的神秘面纱

在 Web 2.0 时代的早期探索中，XMLHttpRequest 对象是构建动态网页的核心组件。许多开发者对其内部状态流转感到困惑，不同技术书籍对 readyState 的描述往往语焉不详。要真正掌握 AJAX 的实质，必须清晰理解这五个状态背后的任务目标、执行过程及表现特征。

五种状态的详细解读

根据最佳实践总结，XMLHttpRequest 的五个状态可以按照“状态值：名称 + 任务/目标 + 过程描述”的模式进行准确定义：

第1步：理解状态 0 (Uninitialized) - 未初始化

任务目标：确认对象存在，为后续操作做准备。

表现特征：当 XMLHttpRequest 对象被成功创建（通过 new 关键字实例化）但尚未调用 open() 方法时，状态值为 0。

注意：如果此阶段读取状态值不为 0，说明对象实例化失败，浏览器通常会抛出异常提示对象不存在。

第2步：理解状态 1 (Loading) - 载入

任务目标：配置请求参数并发起向服务器的通信。

执行过程：调用 open(method, url, async) 方法进行初始化设置后，紧接着调用 send() 方法开始发送请求。

表现特征：状态值为 1，表示正在向服务端发送请求。此时请求已发出，但尚未接收到任何有效响应数据。

第3步：理解状态 2 (Loaded) - 载入完成

任务目标：接收服务器返回的全部原始数据。

表现特征：状态值为 2，表示 send() 方法执行完毕，已经接收完服务端的响应数据包。

关键限制：虽然数据已全部到达客户端，但此时获取的数据仍然是原始的 HTTP 报文。由于状态和头部信息在处理中，此时若直接读取 responseText 或 responseXML 可能会得到不完整或错误的内容，尚无法直接在客户端业务逻辑中使用。

第4步：理解状态 3 (Interactive) - 交互

任务目标：将原始数据解析为客户端可用的结构化格式。

执行过程：浏览器根据服务器响应头中返回的 MIME 类型，对原始数据进行解析转换。

表现特征：状态值为 3，表示正在进行数据解析。这是连接“原始接收”与“可用数据”之间的必要过渡阶段。在此阶段，部分数据可能已经开始填充到 responseBody、responseText 或 responseXML 属性中，但因为解析尚未完全结束，这些属性可能处于不稳定状态。

第5步：理解状态 4 (Complete) - 完成

任务目标：确认可用的最终结果供前端调用。

表现特征：状态值为 4，表示全部数据已接收且解析工作完全结束，网络连接已关闭。

使用方式：此时 responseText 或 responseXML 属性包含完整、准确的响应数据，开发者可以安全地提取并使用这些数据来更新页面 DOM。

生命周期与实战应用

纵观整个过程，XMLHttpRequest 的生命周期可概括为：创建 → 初始化请求 → 发送请求 → 接收数据 → 解析数据 → 完成。

在实际开发中，通常利用回调函数监听状态变化。以下是一个简化的逻辑示意，展示了如何捕获最终完成状态并处理响应：

// 假设 xhr 为已配置的 XMLHttpRequest 对象
xhr.onreadystatechange = function() {
    // 仅关注最终完成状态
    if (xhr.readyState === 4) {
        // 检查 HTTP 状态码是否成功 (如 200)
        if (xhr.status === 200) {
            try {
                // 如果是 JSON 数据，建议直接使用 JSON.parse
                var data = JSON.parse(xhr.responseText);
                console.log('数据解析成功:', data);
                
                // 或者如果是 XML 数据
                // var xmlDoc = xhr.responseXML;
            } catch (e) {
                console.error('JSON 解析出错', e);
            }
        } else {
            console.error('请求失败，状态码:', xhr.status);
        }
    } 
    // 可选：处理中间状态用于显示进度条等
    // else if (xhr.readyState >= 1 && xhr.readyState <= 3) { ... }
};

在旧版 IE 等特定环境中，有时需要手动销毁对象以防止内存泄漏，例如设置 xhr = null;。但对于现代浏览器和高版本 JS 环境，由 GC 自动回收是常态。