XMLHttpRequest（XHR）是Web开发中的一个核心组件，它允许JavaScript在不刷新整个页面的情况下与服务器进行异步数据交换，这种技术通常被称为Ajax（Asynchronous JavaScript and XML）。XMLHttpRequest对象提供了一系列方法和属性，用于创建、发送和接收HTTP请求。在本篇中，我们将深入探讨这些方法和属性。
### 方法
1. **`open()`**: 这是初始化请求的关键方法。它接受三个参数：请求的类型（如"GET", "POST"），URL，以及一个布尔值表示是否异步执行。例如：
```javascript
xhr.open('GET', 'https://example.com/data', true);
```
2. **`send()`**: 一旦`open()`设置好，就可以使用`send()`来启动请求。对于GET请求，通常不传递参数；对于POST请求，可以传递一个包含数据的参数。例如：
```javascript
xhr.send();
// 或者对于POST请求
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1¶m2=value2');
```
3. **`setRequestHeader()`**: 在发送请求前，可以使用此方法设置HTTP头部信息。例如：
```javascript
xhr.setRequestHeader('Authorization', 'Bearer your-token');
```
4. **`abort()`**: 如果需要取消正在进行的请求，可以调用此方法。
5. **`overrideMimeType()`**: 可以覆盖服务器响应的MIME类型，这对于处理非标准格式的数据很有用。
### 属性
1. **`readyState`**: 这个属性表示请求的当前状态，有五种可能的值（0-4），分别对应请求的不同阶段。
2. **`status`**: 当请求完成时，这个属性返回HTTP状态码，如200表示成功，404表示未找到，500表示服务器错误等。
3. **`statusText`**: 返回与`status`关联的文本描述。
4. **`responseText`/`responseXML`**: 分别返回HTTP响应的文本或XML形式。根据响应的MIME类型，浏览器会选择合适的属性。
5. **`onreadystatechange`**: 这是一个事件处理函数，当`readyState`改变时触发。开发者通常在这里检查请求是否完成并处理响应。
6. **`timeout`**: 设置请求超时的时间（以毫秒计），默认为无穷大。当超过设定时间，`ontimeout`事件会被触发。
7. **`ontimeout`**: 超时时的回调函数，可以在这里处理错误。
8. **`withCredentials`**: 设置为`true`时，允许跨域请求携带cookies。
### 事件处理
- `onloadstart`: 请求开始时触发。
- `onprogress`: 数据传输中触发，提供关于下载进度的信息。
- `onabort`: 请求被`abort()`方法中断时触发。
- `onerror`: 发生错误时触发。
- `onload`: 请求成功完成时触发。
- `ontimeout`: 超时时触发。
- `onloadend`: 请求完成，无论成功还是失败，都会触发。
### 使用示例
```javascript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'https://example.com/data', true);
xhr.send();
```
以上就是XMLHttpRequest的主要方法和属性API的详细解释。了解和熟练掌握这些工具是构建交互式Web应用的基础，特别是在进行前端数据获取和更新时。通过合理的使用，开发者可以实现高效的页面动态加载和无刷新操作，极大地提升用户体验。
