XMLHttpRequest 是浏览器提供的用于异步通信的 JavaScript 对象，支持发送 GET、POST 等请求并处理服务器响应。通过创建 XHR 实例，调用 open() 配置请求方式与 URL，设置 onreadystatechange 监听状态变化，在 readyState 为 4 且 status 为 200 时获取 responseText 或 responseXML 数据，最后调用 send() 发送请求。尽管现代开发多使用 fetch 或 axios，但掌握 XHR 有助于深入理解 AJAX 原理和网络请求机制。
XMLHttpRequest 是 JavaScript 中用于与服务器进行异步通信的核心对象，它使得网页可以在不刷新页面的情况下发送请求并处理响应，是实现 AJAX（Asynchronous JavaScript and XML）技术的关键。
什么是 XMLHttpRequest
XMLHttpRequest（简称 XHR）是一个由浏览器提供的 JavaScript 对象，允许你与服务器交换数据。虽然名字中带有 "XML"，但它不仅可以传输 XML 数据，还能处理 JSON、文本、HTML 等多种格式。
通过 XMLHttpRequest，前端可以：
- 向服务器发送 GET、POST、PUT、DELETE 等类型的请求- 接收服务器返回的数据- 在不重新加载页面的前提下更新部分内容XMLHttpRequest 的基本使用步骤
要使用 XMLHttpRequest 发送一个简单的请求，通常包括以下几个步骤：
1. 创建 XHR 对象
现代浏览器都支持直接通过构造函数创建：
const xhr = new XMLHttpRequest();
2. 配置请求
使用 open() 方法设置请求方式和 URL：
xhr.open('GET', '/api/data', true);
第三个参数表示是否异步（true 表示异步，默认值）。
3. 设置回调函数监听响应
onreadystatechange 事件用于监听请求状态变化：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
其中 readyState 为 4 表示请求完成，status 为 200 表示成功。
4. 发送请求
调用 send() 方法发起请求：
xhr.send();
如果是 POST 请求，可以在 send() 中传入数据：
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'John' }));
常见的请求状态和属性说明
在处理响应时，以下属性非常关键：
- readyState：请求的当前状态0: 未初始化
1: 已建立连接
2: 已接收头信息
3: 正在下载响应体
4: 请求完成- status：HTTP 状态码，如 200、404、500 等- responseText：服务器返回的文本内容- responseXML：如果返回的是 XML，可在此获取（现已少用）- statusText：状态描述，如 "OK" 或 "Not Found"
简单 GET 请求示例
下面是一个完整的例子，从服务器获取 JSON 数据：
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.error('请求失败:', xhr.status);
}
}
};
xhr.send();
基本上就这些。掌握 XMLHttpRequest 是理解原生 AJAX 的基础，尽管现在更多人使用 fetch 或 axios 等更现代的封装，但了解 XHR 有助于深入理解前端网络请求机制。不复杂但容易忽略细节，比如状态判断和错误处理。建议动手写几个小例子加深理解。
