深入解析 AJAX：XMLHttpRequest 的工作原理与现代替代方案

3Katrina
282 阅读4分钟

前言

在前端技术的演进历程中，发送请求的方式经历了多次重大变革，从早期的原生 XMLHttpRequest ，到 jQuery.ajax 的封装与简化，再到如今主流的 Fetch API 和功能强大的 Axios，每一次迭代都推动了前端开发效率与能力的飞跃。

而在这段历史中，XMLHttpRequest(AJAX) 无疑是真正的“祖师爷”——它首次实现了无需刷新页面的异步数据交互，奠定了现代Web应用的基石。本文将带你回顾这一里程碑式技术的诞生背景、核心设计，以及它如何塑造了今天的网络请求生态。



为什么需要AJAX？

image.png

在 AJAX（Asynchronous JavaScript and XML）  出现之前，Web 交互的模式是 同步的，即：

  • 用户点击一个链接或提交表单 → 浏览器向服务器发送请求 → 整个页面刷新 → 服务器返回新页面 → 浏览器重新渲染。

这种模式存在明显的缺点：

  1. 用户体验差：每次操作都会导致页面“白屏”刷新，等待时间较长。
  2. 带宽浪费：即使只是更新一小部分数据（如评论列表），也要重新加载整个页面。
  3. 交互受限：无法实现动态加载、局部更新等功能，Web 应用更像“静态文档”而非“应用”。

AJAX 的诞生（2005年）

2005年，Google 在 Google Maps 和 Gmail 中大规模使用了异步数据交互技术，使得用户可以在不刷新页面的情况下：

  • 拖动地图加载新区域
  • 接收新邮件通知
  • 动态更新数据

随后，Jesse James Garrett 在《Ajax: A New Approach to Web Applications》一文中正式提出 AJAX 概念，它基于 XMLHttpRequest（XHR）  实现，核心特点包括：
✅ 异步请求：浏览器可以在后台发送请求，不阻塞用户操作。
✅ 局部更新：仅更新 DOM 的某一部分，而非整个页面。
✅ 更快的响应：减少数据传输量，提升用户体验。

示例：传统表单提交 vs AJAX 请求

<!-- 传统表单提交（同步刷新） -->
<form action="/submit" method="POST">
  <input type="text" name="username" />
  <button type="submit">提交</button>
</form>

<!-- AJAX 异步提交（无刷新） -->
<script>
  document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/submit');
    xhr.send(new FormData(e.target));
    xhr.onload = () => alert('提交成功！');
  });
</script>

2. XMLHttpRequest (XHR) 的工作原理

XMLHttpRequest（XHR）是 AJAX 的核心 API，它允许 JavaScript 在浏览器中发送 HTTP 请求并接收响应。

XHR 的基本使用

const xhr = new XMLHttpRequest();

// 1. 初始化请求
xhr.open('GET', 'https://api.example.com/data', true); // true 表示异步

// 2. 设置回调
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 4 表示请求完成
    if (xhr.status === 200) {
      console.log(xhr.responseText); // 获取响应数据
    } else {
      console.error('请求失败:', xhr.status);
    }
  }
};

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

XHR 的关键属性和事件

属性 / 事件说明
readyState请求状态（0=未初始化，1=已打开，2=已发送，3=接收中，4=完成）
statusHTTP 状态码（200=成功，404=未找到，500=服务器错误）
responseText响应文本（JSON/XML/HTML）
responseType指定响应格式（"json"、"blob"、"arraybuffer"）
onload请求成功完成时触发
onerror请求失败时触发
onprogress用于监控上传/下载进度（可用于进度条）

XHR 的缺点

  1. 回调地狱（Callback Hell） ：多个异步请求嵌套时，代码难以维护。
  2. API 设计复杂：需要手动管理 readyState 和 status。
  3. 缺乏 Promise 支持：ES6 之前，异步代码只能依赖回调。


3. 从 AJAX 到 Fetch 的进化逻辑

尽管 XHR 奠定了异步请求的基础，但随着前端复杂度的提升，它的问题逐渐暴露，于是更现代的 Fetch API 应运而生。

Fetch 的改进

对比点XMLHttpRequestFetch
API 设计基于事件回调基于 Promise
错误处理需手动检查 status需手动检查 response.ok
数据解析需手动 JSON.parse()提供 .json()、.text() 等方法
请求控制需手动管理支持 AbortController 取消请求
CORS 处理需额外配置默认更严格（需 credentials: 'include'）

Fetch 示例

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json(); // 自动解析 JSON
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

为什么 Fetch 没有完全取代 XHR？

  1. 兼容性问题：旧浏览器（如 IE11）不支持 Fetch。

  2. 功能缺失：

    • Fetch 默认不携带 Cookie（需 credentials: 'include'）。
    • 没有内置超时机制（需结合 AbortController）。
    • 无法直接监控进度（XHR 有 onprogress）。

因此，许多项目仍选择 Axios（基于 XHR 的封装），它兼具 Promise 支持和更完善的错误处理。



总结

  • AJAX（XHR）  首次实现了无刷新数据交互，推动 Web 进入动态应用时代。
  • Fetch 基于 Promise 设计，更符合现代 JavaScript 编程风格。
  • Axios 弥补了 Fetch 的不足，成为当前最流行的 HTTP 客户端之一。

未来，随着 WebSocket、GraphQL、WebTransport 等技术的发展，前端数据交互方式还将继续演进。

讨论：你更喜欢 Fetch 还是 Axios？为什么？欢迎在评论区分享你的看法！  🚀

avatar
文章
阅读
粉丝