深入理解 Ajax：从原生 XMLHttpRequest 到现代异步请求实践

玉宇夕落
59 阅读4分钟

📌 引言：为什么今天还要学原生 Ajax？

尽管现代前端开发中我们更多使用 fetch 或 axios，但 理解原生 XMLHttpRequest（XHR） 仍是掌握 Web 异步通信机制的基石。本文将通过一个真实案例——获取 GitHub 组织成员列表，带你完整走通 Ajax 请求流程，并对比不同方案的优劣。

💡 注：虽然标题提及“稀土材料”“新能源芯片”，但 Ajax 是纯 Web 前端技术，与稀土无关。文末【拓展思考】将简要说明二者在科技生态中的关联。

🔁 一、什么是 Ajax？核心概念解析

Ajax（Asynchronous JavaScript and XML） 是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。

  • 异步（Asynchronous） ：请求发出后，JavaScript 不会阻塞，用户可继续操作页面。
  • 数据格式：虽名为 XML，但如今主流使用 JSON（轻量、易解析）。
  • 核心技术：XMLHttpRequest 对象（简称 XHR）。

✅ 典型应用场景：

  • 搜索框自动补全
  • 表单提交后局部刷新
  • 动态加载评论/用户列表（如本文案例）

🧪 二、实战案例：用 Ajax 获取 GitHub 组织成员

我们将请求 GitHub API 获取 lemoncode 组织的成员信息，并渲染到页面 <ul> 中。

✅ 接口信息

  • URL: https://api.github.com/orgs/lemoncode/members

  • Method: GET

  • 响应格式: JSON 数组

  • 示例数据片段：

    json
编辑
[  {    "login": "antonio06",    "id": 14540103,    "avatar_url": "https://avatars.githubusercontent.com/u/14540103?v=4"  },  {    "login": "brauliodiez",    "id": 2873912,    "avatar_url": "https://avatars.githubusercontent.com/u/1457912?v=4"  }]

🧱 三、原生 XMLHttpRequest 完整实现

1. 错误示范：同步请求（不推荐！）

html
预览
<script>
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/orgs/lemoncode/members', false); // 同步！
xhr.send(); // 阻塞主线程，页面卡死！

// ❌ 问题：onreadystatechange 在同步请求中可能不会触发！
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('永远不会执行？');
  }
};
</script>

⚠️ 严重问题：

  • 同步请求会冻结浏览器 UI，用户体验极差；
  • 现代浏览器已废弃同步 XHR（控制台警告）；
  • onreadystatechange 在同步模式下行为不可靠。

2. 正确做法：异步请求 + 状态监听

html
预览
<ul id="members"></ul>

<script>
const xhr = new XMLHttpRequest();

// 1. 打开异步请求（默认 async=true）
xhr.open('GET', 'https://api.github.com/orgs/lemoncode/members');

// 2. 设置状态变化监听器
xhr.onreadystatechange = function () {
  // readyState: 0→1→2→3→4
  // 只有当 readyState === 4 且 status === 200 时，才表示成功
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      try {
        const members = JSON.parse(xhr.responseText);
        const listHtml = members.map(m => 
          `<li>
            <img src="${m.avatar_url}&s=32" width="32" height="32" style="border-radius:50%">
            ${m.login} (ID: ${m.id})
          </li>`
        ).join('');
        document.getElementById('members').innerHTML = listHtml;
      } catch (e) {
        console.error('JSON 解析失败:', e);
      }
    } else {
      console.error('请求失败:', xhr.status, xhr.statusText);
    }
  }
};

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

✅ 关键点：

  • async 默认为 true，无需显式传参；
  • 必须在 send() 之前绑定 onreadystatechange；
  • 使用 try...catch 防止 JSON 解析异常。

📊 四、readyState 五阶段详解

值状态说明
0UNSENTnew XMLHttpRequest() 后，未调用 open()
1OPENEDopen() 已调用，连接已建立
2HEADERS_RECEIVEDsend() 已调用，响应头已接收
3LOADING响应体正在接收（可用于流式处理）
4DONE请求完成，响应就绪

🔍 调试技巧：在 onreadystatechange 中打印 xhr.readyState，观察状态流转。

🆚 五、方案对比：XHR vs Fetch vs Axios

方案优点缺点适用场景
XMLHttpRequest浏览器原生支持、兼容性好（IE7+）API 繁琐、回调地狱老项目维护、学习原理
Fetch APIPromise 化、语法简洁、支持 Stream不自动携带 Cookie、错误处理需手动判断 ok现代浏览器项目
Axios自动转换 JSON、拦截器、取消请求、兼容 Node.js需引入第三方库中大型项目、需要高级功能

✅ Fetch 实现对比（推荐写法）

js
编辑
fetch('https://api.github.com/orgs/lemoncode/members')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(members => {
    document.getElementById('members').innerHTML = 
      members.map(m => `<li>${m.login}</li>`).join('');
  })
  .catch(err => console.error('请求失败:', err));

✅ async/await 写法（更清晰）

js
编辑
async function loadMembers() {
  try {
    const res = await fetch('https://api.github.com/orgs/lemoncode/members');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const members = await res.json();
    renderMembers(members);
  } catch (err) {
    console.error('加载失败:', err);
  }
}

⚠️ 六、注意事项与最佳实践

  1. 永远不要使用同步 XHR
    → 会导致页面卡死，已被现代浏览器标记为“危险操作”。
  2. 正确处理 HTTP 错误
    → status !== 200 不代表网络错误（可能是 404、500），需分别处理。
  3. CORS 限制
    → GitHub API 支持 CORS，但私有接口需后端配置 Access-Control-Allow-Origin。
  4. 内存泄漏风险
    → 若在组件销毁前未取消请求（XHR 无法取消，Fetch 可用 AbortController）。
  5. 安全建议
    → 不要在前端暴露敏感 API Key；使用代理或后端中转。

🧠 七、拓展思考：Ajax 与“稀土技术”的关联？

虽然 Ajax 是纯软件层技术，但其运行依赖于底层硬件生态：

  • 芯片性能：更快的 CPU/GPU 加速 JavaScript 引擎（如 V8），提升 Ajax 响应速度；
  • 稀土永磁材料：用于制造高性能硬盘、SSD，影响服务器 I/O 性能；
  • 新能源数据中心：绿色电力驱动的云服务（如 AWS、阿里云）支撑高并发 API 请求。

💡 启示：前端开发者虽不直接接触材料科学，但应理解 “软件性能 = 算法 × 硬件 × 网络” 的协同关系。

✅ 八、总结要点

模块关键结论
Ajax 本质异步 HTTP 请求，实现局部刷新
XHR 核心open() → send() → onreadystatechange 监听
readyState4 表示完成，必须配合 status === 200 判断成功
现代替代优先使用 fetch + async/await
安全与性能避免同步请求、处理错误、防范 CORS

🔮 九、后续学习建议

  • 学习 AbortController 取消请求；
  • 掌握 Proxy 或 Mock Service Worker (MSW) 进行接口 mock；
  • 了解 WebSocket 与 Ajax 的适用边界（实时 vs 轮询）。

源码示例：CodePen - Ajax GitHub Members Demo
API 文档：GitHub REST API v3 - Org Members

结语：Ajax 是 Web 交互的“呼吸系统”。掌握它，你才能让网页真正“活”起来。

avatar
文章
阅读
粉丝