XMLHttpRequest 是浏览器提供的一个内置对象，用于在客户端和服务器之间进行异步通信。它是一种由浏览器提供的 JavaScript API（应用程序编程接口），开发者可以通过 JavaScript 代码来使用它。通过 XMLHttpRequest，开发者可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分页面内容。
主要特点
-
异步通信：
- XMLHttpRequest 允许在后台与服务器进行数据交换，而不会阻塞用户界面。这意味着用户可以继续与页面交互，而数据请求在后台进行。
-
多种数据格式支持：
- 虽然名字中包含“XML”，但实际上 XMLHttpRequest 可以处理多种数据格式，包括 JSON、HTML、纯文本等。
-
跨域请求：
- 通过 CORS（跨域资源共享）策略，XMLHttpRequest 可以处理跨域请求，但需要在服务器端进行相应的配置。
-
事件驱动：
- XMLHttpRequest 以事件驱动的方式工作，开发者可以通过监听
load、error、progress等事件来处理请求的不同状态。
- XMLHttpRequest 以事件驱动的方式工作，开发者可以通过监听
基本用法
以下是使用 XMLHttpRequest 发送 GET 请求的基本示例：
// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求：方法、URL、是否异步
xhr.open('GET', 'https://api.example.com/data', true);
// 定义请求完成后的处理函数
xhr.onload = function() {
if (xhr.status === 200) {
// 请求成功，处理响应数据
console.log('成功', xhr.responseText);
} else {
// 请求失败，处理错误
console.error('请求失败，状态码: ', xhr.status);
}
};
// 定义请求失败时的处理函数
xhr.onerror = function() {
console.error('网络错误或请求被阻止');
};
// 发送请求
xhr.send();
XMLHttpRequest 的生命周期
-
创建对象：
var xhr = new XMLHttpRequest(); -
配置请求：
xhr.open('GET', 'url', true); -
定义事件处理函数：
- onload：请求成功完成时触发。
- onerror：请求失败时触发。
- onprogress：在请求过程中触发，用于显示进度条等。
-
发送请求：
xhr.send(); -
处理响应：
- responseText：返回的数据为文本格式。
- responseXML：返回的数据为 XML 格式。
- status：HTTP 状态码（如 200 表示成功）。
- statusText：状态码的文本描述（如 “OK”）。
总结
XMLHttpRequest 是浏览器提供的一个强大工具，使得开发者可以在不刷新页面的情况下，与服务器进行数据交互。它支持多种数据格式，并且以异步方式工作，极大地增强了 Web 应用的交互性和响应性。然而，随着 Fetch API 的出现，一些开发者已经开始转向使用 Fetch API，因为它提供了更现代的接口和更简洁的语法。
