当前位置：首页 > news >正文

XMLHttpRequest对象

news 2025/10/13 9:30:54

`XMLHttpRequest`（简称 XHR）是浏览器内置的 API 对象，专门用于在后台与服务器交换数据。所有 AJAX 操作的核心都是通过这个对象完成的

// 现代浏览器创建方式（IE7+、Chrome、Firefox等）
var xmlhttp = new XMLHttpRequest();// 兼容旧版IE（IE6及以下，现在几乎不用）
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

XHR 对象有两个关键方法用于发起请求：open() 和 send()

1. `open(method, url, async)`：配置请求参数

作用：定义请求的基本信息（方式、地址、是否异步）。
参数说明：
- method：请求方式（字符串），常用"GET"（获取数据）或"POST"（提交数据）；
- url：请求的服务器资源地址（字符串），可以是相对路径（如"data.txt"）或绝对路径（如示例中的公开 API）；
- async：是否异步（布尔值），true表示异步（推荐，不阻塞页面），false表示同步（已淘汰，会卡住页面）。

2. `send(body)`：发送请求

作用：将配置好的请求发送给服务器。
参数说明：
- body：请求体数据（仅POST方式需要），如表单数据"name=张三&age=20"；
- GET方式无需参数，直接写send()。

// 配置GET请求（获取数据），异步发送
xmlhttp.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
xmlhttp.send(); // GET方式无需参数// 配置POST请求（提交数据）
xmlhttp.open("POST", "/submit", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 设置请求头
xmlhttp.send("username=test&password=123"); // POST数据放在send()中

onreadystatechange 是 XHR 对象的核心事件，用于监听请求的状态变化，当请求过程中状态（readyState）改变时自动触发。

1. `readyState`：请求状态码

表示请求当前所处的阶段，是一个数字属性：

0：未初始化（对象创建但未调用open()）；
1：加载中（open()已调用，send()未调用）；
2：已加载（send()已调用，服务器已接收请求）；
3：交互中（服务器正在返回数据，响应体部分接收）；
4：完成（服务器响应全部接收，可处理数据）。

2. `status`：HTTP 状态码

表示服务器对请求的处理结果（如200成功、404未找到），只有当readyState === 4时，status才有效。

当请求成功（readyState=4且status=200）后，通过 XHR 对象的属性获取服务器返回的数据：

responseText：以字符串形式返回响应内容（最常用，适用于 JSON、文本等）；
responseXML：以XML 文档对象返回响应内容（适用于 XML 格式数据，现在较少用）

总结

AJAX 的核心语法本质是围绕XMLHttpRequest对象的 “创建 - 配置 - 发送 - 监听 - 处理” 流程：

用new XMLHttpRequest()创建通信工具；
用open()和send()发起请求；
用onreadystatechange监听过程，通过readyState和status判断请求是否成功；
用responseText获取数据，最后通过 JavaScript 更新 DOM 实现局部刷新。

// 1. 创建对象
var xhr = new XMLHttpRequest();// 2. 监听状态变化
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 5. 处理响应（如更新页面）document.getElementById("myDiv").innerHTML = xhr.responseText;}
};// 3. 配置请求
xhr.open("GET", "请求地址", true);// 4. 发送请求
xhr.send();

完整案例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>可运行的AJAX示例</title><style>#myDiv {padding: 20px;border: 1px solid #ccc;margin: 20px 0;min-height: 50px;}button {padding: 8px 16px;cursor: pointer;}.error {color: red;}</style>
</head>
<body><div id="myDiv"><h3>点击下方按钮加载数据</h3></div>
<button type="button" onclick="loadXMLDoc()">加载内容</button><script>
function loadXMLDoc() {// 显示加载状态document.getElementById("myDiv").innerHTML = "<p>加载中...</p>";var xmlhttp;// 创建XMLHttpRequest对象（兼容所有现代浏览器）if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else {// 兼容非常古老的IE浏览器（实际开发中可省略）xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}// 监听请求状态变化xmlhttp.onreadystatechange = function() {// 当请求完成时if (xmlhttp.readyState === 4) {// 请求成功（200状态码）if (xmlhttp.status === 200) {try {// 解析JSON数据（使用公开API返回的是JSON格式）const data = JSON.parse(xmlhttp.responseText);// 提取需要显示的内容document.getElementById("myDiv").innerHTML = `<h3>用户信息</h3><p>ID: ${data.id}</p><p>名称: ${data.name}</p><p>邮箱: ${data.email}</p>`;} catch (e) {document.getElementById("myDiv").innerHTML = `<p class="error">数据解析错误: ${e.message}</p>`;}} // 请求失败处理else {document.getElementById("myDiv").innerHTML = `<p class="error">请求失败，状态码: ${xmlhttp.status}</p>`;}}};// 使用公开的测试API，避免本地文件跨域问题// 这个API会返回一个用户信息的JSON数据xmlhttp.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);xmlhttp.send();
}
</script></body>
</html>