AJAX XMLHttp

发起 HTTP 请求：Fetch API 和 XMLHttpRequest

为了与服务器异步交换数据，JavaScript 需要一种机制来发送 HTTP 请求并接收响应。现代标准是 Fetch API，而较旧的 XMLHttpRequest 对象仍可用于遗留目的。

Fetch API（推荐）

Fetch API 提供了一个现代、强大且灵活的接口来发起 HTTP 请求。它是基于 Promise 的，使异步代码更容易管理。

GET 请求的基本语法：

fetch('/api/data') // URL of the resource
  .then(response => {
    // Check if the request was successful
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // Or response.text(), etc.
  })
  .then(data => {
    console.log(data); // Process the data
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

Fetch 的主要优势：

基于 Promise：与 async/await 和现代 JavaScript 模式无缝集成。
更灵活：对请求和响应的细节（例如 headers、缓存、模式等）提供更精细的控制。
更简洁的 API：通常认为对于常见任务更容易使用。
标准化：所有当前浏览器都支持的现代标准。

在本教程中，我们将主要使用 Fetch API。

XMLHttpRequest 对象（遗留）

XMLHttpRequest (XHR) 是用于发起异步请求的较旧机制。尽管现代浏览器完全支持它，但它通常更冗长，并且使用基于事件的模型（onreadystatechange）而不是 Promises。

创建 XMLHttpRequest 对象：

// All modern browsers (Chrome, Firefox, Edge, Safari, Opera, IE7+)
const xhr = new XMLHttpRequest();
console.log('XMLHttpRequest object created.');

// --- Code for very old IE versions (IE5, IE6) is no longer needed ---
// The ActiveXObject approach is obsolete and should not be used.

用于检查 window.XMLHttpRequest 与 ActiveXObject 的复杂条件逻辑对于任何合理的现代 Web 开发而言都不再需要。所有相关浏览器都直接支持 new XMLHttpRequest()。

使用 XHR 包括：

创建实例：const xhr = new XMLHttpRequest();
打开请求：xhr.open('GET', '/api/data', true);（方法、URL、异步标志 - true 是必需的）
设置事件监听器：主要是 onreadystatechange 用于跟踪进度和处理完成，也可以选择 onload、onerror、onprogress。
发送请求：xhr.send();

使用 XHR 的示例（基本 GET）：

// --- 遗留 XHR 示例 ---
const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) { // readyState 4 表示请求完成
    if (xhr.status === 200) { // status 200 表示 'OK'
      console.log('XHR Response Text:', xhr.responseText);
      // 处理 responseText (例如，如果它是 JSON 则解析)
      try {
         const data = JSON.parse(xhr.responseText);
         console.log('Parsed XHR JSON:', data);
      } catch(e) {
         console.error('Error parsing JSON:', e);
      }
    } else {
      console.error('XHR Request failed with status:', xhr.status);
    }
  }
};

xhr.onerror = function() {
  console.error('XHR Network error occurred');
};

xhr.open('GET', '/api/data', true);
xhr.send(); // 对于 GET 请求，send() 不带参数或为 null

虽然您可能会在旧代码或特定场景（如监控上传进度，Fetch 处理方式不同）中遇到 XHR，但 Fetch 是新开发的推荐方法。

接下来的章节将重点介绍如何使用 Fetch API 发送请求和处理响应。