AJAX：创建 XMLHttpRequest 对象
'# AJAX：创建 XMLHttpRequest 对象
一、背景与问题
在 Web 开发中，页面刷新是用户交互的痛点。传统的页面请求需要整个页面重新加载，导致用户体验割裂。AJAX（Asynchronous JavaScript and XML）技术通过在后台与服务器通信，更新网页的局部内容，实现了动态交互。
XMLHttpRequest 是 AJAX 的核心对象，它允许 JavaScript 在不重新加载页面的情况下，向服务器发送 HTTP 请求并处理响应。尽管现代浏览器普遍支持 fetch API，但理解 XMLHttpRequest 的工作原理仍对掌握底层通信机制至关重要。
二、基本原理
1. XMLHttpRequest 的生命周期
XMLHttpRequest 的核心是异步通信机制，其生命周期包含以下几个关键阶段：
- 初始化阶段：创建 XMLHttpRequest 实例并配置请求方法（GET/POST）和 URL。
- 发送阶段：通过 send() 方法将请求发送到服务器。
- 响应处理阶段：通过 onreadystatechange 事件处理服务器响应。
2. HTTP 请求的底层机制
XMLHttpRequest 实现了 HTTP 协议的完整交互流程，包括：
- 建立连接：通过 TCP/IP 协议与服务器建立连接。
- 发送请求：包含请求行（Method + URL）、请求头（Headers）和请求体（Body）。
- 接收响应：服务器返回 HTTP 状态码、响应头和响应体。
- 关闭连接：释放资源并处理响应数据。
3. 异步与同步的差异
XMLHttpRequest 支持同步请求（async: false），但同步请求会阻塞浏览器主线程，导致页面冻结。现代开发中应始终使用异步模式。
三、环境准备
1. 基础依赖
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest 示例</title>
</head>
<body>
<div id="content">等待数据...</div>
<script src="ajax.js"></script>
</body>
</html>2. 服务器端准备（Node.js 示例）
// server.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/data', (req, res) => {
res.json({ message: 'Hello from server!', timestamp: new Date() });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});四、核心实现
1. 基础用法（GET 请求）
// ajax.js
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
document.getElementById('content').textContent = `收到数据: ${data.message}`;
}
};
xhr.send();关键代码解释：
open()方法初始化请求，第三个参数true表示异步请求。onreadystatechange事件处理程序监听请求状态变化，readyState === 4表示请求完成。status === 200确认请求成功，responseText获取原始响应数据。
2. 带参数的 GET 请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/data?name=John', true);
xhr.setRequestHeader('Accept', 'application/json');注意事项：
- URL 中的参数需要手动拼接。
- 使用
setRequestHeader()设置自定义请求头，如Accept类型。
3. POST 请求示例
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('服务器响应:', xhr.responseText);
}
};
const data = JSON.stringify({ name: 'Alice', age: 30 });
xhr.send(data);关键点：
Content-Type必须设置为application/json。send()方法参数需要是字符串格式（通过JSON.stringify转换）。
五、完整案例：用户登录验证
1. 前端代码（login.html）
<!DOCTYPE html>
<html>
<head>
<title>登录验证</title>
</head>
<body>
<form id="loginForm">
<label>用户名: <input type="text" id="username" required></label>
<label>密码: <input type="password" id="password" required></label>
<button type="submit">登录</button>
</form>
<div id="status"></div>
<script>
document.getElementById('loginForm').addEventListener('submit', function (e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/login', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById('status').textContent = '登录成功！';
} else {
document.getElementById('status').textContent = '登录失败: ' + xhr.statusText;
}
}
};
const data = JSON.stringify({ username, password });
xhr.send(data);
});
</script>
</body>
</html>2. 服务器端接口（server.js）
app.post('/login', (req, res) => {
const { username, password } = req.body;
// 模拟验证逻辑
if (username === 'admin' && password === '123456') {
res.status(200).json({ status: 'success', message: '登录成功' });
} else {
res.status(401).json({ status: 'fail', message: '无效凭证' });
}
});3. 案例说明
该案例演示了：
- 表单提交事件的拦截处理
- 带身份凭证的 POST 请求
- 状态码的判断逻辑
- 响应数据的处理方式
六、源码解析
1. XMLHttpRequest 的内部结构
XMLHttpRequest 对象内部维护着：
- 请求方法（method）
- 请求 URL（url）
- 请求头（headers）
- 请求体（body）
- 响应数据（responseText, responseXML）
- 状态信息（readyState, status）
2. readyState 状态机
| readyState | 状态描述 | 说明 |
|---|---|---|
| 0 | 未初始化 | 调用 open() 前的状态 |
| 1 | 已打开 | 调用 open() 后的状态 |
| 2 | 请求头已发送 | send() 之前的状态 |
| 3 | 响应头已接收 | send() 之后，响应头已获取 |
| 4 | 响应完成 | 数据处理完成 |
3. 响应处理机制
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理响应数据
}
};七、进阶使用
1. 设置超时时间
xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = function () {
console.error('请求超时');
};2. 跨域请求处理
xhr.withCredentials = true; // 允许发送 Cookie3. 响应类型设置
xhr.responseType = 'json'; // 自动解析 JSON 响应4. 大文件上传优化
// 分块上传示例
const chunkSize = 1024 * 1024; // 1MB
let offset = 0;
function uploadChunk() {
const chunk = data.slice(offset, offset + chunkSize);
offset += chunkSize;
xhr.send(chunk);
}八、性能与工程实践
1. 性能优化策略
- 减少请求次数：合并多个 AJAX 请求，使用缓存策略。
- 压缩数据：使用 GZIP 压缩响应数据。
- 减少数据传输量：仅传输必要的数据字段。
- 使用长连接：通过
keepalive保持 TCP 连接。
2. 异常处理机制
xhr.onerror = function () {
console.error('网络错误');
};3. 安全考虑
- 防止 XSS 攻击：对响应数据进行消毒处理。
- CSRF 防护：使用 token 机制验证请求来源。
- 数据加密：敏感数据使用 HTTPS 传输，必要时使用 AES 加密。
九、常见问题与踩坑
1. 跨域问题（CORS）
错误示例：
// 未设置 CORS 头的服务器响应解决方案：
- 服务器端添加
Access-Control-Allow-Origin: * - 使用代理服务器中转请求
2. 超时未处理
错误示例：
xhr.timeout = 3000;改进方案：
xhr.timeout = 3000;
xhr.ontimeout = function () {
console.error('请求超时');
};3. 响应数据解析错误
错误示例：
const data = JSON.parse(xhr.responseText); // 响应不是 JSON解决方案：
- 检查服务器响应头
Content-Type - 使用
responseType: 'text'显式指定类型
十、最佳实践
1. 推荐方案
- 始终使用异步模式：避免阻塞主线程。
- 设置超时机制：防止无限等待。
- 使用现代替代方案：对于新项目优先使用 fetch API。
- 安全验证：对所有请求进行数据校验。
2. 推荐代码结构
function sendRequest(url, method, data, callback) {
const xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
callback(xhr.status, xhr.responseText);
}
};
xhr.send(data);
}十一、总结
XMLHttpRequest 是 AJAX 的基石，通过它实现了 Web 页面的异步通信。理解其工作原理对于掌握 Web 通信机制至关重要。本文深入解析了其工作原理、实现细节和常见问题，提供了多个可运行的代码示例，覆盖了不同场景下的使用方法。
在实际开发中，XMLHttpRequest 适用于需要细粒度控制请求的场景，但对现代项目应优先考虑 fetch API 或 axios 等更高级的封装方案。同时需要关注安全风险，正确处理异常和超时，确保系统的健壮性和安全性。
评论已关闭