【xmlhttprequest请求】在Web开发中，`XMLHttpRequest`（简称XHR）是一个非常重要的对象，用于在浏览器和服务器之间进行异步通信。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。下面是对`XMLHttpRequest`请求的总结与对比。
一、XMLHttpRequest 请求概述
`XMLHttpRequest` 是一种客户端技术，主要用于实现 AJAX（Asynchronous JavaScript and XML）功能。虽然名称中包含“XML”，但现代应用中也可以传输 JSON、HTML、文本等格式的数据。
它的主要特点包括：
- 异步通信：无需刷新页面即可与服务器交互。
- 跨域支持：通过 CORS（跨源资源共享）机制实现跨域请求。
- 兼容性好：广泛支持主流浏览器。
二、XMLHttpRequest 请求流程图解
| 步骤 | 描述 |
| 1 | 创建 `XMLHttpRequest` 对象 |
| 2 | 设置请求方法（GET/POST等）和 URL |
| 3 | 设置请求头（可选） |
| 4 | 发送请求 |
| 5 | 接收服务器响应 |
| 6 | 处理响应数据 |
三、XMLHttpRequest 请求方法对比表
| 方法 | 功能 | 是否需要参数 | 是否异步 |
| `open()` | 初始化请求 | ✅ | ✅ |
| `setRequestHeader()` | 设置请求头 | ✅ | ✅ |
| `send()` | 发送请求 | ❌ | ✅ |
| `onreadystatechange` | 监听状态变化 | ❌ | ✅ |
| `responseText` | 获取响应文本 | ❌ | ✅ |
| `responseXML` | 获取响应 XML 数据 | ❌ | ✅ |
| `status` | 获取 HTTP 状态码 | ❌ | ✅ |
| `readyState` | 获取请求状态 | ❌ | ✅ |
四、XMLHttpRequest 使用示例（JavaScript）
```javascript
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
```
五、XMLHttpRequest 的优缺点
| 优点 | 缺点 |
| 支持异步请求，提升用户体验 | 需要手动处理错误和状态 |
| 兼容性好，适用于大多数浏览器 | 代码相对繁琐，不如 Fetch API 简洁 |
| 可以处理多种数据格式 | 跨域时需配置 CORS |
六、总结
`XMLHttpRequest` 是 Web 开发中实现异步通信的核心技术之一，尽管随着 `Fetch API` 的普及，其使用频率有所下降，但在一些老项目或特定场景下仍具有不可替代的作用。理解其工作原理和使用方式，有助于开发者更好地构建高性能、交互性强的网页应用。