AJAX 数据请求实战：从原理到代码实现
在前端开发中，AJAX（Asynchronous JavaScript and XML） 是实现 前后端异步数据交互 的核心技术。它可以在 不刷新页面 的情况下与服务器通信，从而实现更流畅的动态网页体验。
一、什么是 AJAX？
AJAX 是 Asynchronous JavaScript and XML 的缩写，意为“异步的 JavaScript 与 XML”。
虽然名称中带有 XML，但现代开发中我们通常使用 JSON 格式进行数据传输。AJAX 的主要作用是让网页在后台与服务器交换数据，从而 部分更新页面内容。
二、AJAX 请求的完整流程
一次标准的 AJAX 请求通常包括以下几个步骤：
1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
2. 调用 open() 打开请求
xhr.open(method, url, async);
- method：请求方式（GET / POST）
- url：接口地址
- async：是否异步（
true异步，false同步）
3. 发送请求
xhr.send();
如果是 POST 请求，可以在 send() 中传入参数。
4. 监听请求状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功
}
};
通过监听 readyState 与 status，我们可以判断请求是否成功。
5. 解析返回结果
const data = JSON.parse(xhr.responseText);
将 JSON 字符串转换为 JavaScript 对象，便于操作。
三、readyState 各阶段说明
| 值 | 状态 | 描述 |
|---|---|---|
| 0 | UNSENT | 初始化阶段，尚未调用 open() |
| 1 | OPENED | 已调用 open()，请求准备就绪 |
| 2 | HEADERS_RECEIVED | 已接收到响应头 |
| 3 | LOADING | 正在接收响应体 |
| 4 | DONE | 请求完成，数据可用 |
四、完整示例：请求 GitHub 成员数据
下面演示如何使用 原生 AJAX 请求 GitHub API 并将结果渲染到网页中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX 数据请求</title>
</head>
<body>
<ul id="members"></ul>
<script>
// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 2. 打开请求（GET 方式，异步）
xhr.open('GET', 'https://api.github.com/orgs/lemoncode/members', true);
// 3. 监听状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 4. 解析数据
const data = JSON.parse(xhr.responseText);
// 5. 渲染 DOM
document.getElementById('members').innerHTML =
data.map(item => `<li>${item.login}</li>`).join('');
}
};
// 6. 发送请求
xhr.send();
</script>
</body>
</html>
运行后，网页会显示来自 GitHub API 的成员列表，每个成员名称都作为 <li> 元素渲染在页面中。
五、代码逻辑拆解
| 步骤 | 说明 |
|---|---|
| 创建对象 | new XMLHttpRequest() 建立通信通道 |
| 打开请求 | xhr.open() 指定请求类型、接口地址、异步方式 |
| 发送请求 | xhr.send() 正式发起请求 |
| 监听状态 | 通过 xhr.onreadystatechange 监控状态变化 |
| 处理结果 | 判断 readyState === 4 且 status === 200 后解析数据 |
| 更新界面 | 使用 innerHTML 更新网页内容 |
六、常见问题与提示
- 同步请求 (
false) 会阻塞页面渲染，不推荐使用。 - 如果接口跨域，需要服务端设置
Access-Control-Allow-Origin。 - 返回 JSON 数据时，记得使用
JSON.parse()转换。 - 现代开发中建议使用更简洁的
fetch()或axios，但理解 AJAX 有助于掌握底层机制。
七、总结
通过这篇笔记，你已经了解：
- AJAX 的基本概念与作用
- 请求的核心流程与状态变化
- 如何用原生代码实现数据请求与页面更新
虽然 AJAX 已被更高级的 API 取代（如 fetch），但掌握其原理仍是前端开发者的基础能力之一。