XMLHttpRequest 封装 Ajax 的基本用法

XMLHttpRequest：简化网络请求的利器

在现代网络开发中，XMLHttpRequest（XHR）是一项必不可少的技术，它允许浏览器与服务器进行异步通信。借助 XHR，您可以轻松发送和接收数据，而无需刷新整个页面。掌握 XHR 的基本用法和常见实践将显著提升您的编码效率。

### XMLHttpRequest 的原理

XHR 是一种 JavaScript 构造函数，可创建浏览器与服务器通信的 HTTP 请求对象。通过这种机制，您可以：

• 向服务器发送 HTTP 请求（如 GET、POST、PUT、DELETE）
• 设置请求头和请求体
• 处理服务器响应，包括响应头和响应体

### XHR 的基本用法

1. 创建 XHR 对象： var xhr = new XMLHttpRequest();
2. 设置请求类型和 URL： xhr.open('GET', 'http://example.com');
3. 设置请求头： xhr.setRequestHeader('Content-Type', 'application/json');
4. 发送请求： xhr.send();
5. 监听请求状态变化： xhr.onreadystatechange = function() {...};

当请求完成后，您可以检查 xhr.readyState 和 xhr.status 以确定请求状态。如果您需要在请求完成时执行操作，可以使用 onload 事件监听器。

### XHR 的常用方法

除了基本用法外，XHR 还提供了许多有用的方法，包括：

• open()： 设置请求类型和 URL
• send()： 发送请求
• abort()： 中止请求
• getAllResponseHeaders()： 获取所有响应头
• getResponseHeader()： 获取指定响应头
• responseText： 获取服务器返回的文本数据
• responseXML： 获取服务器返回的 XML 数据
• status： 获取请求的状态码
• statusText： 获取请求的状态文本
• readyState： 获取请求的当前状态

### XHR 的事件监听器

XHR 提供了以下事件监听器来处理请求状态变化：

• onload： 当请求完成时触发
• onerror： 当请求失败时触发
• onabort： 当请求被中止时触发
• onreadystatechange： 当请求的状态变化时触发

### 常见问题

1. 如何解决跨域问题？

跨域请求受到同源策略的限制。您可以使用 CORS（跨域资源共享）技术来允许不同域名的服务器之间的通信。

2. XHR 支持同步请求吗？

是的，XHR 支持同步和异步请求。默认情况下，XHR 采用异步模式。

3. 如何设置请求头？

使用 setRequestHeader() 方法设置请求头，例如：xhr.setRequestHeader('Authorization', 'Bearer TOKEN');

4. 如何获取服务器响应？

请求完成时，服务器响应存储在 xhr.responseText（文本数据）或 xhr.responseXML（XML 数据）中。

5. 如何中止请求？

使用 abort() 方法中止正在进行的请求。

### 结论

掌握 XMLHttpRequest 的基本用法将大大提升您的网络开发效率。通过异步通信、灵活的请求选项和丰富的事件监听器，XHR 成为现代 Web 开发中不可或缺的技术。