XMLHttpRequest.readyState 属性深度解析

词源分解与功能定位

readyState 属性名称由两部分构成：

• ‌ready‌（就绪）：表示请求/响应过程的准备状态

• ‌State‌（状态）：描述当前所处的阶段

该属性是XMLHttpRequest对象的核心状态指示器，用于精确追踪异步请求的生命周期

语法结构

基础访问方式：

const state = xhr.readyState;

属性特征：

• 只读属性（unsigned short类型）

• 动态变化值（0-4整数）

• 无参数，无方法调用

状态值详解

值	常量名	含义	典型触发时机
0	UNSENT	请求未初始化	刚创建XHR对象时
1	OPENED	连接已建立	调用open()方法后
2	HEADERS_RECEIVED	请求已接收	收到响应头信息
3	LOADING	请求处理中	接收响应体数据时
4	DONE	请求已完成	全部数据接收完毕

属性示例与输出

基础监控示例

const xhr = new XMLHttpRequest();
console.log(xhr.readyState); // 输出: 0 (UNSENT)
xhr.open('GET', '/api/data', true);
console.log(xhr.readyState); // 输出: 1 (OPENED)
xhr.onreadystatechange = function() {
  console.log(`状态变更: ${xhr.readyState}`);
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log('最终数据:', xhr.responseText);
  }
};
xhr.send();

‌典型输出序列‌：

0
1
2
3
4
最终数据: {...}

应用场景分析

1. 渐进式数据加载

xhr.onreadystatechange = function() {
  if(xhr.readyState === 3) {
    updateProgress(xhr.responseText.length);
  }
};

2. 请求超时处理

let timer = setTimeout(() => {
  if(xhr.readyState < 4) {
    xhr.abort();
    showTimeoutMessage();
  }
}, 5000);

3. 多阶段处理

xhr.onreadystatechange = function() {
  switch(xhr.readyState) {
    case 2:
      validateHeaders(xhr.getAllResponseHeaders());
      break;
    case 4:
      processFinalData(xhr.response);
      break;
  }
};

注意事项

1. ‌事件监听机制‌：

• onreadystatechange 在每次状态变化时触发

• 现代API推荐使用addEventListener方式

2. ‌状态变化时序‌：

graph LR
  A[0:UNSENT] -->|open()| B[1:OPENED]
  B -->|send()| C[2:HEADERS_RECEIVED]
  C --> D[3:LOADING]
  D --> E[4:DONE]

1. ‌兼容性差异‌：

• IE可能在某些中间状态触发额外事件

• 部分浏览器对状态3的支持不一致

综合比较表

特性	readyState	fetch()状态机制
状态粒度	5个精细阶段	3个基本阶段
访问方式	属性监听	Promise链式调用
中间状态控制	支持(状态3)	不支持
二进制支持	需配合responseType	原生支持
错误处理	需手动检查status	自动捕获异常
浏览器支持	全兼容	现代浏览器

现代替代方案

Fetch API状态监测

fetch('/api')
  .then(res => {
    if(!res.ok) throw new Error(res.statusText);
    return res.json();
  })
  .then(data => console.log(data));

性能优化建议

1. ‌状态检测精简‌：

// 推荐：仅检查完成状态
if(xhr.readyState === 4) {
  // 处理逻辑
}

1. ‌资源释放‌：

xhr.onloadend = function() {
  xhr = null; // 解除引用
};

1. ‌错误防御‌：

xhr.onreadystatechange = function() {
  try {
    if(xhr.readyState === 4) {
      if(xhr.status >= 200 && xhr.status < 300) {
        // 成功处理
      }
    }
  } catch(e) {
    console.error('状态处理异常:', e);
  }
};

通过深入理解readyState机制，开发者可以构建更健壮的异步通信系统，实现精细化的请求过程控制和用户体验优化