XMLHttpRequest 对象是 Web 开发中用于与服务器交换数据的重要工具。它提供了一种在不重新加载整个页面的情况下从服务器请求数据并更新网页的方式。它是 AJAX（Asynchronous JavaScript and XML）的核心技术之一，允许网页实现异步数据加载，从而增强用户体验。
1. XMLHttpRequest 的作用
XMLHttpRequest 对象主要用于：
- 向服务器发送请求：可以是 GET 或 POST 请求。
- 获取服务器响应：可以是文本、JSON、XML 或二进制数据。
- 异步加载：不需要重新加载页面即可更新页面内容。
- 跨域请求：在现代浏览器中，
XMLHttpRequest支持跨域请求（通过设置 CORS）。
2. XMLHttpRequest 对象的基本用法
2.1 创建 XMLHttpRequest 实例
首先，需要创建一个 XMLHttpRequest 对象：
var xhr = new XMLHttpRequest();
2.2 配置请求
在发送请求之前，使用 open() 方法配置请求的类型、URL 和是否异步：
xhr.open('GET', 'https://api.example.com/data', true); // 'GET' 请求，URL，异步
- 第一个参数是 HTTP 请求方法（如
GET、POST、PUT、DELETE等）。 - 第二个参数是服务器的 URL 或 API 地址。
- 第三个参数是一个布尔值，指示请求是否异步。
true表示异步，false表示同步（同步请求已不常用，且不推荐）。
2.3 设置请求头
对于 POST 请求或者需要自定义请求头时，可以使用 setRequestHeader() 设置 HTTP 请求头：
xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
2.4 发送请求
使用 send() 方法发送请求。如果是 GET 请求，可以直接发送；如果是 POST 请求，需要将数据作为参数传递给 send()。
xhr.send(); // GET 请求时，不需要传递数据
// 对于 POST 请求，可以发送数据：
xhr.send(JSON.stringify({ name: "John", age: 30 }));
3. 处理响应
响应的处理依赖于 onreadystatechange 或 onload 事件。通常，最常用的方法是 onreadystatechange，它会在请求状态发生变化时触发。readyState 和 status 用于检查请求的当前状态和是否成功。
3.1 使用 onreadystatechange
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) { // 请求完成且成功
var response = xhr.responseText; // 获取响应数据
console.log(response);
}
};
readyState的值代表请求的状态。readyState == 4表示请求已完成。status == 200表示 HTTP 状态码为 200，表示请求成功。
3.2 使用 onload（更简洁）
onload 事件在请求成功完成后触发，它是处理成功响应的一种简化方法：
xhr.onload = function() {
if (xhr.status == 200) {
var response = xhr.responseText;
console.log(response);
}
};
3.3 获取响应数据
xhr.responseText: 返回服务器响应的文本数据。xhr.responseXML: 如果服务器返回的是 XML 格式的响应，使用此属性获取 XML 对象。xhr.response: 根据响应类型，返回不同格式的数据（如 JSON、Blob 等）。
4. 处理错误
可以使用 onerror 事件处理请求失败的情况。例如，服务器无法响应或出现网络错误时：
xhr.onerror = function() {
console.log('请求失败');
};
5. 常见的 readyState 和 status 值
5.1 readyState 的值
0: 请求未初始化（未调用open()）。1: 请求已打开（已调用open()，但未发送）。2: 请求已发送（已调用send()，等待响应）。3: 请求正在处理中（响应正在返回）。4: 请求已完成（响应已完全返回）。
5.2 status 的值
200: 请求成功（OK）。404: 请求的页面未找到。500: 服务器内部错误。
6. 完整示例
以下是一个完整的例子，展示如何使用 XMLHttpRequest 进行 GET 请求，并处理服务器返回的 JSON 数据：
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 处理响应
xhr.onload = function() {
if (xhr.status == 200) { // 请求成功
var response = JSON.parse(xhr.responseText); // 解析 JSON 响应
console.log(response); // 打印响应数据
} else {
console.log('请求失败，状态码: ' + xhr.status);
}
};
// 错误处理
xhr.onerror = function() {
console.log('请求出错');
};
// 发送请求
xhr.send();
7. 注意事项
- 异步请求：
XMLHttpRequest默认是异步的，意味着 JavaScript 会继续执行代码，而不会阻塞，直到响应返回。处理响应时需要使用回调函数。 - 跨域请求：使用
XMLHttpRequest进行跨域请求时，浏览器可能会阻止跨域请求。为了解决这个问题，可以配置服务器允许跨域访问（CORS）。 - 替代方案：现代浏览器中，
fetch()API 提供了更简洁、更强大的异步请求功能，可以替代XMLHttpRequest。fetch()基于 Promise，提供了更清晰的语法和更多的功能。
8. 总结
XMLHttpRequest 是一种用于在客户端与服务器之间交换数据的强大工具。通过 XMLHttpRequest，您可以发送各种类型的请求，处理服务器返回的数据，并动态更新网页内容。尽管它被 fetch() API 所替代，但仍然在许多传统和旧版浏览器中被广泛使用。
发表回复