深入理解 AJAX，从 XMLHttpRequest 到现代 Fetch API

告别回调地狱：深入理解 AJAX，从 XMLHttpRequest 到现代 Fetch API

前言

在前端开发中，与后端进行数据交互是不可避免的。而 AJAX（Asynchronous JavaScript And XML）正是实现前后端异步通信的核心技术。从最初的 XMLHttpRequest 到如今更现代、更强大的 Fetch API，AJAX 技术一直在不断演进。本文将带你深入理解 AJAX 的工作原理，并详细对比 XMLHttpRequest 和 Fetch API 的异同，帮助你更好地在项目中选择和使用它们。

什么是 AJAX？

AJAX 全称 Asynchronous JavaScript And XML，即异步的 JavaScript 和 XML 技术。它不是一门新的编程语言，而是一种用于创建快速动态网页的技术。通过 AJAX，网页可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，使得 Web 应用更加流畅和响应迅速。

核心特点：

• 异步通信： 客户端与服务器之间的数据交换在后台进行，不会阻塞用户界面的操作。
• 局部更新： 只更新网页中需要改变的部分，而不是整个页面刷新。
• 提升用户体验： 减少页面加载时间，提供更流畅的交互。

XMLHttpRequest：AJAX 的基石

XMLHttpRequest (XHR) 是 AJAX 技术的基石，它是一个内置的浏览器对象，允许 JavaScript 发出 HTTP 请求到服务器并接收响应。尽管名字中带有 "XML"，但它实际上可以处理各种类型的数据，包括 JSON、HTML 和纯文本。

基本用法

使用 XMLHttpRequest 发送一个 GET 请求的基本步骤如下：

1. 创建 XMLHttpRequest 对象：

    const xhr = new XMLHttpRequest();

2. 配置请求： 使用 open() 方法指定请求方法、URL 和是否异步。

    xhr.open('GET', '/api/data', true); // true 表示异步请求

3. 设置回调函数： 监听 onreadystatechange 事件，处理请求状态的变化。

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // 请求已完成，且响应已就绪
            if (xhr.status >= 200 && xhr.status < 300) { // 状态码表示成功
                console.log('请求成功:', xhr.responseText);
            } else {
                console.error('请求失败:', xhr.status);
            }
        }
    };

   readyState 的值：

   • 0: UNSENT (未初始化)
   • 1: OPENED (已打开)
   • 2: HEADERS_RECEIVED (已发送)
   • 3: LOADING (正在下载)
   • 4: DONE (已完成)

4. 发送请求： 使用 send() 方法发送请求。对于 GET 请求，参数为 null。

    xhr.send(null);

处理 POST 请求

对于 POST 请求，你需要设置请求头 Content-Type 并将数据作为 send() 方法的参数：

 const xhr = new XMLHttpRequest();
 xhr.open('POST', '/api/submit', true);
 xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
 xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
         console.log('数据提交成功:', xhr.responseText);
     }
 };
 xhr.send(JSON.stringify({ name: 'Alice', age: 30 })); // 发送 JSON 数据

XMLHttpRequest 的局限性

尽管 XMLHttpRequest 功能强大，但它也存在一些明显的局限性：

• 回调地狱： 复杂的异步操作容易导致多层嵌套的回调函数，代码难以阅读和维护。
• API 设计不友好： API 相对底层，使用起来不够简洁和直观。
• 不支持 Promise： 原生不支持 Promise，需要手动封装。
• 跨域问题： 默认不支持跨域请求，需要服务器端配合设置 CORS。

Fetch API：现代 Web 请求的新范式

Fetch API 是 XMLHttpRequest 的现代替代品，它提供了一个更强大、更灵活的方式来发起网络请求。Fetch API 基于 Promise，这使得处理异步操作变得更加优雅和简洁，有效解决了回调地狱的问题。

基本用法

使用 fetch() 发送一个 GET 请求非常简单：

 fetch('/api/data')
     .then(response => {
         if (!response.ok) { // 检查响应状态码
             throw new Error(`HTTP error! status: ${response.status}`);
         }
         return response.json(); // 解析 JSON 响应
     })
     .then(data => {
         console.log('请求成功:', data);
     })
     .catch(error => {
         console.error('请求失败:', error);
     });

处理 POST 请求

fetch() 发送 POST 请求时，可以通过第二个参数 options 来配置请求方法、请求头和请求体：

 fetch('/api/submit', {
     method: 'POST', // 请求方法
     headers: {
         'Content-Type': 'application/json' // 设置请求头
     },
     body: JSON.stringify({ name: 'Bob', age: 25 }) // 请求体
 })
     .then(response => response.json())
     .then(data => {
         console.log('数据提交成功:', data);
     })
     .catch(error => {
         console.error('请求失败:', error);
     });

Fetch API 的优势

• 基于 Promise： 链式调用 .then() 和 .catch()，有效避免回调地狱，代码更易读。
• 更简洁的 API： 设计更符合现代 JavaScript 习惯，使用起来更直观。
• 支持 Stream： 可以处理流式数据，对于大文件下载等场景更高效。
• 默认支持跨域： 默认遵循 CORS 策略，但需要服务器端正确配置。

Fetch API 的注意事项

• fetch() 不会拒绝 HTTP 错误： 即使服务器返回 404 或 500 这样的 HTTP 错误状态码，fetch() 也不会进入 .catch() 块。只有当网络故障或请求被阻止时，才会触发 catch。你需要手动检查 response.ok 或 response.status 来判断请求是否成功。
• 不支持请求中断： 原生不支持请求中断（如 abort()），需要结合 AbortController 来实现。

XMLHttpRequest 与 Fetch API 对比

特性	XMLHttpRequest	Fetch API
API 设计	基于事件回调，相对底层和繁琐	基于 Promise，更现代、简洁和易用
异步处理	容易导致回调地狱	通过 Promise 链式调用，避免回调地狱
错误处理	通过 status 和 readyState 判断，相对复杂	通过 response.ok 和 response.status 判断，网络错误才进入 catch
请求中断	支持 abort() 方法	原生不支持，需结合 AbortController
数据流	不支持	支持 Stream，处理大文件更高效
跨域	默认不支持，需服务器端设置 CORS	默认遵循 CORS 策略，需要服务器端正确配置
兼容性	兼容性好，支持所有主流浏览器	现代浏览器支持，IE 等旧浏览器不支持

总结与选择

XMLHttpRequest 作为 AJAX 的先驱，在很长一段时间内都是前端进行数据请求的主要方式。它兼容性好，功能完善，但在处理复杂异步逻辑时容易陷入回调地狱。而 Fetch API 作为 XMLHttpRequest 的现代替代品，凭借其基于 Promise 的设计和更简洁的 API，成为了现代 Web 开发的首选。

如何选择？

• 新项目或现代浏览器环境： 优先选择 Fetch API，它能让你的代码更简洁、更易维护。
• 需要兼容旧浏览器（如 IE）： 仍然需要考虑使用 XMLHttpRequest 或引入 Polyfill。
• 需要请求中断功能： XMLHttpRequest 原生支持，Fetch API 需要 AbortController。

无论选择哪种方式，理解它们的工作原理和适用场景都至关重要。希望本文能帮助你更好地掌握 AJAX 技术，在前端开发的道路上更进一步！