【AJAX XMLHttpRequest对象详解】AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，与服务器进行异步通信的技术。其核心在于使用 `XMLHttpRequest` 对象来发送和接收数据。本文将对 `XMLHttpRequest` 对象进行全面总结，并通过表格形式展示其关键属性和方法。
一、XMLHttpRequest 对象简介
`XMLHttpRequest` 是浏览器提供的一个内置对象，用于在客户端与服务器之间进行异步通信。它支持多种 HTTP 方法（如 GET、POST 等），并能处理各种类型的响应数据（如 XML、JSON、文本等）。尽管名称中包含“XML”，但它并不局限于处理 XML 数据，现代开发中更常用于 JSON 数据交互。
二、XMLHttpRequest 的主要属性
| 属性名 | 说明 |
| `readyState` | 表示请求的状态，0=未初始化，1=已建立，2=已发送，3=正在接收，4=完成 |
| `responseText` | 以字符串形式返回服务器的响应数据 |
| `responseXML` | 以 XML 文档形式返回服务器的响应数据 |
| `status` | 服务器返回的 HTTP 状态码（如 200 表示成功） |
| `statusText` | 服务器返回的 HTTP 状态信息（如 "OK"） |
| `timeout` | 设置请求超时时间（单位：毫秒） |
| `withCredentials` | 是否允许跨域请求携带凭据（如 cookies） |
三、XMLHttpRequest 的主要方法
| 方法名 | 说明 |
| `open(method, url)` | 初始化一个请求，指定请求方式（GET/POST）和 URL |
| `send(data)` | 发送请求，可选参数为发送到服务器的数据 |
| `abort()` | 取消当前请求 |
| `setRequestHeader(header, value)` | 设置请求头信息（如 Content-Type） |
四、XMLHttpRequest 的使用流程
1. 创建对象
使用 `new XMLHttpRequest()` 创建实例。
2. 设置回调函数
通过 `onreadystatechange` 监听状态变化，判断是否完成请求。
3. 初始化请求
调用 `open()` 方法设置请求类型和目标 URL。
4. 发送请求
使用 `send()` 方法发送请求，如果是 POST 请求，需要传递数据。
5. 处理响应
在 `onreadystatechange` 回调中根据 `readyState` 和 `status` 处理响应数据。
五、示例代码
```javascript
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
```
六、注意事项
- `XMLHttpRequest` 不支持跨域请求，除非服务器配置了 CORS。
- 在发送 POST 请求时，需设置 `Content-Type` 请求头。
- 使用 `responseType` 属性可以指定返回数据类型（如 json、text、blob 等）。
- 建议使用 `fetch()` API 替代 `XMLHttpRequest`，因为其语法更简洁，且支持 Promise。
七、总结
`XMLHttpRequest` 是 AJAX 技术的核心组件，虽然功能强大，但使用起来相对繁琐。随着现代前端框架的发展，许多开发者倾向于使用 `fetch()` 或第三方库（如 Axios）来简化异步请求。不过，了解 `XMLHttpRequest` 的工作原理对于深入理解 AJAX 机制仍然具有重要意义。
