Ajax 数据请求：从零开始掌握异步通信

在现代 Web 开发中，Ajax（Asynchronous JavaScript and XML） 是实现页面局部刷新、提升用户体验的核心技术之一。虽然名字里包含 "XML"，但如今我们更多使用的是 JSON 格式的数据。本文将结合原理讲解与示例代码，带你深入理解并动手实践原生 Ajax 请求。

一、什么是 Ajax？

Ajax 全称是 Asynchronous JavaScript and XML，即"异步的 JavaScript 和 XML"。它的核心思想是：

在不重新加载整个页面的情况下，通过 JavaScript 向服务器发送请求并处理响应，从而动态更新网页内容。

这种机制让 Web 应用更像桌面应用------流畅、快速、无刷新。

二、Ajax 的基本工作流程

使用原生 JavaScript 发起 Ajax 请求，通常遵循以下五个步骤：

创建 XMLHttpRequest 对象
调用 open() 方法配置请求
设置回调函数监听状态变化（onreadystatechange）
调用 send() 发送请求
在回调中处理响应数据

关键概念解析

1. `XMLHttpRequest` 对象

这是浏览器内置的对象，用于发起 HTTP 请求。

ini 复制代码

const xhr = new XMLHttpRequest();

2. `open(method, url, async)`

method：HTTP 方法，如 'GET'、'POST'
url：请求的目标地址（API 接口）
async：是否异步（强烈建议设为 true）

⚠️ 注意：示例中使用了 false（同步），这会阻塞浏览器，实际开发中应避免！

3. `send()`

真正发出请求。对于 GET 请求，通常传入 null 或空值。

4. `onreadystatechange` 事件

每当请求状态发生变化时触发。我们需要在这个回调中判断请求是否成功完成。

5. 状态码与就绪状态

属性	含义
`xhr.status`	HTTP 状态码，如 `200` 表示成功
`xhr.readyState`	请求的当前阶段（0~4）

`readyState` 的五个阶段：

值	状态	说明
0	UNSENT	已创建，未调用 `open()`
1	OPENED	已调用 `open()`
2	HEADERS_RECEIVED	已调用 `send()`，收到响应头
3	LOADING	正在接收响应体
4	DONE	请求完成，响应数据全部接收

✅ 只有当 readyState === 4 且 status === 200 时，才表示请求成功！

三、实战示例：获取 GitHub 组织成员列表

我们将通过一个真实 API（GitHub 的公开接口）来演示如何用 Ajax 获取数据并渲染到页面。

✅ 改进后的推荐写法（异步模式）

xml 复制代码

<!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>
    <h2>Lemoncode 组织成员</h2>
    <ul id="members"></ul>

    <script>
        const xhr = new XMLHttpRequest();

        // 配置请求：异步 GET
        xhr.open('GET', 'https://api.github.com/orgs/lemoncode/members', true);

        // 监听状态变化
        xhr.onreadystatechange = function () {
            // 只有 readyState 为 4 且状态码为 200 才处理
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    // 成功：解析 JSON 并渲染
                    const members = JSON.parse(xhr.responseText);
                    const listItems = members.map(user => `<li>${user.login}</li>`).join('');
                    document.getElementById('members').innerHTML = listItems;
                } else {
                    // 失败：显示错误信息
                    document.getElementById('members').innerHTML = '<li>加载失败，请稍后重试。</li>';
                    console.error('请求失败:', xhr.status);
                }
            }
        };

        // 发送请求
        xhr.send();
    </script>
</body>
</html>

🌟 关键改进点：

使用 async: true ------ 不阻塞主线程，用户体验更好。
错误处理 ------ 检查非 200 状态码，避免程序崩溃。
结构清晰 ------ 先监听，再发送，逻辑更安全。

四、为什么不要用同步请求（`async: false`）？

在你提供的原始代码中：

kotlin 复制代码

xhr.open('GET', '...', false); // 同步！

这会导致：

浏览器界面完全冻结，直到请求完成；
用户无法滚动、点击或交互；
现代浏览器已不推荐甚至警告使用同步 XHR。

✅ 永远使用异步请求！

五、现代替代方案：`fetch` API

虽然原生 Ajax 是基础，但现代开发更常用 fetch，它基于 Promise，语法更简洁：

ini 复制代码

fetch('https://api.github.com/orgs/lemoncode/members')
  .then(response => response.json())
  .then(members => {
    document.getElementById('members').innerHTML = 
      members.map(user => `<li>${user.login}</li>`).join('');
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

不过，理解 XMLHttpRequest 仍是掌握网络请求本质的关键！

六、总结

要点	说明
✅ 核心对象	`XMLHttpRequest`
✅ 必须监听	`onreadystatechange`
✅ 判断条件	`readyState === 4 && status === 200`
✅ 数据格式	通常为 JSON，需 `JSON.parse()`
❌ 避免使用	同步请求（`async: false`）
🔮 进阶方向	学习 `fetch`、`axios` 等现代工具

通过本文的学习，你应该已经掌握了 Ajax 的基本原理和实现方式。下一步可以尝试：

发送 POST 请求提交表单；
添加加载动画（readyState === 3 时显示"加载中"）；
封装一个通用的 Ajax 函数。

记住：异步是 Web 的灵魂，而 Ajax 是通往动态交互的第一步！

Ajax 数据请求：从零开始掌握异步通信

一、什么是 Ajax？

二、Ajax 的基本工作流程

关键概念解析

1. XMLHttpRequest 对象

2. open(method, url, async)

3. send()

4. onreadystatechange 事件