AJAX、XHR、Axios、Fetch API

摘要：

• AJAX 是一种技术概念，用于实现网页的异步交互。XHR 是实现 AJAX 功能的具体工具之一。
• Axios库是对XHR的封装，Fetch API 是 XHR 的现代替代方案。

AJAX（Asynchronous JavaScript and XML）和 XHR（XMLHttpRequest）之间有着紧密的关系，但它们并不是完全相同的概念。以下是它们之间的关系和区别：

• AJAX：

  • 全称：Asynchronous JavaScript and XML（异步 JavaScript 和 XML）。
  • 定义：AJAX 是一种用于创建动态网页的技术，允许网页在不重新加载整个页面的情况下，与服务器进行异步交互，从而更新部分页面内容。
  • 核心思想：通过 JavaScript 在后台与服务器进行数据交换，而不需要重新加载整个页面。

• XHR：

  • 全称：XMLHttpRequest。
  • 定义：XHR 是一个 JavaScript 对象，用于与服务器进行异步通信。它是实现 AJAX 功能的核心工具之一。
  • 用途：通过 XHR，JavaScript 可以在后台向服务器发送请求并接收响应，而不会影响页面的显示。

• XHR 是实现 AJAX 的核心工具：

  • AJAX 是一种技术概念，而 XHR 是实现这种技术的具体工具之一。
  • 通过 XHR，可以实现 AJAX 的异步交互功能。

// 创建一个 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求完成的处理函数
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功，处理返回的数据
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    // 请求失败
    console.error('Request failed with status:', xhr.status);
  }
};

// 设置请求失败的处理函数
xhr.onerror = function () {
  console.error('Request failed');
};

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

现代替代方案#

• axios：
  • 基于 XMLHttpRequest。
  • 提供了丰富的功能，如拦截器、超时处理、自动 JSON 解析等。
  • 是一个第三方库，需要单独引入。

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

• fetch：
  • 是浏览器的原生 API，不是基于 XMLHttpRequest。
  • 提供了简洁的 API，支持现代的异步编程模式。
  • 不需要额外引入库，但功能相对简单。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));