Ajax 数据请求详解与实战

在现代前端开发中，网页与服务器的数据交互 已经成为核心功能之一。

而支撑这一功能的技术之一，正是 Ajax（Asynchronous JavaScript and XML） 。

今天我们就来系统了解一下 Ajax 的工作原理、请求流程以及一个完整的示例。

一、什么是 Ajax？

Ajax 全称是 异步 JavaScript 和 XML ，

中文意思是"异步的 JavaScript 与 XML"。

虽然名字里有 XML，但如今开发中我们更多使用 JSON 格式来传输数据。

它最大的特点是：在不刷新页面的情况下与服务器通信，动态更新网页内容。

二、Ajax 的基本工作流程

Ajax 的实现依赖浏览器内置的一个对象：XMLHttpRequest（简称 XHR）。

通过这个对象，我们可以主动发起 HTTP 请求并接收响应。

流程如下：

创建请求对象
ini 复制代码
```
const xhr = new XMLHttpRequest();
```
配置请求信息
python 复制代码
```
xhr.open(method, url, async);
```
- method：请求方式（如 GET、POST）
- url：目标接口地址
- async：是否异步（true 为异步，false 为同步）
发送请求
ini 复制代码
```
xhr.send();
```

监听请求状态变化

ini 复制代码

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};

三、readyState 状态说明

在 Ajax 请求过程中，readyState 表示请求的不同阶段：

状态码	含义	说明
0	初始化	请求未初始化
1	打开	已调用 `open()`，还未发送
2	发送	已发送请求，接收到响应头
3	接收	正在接收服务器数据
4	完成	请求完成，已接收到全部响应数据

同时要注意：

xhr.status 表示 HTTP 响应状态（例如 200 表示成功）。
xhr.responseText 是服务器返回的字符串数据。

四、实战示例：请求 GitHub 数据

下面是一个完整的 Ajax 请求示例，用来获取 GitHub 上某组织的成员数据：

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>
    <ul id="members"></ul>

    <script>
        // 1. 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest();

        // 2. 打开请求 (异步)
        xhr.open('GET', 'https://api.github.com/orgs/lemoncode/members', true);

        // 3. 监听状态变化
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 4. 解析 JSON 数据
                const data = JSON.parse(xhr.responseText);
                console.log(data);

                // 5. 渲染到页面
                document.getElementById('members').innerHTML =
                    data.map(item => `<li>${item.login}</li>`).join('');
            }
        };

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

执行后，浏览器会在控制台打印出返回的数据，同时在网页中显示成员列表。

五、同步与异步的区别

同步请求（async = false） ：
浏览器会等待服务器响应后再执行后续代码，页面会"卡住"。
异步请求（async = true） ：
浏览器不会等待，能继续执行后续代码，响应回来后再触发回调函数。
------ 这正是 Ajax 的核心优势所在。

六、现代替代方案：Fetch 与 Axios

如今，在实际开发中，我们更常用以下方式：

Fetch API：更简洁现代的异步请求方式。

ini 复制代码

fetch('https://api.github.com/orgs/lemoncode/members')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

🧩 七、小结

要点	内容
Ajax 全称	异步 JavaScript 和 XML
核心对象	XMLHttpRequest
关键方法	`open()`、`send()`、`onreadystatechange`
常用属性	`readyState`、`status`、`responseText`
主要用途	实现网页的动态数据加载，不刷新页面即可更新内容

✅ 结语

Ajax 是前端与服务器通信的基础技术之一。

理解其底层原理不仅能帮助你更好地使用 fetch，

更能让你彻底理解浏览器异步通信机制的本质。