Ajax 数据请求详解：从概念到实战

什么是 Ajax？

Ajax 全称是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），不过随着技术发展，现在更多使用 JSON 格式传输数据。它是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术，这让网页交互更加流畅自然。

Ajax 实现流程

结合代码实例，我们来详细讲解 Ajax 的实现步骤，核心是通过 XMLHttpRequest 对象完成数据请求与处理。

1. 实例化 XMLHttpRequest 对象

XMLHttpRequest 是浏览器提供的原生对象，用于在后台与服务器交换数据。

arduino 复制代码

const xhr = new XMLHttpRequest(); // 创建 Ajax 请求对象

2. 打开请求（open 方法）

open 方法用于初始化一个请求，语法为：xhr.open(method, url, async)

method：请求方式，如 GET（获取数据）、POST（提交数据）等
url：请求的接口地址
async：是否异步请求（true 为异步，false 为同步，通常使用异步）

代码示例：

kotlin 复制代码

// 打开一个 GET 请求，地址为 GitHub 组织成员接口，这里设置为同步（实际开发推荐异步 true）
xhr.open('GET', 'https://api.github.com/orgs/lemoncode/members', false);

3. 发送请求（send 方法）

send 方法用于将请求发送到服务器，若为 POST 请求，可在参数中携带请求体。

scss 复制代码

xhr.send(); // 发送请求

4. 监听请求状态变化（onreadystatechange 事件）

由于网络请求是异步过程（即使代码中设置为同步，也建议通过事件监听处理），需要通过 onreadystatechange 事件监听请求状态的变化，在合适的时机处理响应数据。

关键判断条件：

readyState：请求状态码（0-4，代表不同阶段）
status：HTTP 响应状态码（200 表示请求成功）

readyState 状态说明

0：未初始化（对象创建但未调用 open 方法）
1：已打开（调用 open 方法后，未发送请求）
2：已发送（调用 send 方法后，未接收响应）
3：接收中（已接收部分响应数据）
4：完成（响应数据接收完毕）

5. 处理响应数据并更新 DOM

当 readyState === 4 且 status === 200 时，表示请求成功且响应完成，此时可解析响应数据并更新页面。

代码示例：

javascript 复制代码

xhr.onreadystatechange = function(){
  console.log(xhr.readyState, '|--|--|'); // 打印当前请求状态
  // 判断请求成功且响应完成
  if (xhr.status === 200 && xhr.readyState === 4){
    // 解析响应数据（服务器返回的 JSON 字符串转为 JavaScript 对象）
    const data = JSON.parse(xhr.responseText); 
    // 动态生成列表项并更新到页面
    document.getElementById('members').innerHTML = data.map(item => `<li>${item.login}</li>`).join('');
  };
}

完整代码解析

以下是完整的代码实现，包含关键步骤的日志打印，帮助理解请求状态变化：

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>
        // 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest();
        console.log(xhr.readyState, '-----'); // 打印 0（未初始化）
        
        // 打开请求（GET 方式，同步请求）
        xhr.open('GET','https://api.github.com/orgs/lemoncode/members',false);
        console.log(xhr.readyState, '|----'); // 打印 1（已打开）
        
        // 发送请求
        xhr.send();
        console.log(xhr.readyState, '|--|--'); // 同步请求下，这里可能打印 4（已完成）
        
        // 打印原始响应文本
        console.log('//////');
        console.log(xhr.responseText);
        
        // 监听请求状态变化
        xhr.onreadystatechange = function(){
            console.log(xhr.readyState, '|--|--|'); // 打印当前状态（同步请求可能只打印 4）
            // 处理成功响应
            if (xhr.status === 200 && xhr.readyState === 4){
                console.log(xhr.responseText); // 打印响应文本
                const data = JSON.parse(xhr.responseText); // 解析 JSON 数据（注意：原代码此处多了个数字 4，需删除）
                console.log(data); // 打印解析后的对象
                // 动态生成列表并更新 DOM
                document.getElementById('members').innerHTML = data.map(item => `<li>${item.login}</li>`).join('');
            };
        }
    </script>
</body>
</html>

注意事项

同步 vs 异步 ：代码中使用了同步请求（async: false），但实际开发中建议使用异步（true），避免阻塞页面渲染。
错误处理：示例未包含错误处理（如网络错误、404 等），实际开发需补充对非 200 状态码的处理。
JSON 解析 ：需确保服务器返回的是合法 JSON 格式，否则 JSON.parse 会报错。
跨域问题：若请求非同源接口，需服务器配置 CORS 或使用代理解决跨域限制。

通过以上步骤，我们可以实现通过原生 JavaScript 发起 Ajax 请求，动态获取并展示数据，这是现代网页交互的核心技术之一。