JavaScript 发起 HTTP 请求：从 AJAX 到 Fetch API

在现代 Web 开发中，使用 JavaScript 发起 HTTP 请求获取数据是一项基本技能。本文将介绍两种常用的方法：传统的 AJAX 和更现代的 Fetch API，帮助你轻松掌握数据交互。

1. 使用 AJAX

AJAX (Asynchronous JavaScript and XML) 允许网页在不刷新整个页面的情况下，异步地向服务器发送请求并更新部分内容。

以下是使用 AJAX 发送 GET 请求的示例：

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

// 设置请求方法和 URL
xhr.open('GET', 'http://example.com/api/data', true);

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

// 监听请求状态的改变
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理返回的数据
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

2. 使用 Fetch API

Fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式，它返回一个 Promise 对象，可以使用链式调用处理响应和错误。

以下是使用 Fetch API 发送 GET 请求的示例：

fetch('http://example.com/api/data')
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('请求失败');
    }
  })
  .then(function(data) {
    // 处理返回的数据
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });

注意

以上示例中的 URL 仅供参考，你需要将其替换为你实际请求的 URL。
你可以根据需要添加请求头、请求体、处理不同类型的错误等。
建议优先使用 Fetch API，因为它更简洁易用，并且更符合现代 JavaScript 的编程风格。

JavaScript 发起 HTTP 请求：从 AJAX 到 Fetch API