JavaScript XMLHttpRequest 对象全面解析

2025-08-31 09:29:04 网络作者：本站点击：

一、词源与历史背景

XMLHttpRequest (XHR) 对象名称由三部分组成：

‌XML‌：最初设计用于处理XML格式数据交换
‌Http‌：基于HTTP协议实现客户端-服务器通信
‌Request‌：核心功能是发起网络请求

该对象最早由微软在1999年IE5中作为ActiveX组件实现，后经标准化成为所有现代浏览器支持的API

虽然名称保留"XML"，但实际可处理任何数据格式（JSON/HTML/文本等）。

二、核心功能

‌异步通信‌：不阻塞页面交互的情况下获取数据
‌局部更新‌：实现无刷新页面内容更新（AJAX核心）
‌协议支持‌：支持HTTP/HTTPS协议，部分浏览器支持file/ftp
‌数据格式‌：可发送/接收文本、二进制、FormData等多种格式

三、完整语法结构

var xhr = new XMLHttpRequest();
xhr.open(method, url, async, user, password);
xhr.send(data);

四、方法详解

1. open(method, url[, async, user, password])

初始化请求参数：

‌method‌：HTTP方法（必须）

"GET"：获取资源
"POST"：提交数据
"PUT"/"DELETE"等

‌url‌：请求地址（必须）
‌async‌：是否异步（可选，默认true）

true：异步（推荐）
false：同步（已废弃）

‌user/password‌：HTTP基础认证凭据（可选）

2. send([body])

发送请求：

‌body‌：请求体内容（可选）

GET请求：通常为null
POST请求：可传String/FormData/Blob等

3. setRequestHeader(name, value)

设置请求头：

‌name‌：头部字段名（如"Content-Type"）
‌value‌：字段值（如"application/json"）

4. abort()

中止当前请求

5. overrideMimeType(mimeType)

强制解析响应为指定MIME类型

五、属性详解

1. 状态属性

‌readyState‌：请求状态（只读）

0：未初始化（UNSENT）
1：已打开（OPENED）
2：已发送（HEADERS_RECEIVED）
3：接收中（LOADING）
4：完成（DONE）

‌status‌：HTTP状态码（如200/404）
‌statusText‌：状态文本（如"OK"/"Not Found"）

2. 响应属性

‌responseText‌：文本形式响应内容
‌responseXML‌：XML格式响应（需正确Content-Type）
‌response‌：根据responseType返回对应类型数据
‌responseType‌：指定响应类型：

""：文本（默认）
"text"：字符串
"json"：自动解析为JSON
"document"：XML文档
"blob"：二进制数据
"arraybuffer"：ArrayBuffer对象

3. 其他属性

‌timeout‌：请求超时时间（毫秒）
‌withCredentials‌：是否发送凭据（跨域请求）
‌upload‌：上传进度跟踪对象

六、事件处理

1. onreadystatechange

readyState变化时触发：

xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

2. 现代事件处理器

‌onload‌：请求成功完成时
‌onerror‌：请求失败时
‌onprogress‌：数据传输进度事件
‌ontimeout‌：请求超时时

七、输出换行处理

XHR响应数据中的换行符取决于服务器返回内容：

\n：Unix换行符
\r\n：Windows换行符
前端显示时可用<br>或CSSwhite-space: pre保留原格式

八、完整示例

1. GET请求示例

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if(xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

2. POST请求示例

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    alert(xhr.status === 201 ? '成功' : '错误: '+xhr.status);
  }
};
xhr.send(JSON.stringify({name: "John", age: 30}));

九、浏览器兼容性

现代浏览器均支持标准XHR对象，IE5-6需特殊处理：

function createXHR() {
  if(window.XMLHttpRequest) {
    return new XMLHttpRequest();
  } else if(window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  throw new Error("浏览器不支持XHR");
}:ml-citation{ref="3,5" data="citationList"}

十、现代替代方案

虽然XHR仍被广泛使用，但推荐考虑：

‌Fetch API‌：基于Promise的更现代接口
‌Axios‌：功能丰富的HTTP客户端库
‌WebSocket‌：实时双向通信协议

标签：