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，前端可以：

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' }));

常见的请求状态和属性说明

在处理响应时，以下属性非常关键：

简单 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 有助于深入理解前端网络请求机制。不复杂但容易忽略细节，比如状态判断和错误处理。建议动手写几个小例子加深理解。