XMLHttpRequest 使用
约 985 字大约 3 分钟
2025-01-21
XMLHttpRequest（XHR）是 JavaScript 中用于与服务器交换数据的 API。它允许你通过 JavaScript 发送 HTTP 请求，并处理响应。XMLHttpRequest 是一种非常灵活和强大的方式来与服务器进行通信，但它也有一些缺点，例如它是基于事件回调的，不支持 Promise，并且需要手动处理错误和超时。
使用
使用 XMLHttpRequest 发送请求的基本步骤如下：
- 创建一个
XMLHttpRequest对象。 - 使用
open方法设置请求的方法（如 GET 或 POST）、URL 和是否异步等。 - 使用
setRequestHeader方法设置请求头（可选）。 - 设置响应状态变化的监听器，例如
onreadystatechange。 - 使用
send方法发送请求。
创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();设置请求
xhr.open(method, url, async, user, password);- method：请求方式（GET、POST、PUT、DELETE 等）。
- url：请求的服务器 URL。
- async：（可选）是否异步，true 为异步（默认），false 为同步。
- user：（可选）用户名（如需身份验证）。
- password：（可选）密码。
设置请求头
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer your_token_here");响应头只能一个一个的设置。
监听响应状态
添加监听函数，当响应状态变化时触发：
function handleEvent(e) {
log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}
xhr.addEventListener("loadstart", handleEvent);
xhr.addEventListener("load", handleEvent);
xhr.addEventListener("loadend", handleEvent);
xhr.addEventListener("progress", handleEvent);
xhr.addEventListener("error", handleEvent);
xhr.addEventListener("abort", handleEvent);设置 onreadystatechange 事件处理程序，通过 readyState和status 判断状态：
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("成功响应:", xhr.responseText);
}
};xhr.readyState 状态：
- 0 – 请求未初始化（open() 方法尚未调用）。
- 1 – 服务器连接已建立（send() 方法尚未调用）。
- 2 – 请求已接收（已调用 send() 方法）。
- 3 – 处理中（服务器正在处理请求）。
- 4 – 请求已完成，响应已就绪。
添加 onload 事件处理程序，通过 status 判断状态：
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
console.log("响应成功:", xhr.responseText);
} else {
console.error("请求失败:", xhr.status);
}
};xhr.status 常见 HTTP 状态码：
- 200：成功
- 302：重定向
- 404：未找到
- 500：服务器内部错误
发送请求
直接请求：
xhr.send();可以在 send() 方法中添加请求体数据，如 POST 请求，可以传递 JSON 数据：
xhr.send(JSON.stringify({ name: "John", age: 30 }));响应处理
XMLHttpRequest 提供以下属性来访问响应：
- xhr.responseText：以文本字符串形式返回响应数据（常用于 JSON）。
- xhr.responseXML：如果服务器返回的是 XML 格式数据，则解析为 XML 文档。
- xhr.status：HTTP 状态码（如 200、404）。
- xhr.statusText：状态文本（如 “OK” 或 “Not Found”）。
处理 JSON 响应
如果服务器返回的是 JSON 格式的数据，可以使用 JSON.parse 方法将其解析为 JavaScript 对象。
xhr.onload = function () {
if (xhr.status === 200) {
const responseJSON = JSON.parse(xhr.responseText);
console.log(responseJSON);
}
};处理错误
监听 onerror 处理网络错误：
xhr.onerror = function () {
console.error("网络请求出错");
};设置超时
使用 timeout 设置请求超时时间（单位：毫秒），并使用 ontimeout 处理超时：
xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = function () {
console.error("请求超时");
};取消请求
在请求过程中，可以随时调用 abort() 方法来取消请求：
xhr.abort();
console.log("请求已取消");XMLHttpRequest 与 fetch 比较
| 特性 | XMLHttpRequest | fetch |
|---|---|---|
| 语法 | 基于事件回调（Event API） | 基于 Promise API |
| 语法 | 复杂，嵌套回调较多 | 简洁，Promise 链式调用 |
| 跨域请求 | 需要手动处理 CORS | 默认遵循 CORS |
| 超时处理 | timeout 属性可用 | 需要使用 setTimeout 实现 |
| 请求取消 | 使用 abort() 方法 | 使用 AbortController |
| 错误处理 | 使用 onerror 事件处理程序 | 使用 Promise 的 catch 方法 |
XMLHttpRequest 作为早期的 AJAX 解决方案，虽然已经被 fetch 取代，默认优先选择使用 fetch，但在某些特定情况下，如需要 兼容旧浏览器（如 IE 浏览器）、同步请求（fetch 不支持同步） 或 低级控制（如进度、超时等） 时，XMLHttpRequest 仍然有其应用场景。