深入浅出JavaScript XMLHttpRequest：现代前端异步请求基石196

哈喽，各位前端老铁们，以及对Web技术充满好奇的朋友们！我是你们的中文知识博主。今天咱们要聊的这个话题，它虽然有些年头，但绝对是现代Web应用基石中的基石——没错，就是 XMLHttpRequest (XHR)！你可能听过AJAX，可能知道Fetch API，但如果你想真正理解前端是如何在不刷新页面的情况下与服务器“秘密”通信的，那么XHR是绕不开的一课。

一、XHR的诞生：革新Web体验的里程碑

在XHR出现之前，网页与服务器的交互模式非常简单粗暴：用户提交一个表单，或者点击一个链接，浏览器就会向服务器发送请求，然后整个页面重新加载。这种“一问一答，整页刷新”的模式，效率低下，用户体验极差。想象一下，你只是想点个赞，结果整个页面都要重新加载一遍，是不是很恼火？

为了解决这个问题，微软在IE 5中首次引入了ActiveXObject，后来被标准化为XMLHttpRequest对象。它的出现，为Web开发带来了革命性的变革，催生了AJAX (Asynchronous JavaScript and XML) 技术理念的普及。AJAX的核心思想就是利用XHR对象在后台与服务器进行少量数据交换，从而实现页面的异步更新，无需重新加载整个页面。这就像是给网页装上了一个“内部通话”系统，可以在不打扰用户当前操作的情况下，悄悄地获取或发送数据。

二、XHR到底是什么？工作原理简述

简单来说，`XMLHttpRequest`是一个内置于浏览器中的JavaScript对象，它允许Web客户端（浏览器）通过HTTP协议向服务器发送请求，并在接收到响应后，以异步的方式处理这些数据，而无需刷新整个页面。它的工作流程可以概括为以下几步：
创建XHR对象：在JavaScript中实例化一个`XMLHttpRequest`对象。
打开请求：使用`open()`方法指定请求的类型（GET、POST等）、URL以及是否异步。
设置请求头（可选）：使用`setRequestHeader()`方法添加自定义的HTTP请求头。
注册事件监听器：监听XHR对象的状态变化或特定的事件（如加载完成、错误发生）。
发送请求：使用`send()`方法发送请求，GET请求通常不带数据，POST请求则将数据作为参数。
处理响应：在请求完成后，通过监听器获取并处理服务器返回的数据。

三、XHR的核心API与属性详解

要掌握XHR，理解它的核心方法和属性至关重要。别担心，我这就带大家一一拆解！

1. 创建XMLHttpRequest对象

let xhr = new XMLHttpRequest();

这是所有操作的起点。

2. `open(method, url, async, user, password)`

这个方法用于初始化一个请求。它是XHR操作中非常关键的一步。
`method`：请求的HTTP方法，如`"GET"`, `"POST"`, `"PUT"`, `"DELETE"`等。
`url`：请求的目标URL。可以是相对路径，也可以是绝对路径。
`async`：一个布尔值，表示请求是否异步。强烈建议设置为`true`（默认值），即异步请求。同步请求会阻塞浏览器主线程，导致页面假死，用户体验极差，应尽量避免。
`user`和`password`：可选参数，用于HTTP认证。通常不推荐在前端代码中直接暴露。

// 示例：初始化一个异步GET请求
('GET', '/api/data', true);

3. `setRequestHeader(header, value)`

在`open()`之后，`send()`之前调用，用于设置自定义的HTTP请求头。这在发送POST请求时尤其常用，比如设置`Content-Type`。// 示例：设置请求头，告知服务器发送的是JSON数据
('Content-Type', 'application/json');
('Authorization', 'Bearer your_token_here');

4. `send(body)`

发送HTTP请求。对于GET请求，`body`通常为`null`；对于POST或PUT请求，`body`可以是要发送的数据，如字符串、FormData对象或Blob对象。// GET请求示例
(null);
// POST请求示例，发送JSON数据
let data = { name: '张三', age: 30 };
((data));

5. `readyState` 属性

一个整数，表示XHR请求的当前状态。它有以下几个值：
`0` (UNSENT): 初始状态，`open()`方法还未被调用。
`1` (OPENED): `open()`方法已被调用，请求已初始化。
`2` (HEADERS_RECEIVED): `send()`方法已被调用，并且头部和状态码已可获得。
`3` (LOADING): 正在下载响应体，`responseText`中已经包含部分数据。
`4` (DONE): 请求已完成，所有数据已接收，或者请求已失败。

6. `status` 属性

HTTP状态码，例如`200`表示成功，`404`表示未找到，`500`表示服务器内部错误等。

7. `responseText`, `responseXML`, `response` 属性

`responseText`：服务器作为响应返回的文本数据。
`responseXML`：如果服务器返回的是XML文档，则此属性将包含一个`XMLDocument`对象。
`response`：根据`responseType`属性的值，返回不同类型的数据。这是更现代的访问响应体的方式。

8. `responseType` 属性

设置期望从服务器返回的数据类型，可以在`open()`之后，`send()`之前设置。
`""` 或 `"text"`：字符串 (默认)
`"json"`：JSON对象
`"document"`：XML `Document`
`"arraybuffer"`：`ArrayBuffer`
`"blob"`：`Blob`

= 'json'; // 期望服务器返回JSON数据，XHR会自动解析

四、事件监听与响应处理

XHR的异步特性意味着我们不能立即拿到响应，而需要通过事件监听来获取结果。

1. `onreadystatechange` (经典方式)

这个事件在`readyState`属性发生变化时触发。你需要在回调函数中检查`readyState`是否为`4`（请求完成）以及`status`是否为`200`（成功）。 = function() {
if ( === 4) { // 请求完成
if ( >= 200 && < 300) { // HTTP状态码2xx表示成功
('请求成功:', );
// 这里可以处理成功的数据
} else {
('请求失败:', );
// 这里可以处理错误
}
}
};

2. 更现代的事件监听 (推荐)

为了更清晰地分离成功、失败和进度等情况，XHR还提供了更具体的事件。
`onload`：请求成功完成时触发（`readyState`为4且`status`在200-299之间）。
`onerror`：请求发送过程中遇到网络错误时触发。
`onabort`：请求被取消时触发。
`ontimeout`：请求超时时触发。
`onprogress`：在接收响应数据时周期性触发，可用于显示加载进度。

= function() {
if ( >= 200 && < 300) {
('数据接收成功！', ); // 会根据responseType自动解析
} else {
('服务器响应错误，状态码:', );
}
};
= function() {
('网络请求失败！');
};
= function(event) {
if () {
let percentComplete = ( / ) * 100;
('加载进度:', (2) + '%');
}
};
= 5000; // 设置超时时间为5秒
= function() {
('请求超时！');
};

推荐使用`onload`和`onerror`来处理成功和网络层面的错误，它们比`onreadystatechange`更简洁明了。

五、XHR实战示例：GET与POST请求

1. GET请求示例：获取用户列表

2. POST请求示例：提交新用户数据

六、进阶话题与注意事项

1. 跨域请求 (CORS)

当你的前端页面所在的域名（协议、主机、端口）与请求的后端服务器域名不一致时，就会发生跨域请求。浏览器出于安全考虑，会阻止这种请求，除非服务器明确允许。这是通过HTTP响应头`Access-Control-Allow-Origin`来控制的。如果你在开发中遇到“CORS error”，那多半是服务器没有正确设置这个响应头。

2. 同步与异步的选择

尽管`open()`方法允许你设置为同步请求（`async: false`），但强烈不推荐这样做。同步请求会阻塞浏览器UI线程，直到响应完全接收，导致页面失去响应，用户体验极差。在几乎所有现代Web应用中，异步请求都是标准做法。

3. 文件上传

XHR也可以用于文件上传。通常会结合`FormData`对象来构建请求体，这使得发送文件变得非常方便。

七、XHR与Fetch API：新老交替

你可能听过或者已经在用`Fetch API`了。它是一个更现代、更强大的网络请求API，基于`Promise`，语法更简洁，对处理流式数据和缓存策略有更好的支持。

那么，Fetch API都这么香了，我们为什么还要学习XHR呢？
历史代码：大量的现有Web应用和库仍然在使用XHR。了解它能帮助你更好地理解和维护这些代码。
底层原理： Fetch API的很多行为和概念，都是建立在HTTP请求和响应的底层机制之上的，而XHR就是这个底层机制的JavaScript封装。学习XHR能让你对Web通信有更深刻的理解。
特殊场景：虽然Fetch API很强大，但在某些非常特殊的场景下，XHR可能提供一些Fetch API目前还不太支持的精细控制（例如，更底层的进度事件，或者直接访问`XMLHttpRequest`实例的某些特性）。

所以，把XHR看作是Web异步请求的“老兵”和“基石”吧。理解它，能让你对Web前端的运作方式有一个更扎实的基础。

八、总结

XMLHttpRequest（XHR）是JavaScript中一个强大的对象，它彻底改变了Web页面的交互方式，通过实现无刷新页面更新，极大地提升了用户体验。它作为AJAX技术的核心，使前端能够以异步方式与后端服务器进行数据交换。

通过本文，我们详细探讨了XHR的创建、请求的初始化与发送、请求头设置、以及响应的处理。从`readyState`到`status`，从`onreadystatechange`到更现代的`onload`/`onerror`事件，我们了解了XHR的方方面面。虽然现在有了更简洁、基于Promise的Fetch API，但理解XHR的原理和用法，仍然是每个前端开发者必备的基础知识，它能帮助我们更好地理解Web通信的本质，也能让我们在面对老旧项目时游刃有余。

好了，今天的分享就到这里！希望通过这篇深入浅出的文章，你对JavaScript的XMLHttpRequest有了全新的认识。如果你有任何疑问或者想了解更多，欢迎在评论区留言，我们下期再见！

2025-10-20

上一篇：前端黑科技？JavaScript唤起本地应用深度解析（URL Scheme, Universal Link, App Link实战）

下一篇：揭秘 JavaScript 同步与异步：从事件循环到 async/await 的性能优化之路