JavaScript 发送 HTTP 请求：XMLHttpRequest 和 Fetch API 示例

使用 JavaScript 发出 HTTP 请求可以使用内置的 XMLHttpRequest 对象或者第三方库如 axios、fetch 等。下面是使用 XMLHttpRequest 的示例：

// 创建一个新的 HTTP 请求
var xhr = new XMLHttpRequest();

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

// 添加请求头（可选）
xhr.setRequestHeader('Content-Type', 'application/json');

// 设置请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，处理返回的数据
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  } else {
    // 请求失败
    console.error('请求失败。状态码：' + xhr.status);
  }
};

// 设置请求错误时的回调函数（可选）
xhr.onerror = function() {
  console.error('请求出错。');
};

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

这是一个简单的 GET 请求示例，你可以根据需要设置请求的方法（GET、POST 等）、URL、请求头、请求体等。

Fetch API

Fetch API 是一种更现代化的方式来发出 HTTP 请求，它提供了一个更简洁的语法和更强大的功能。以下是使用 Fetch API 发出 GET 请求的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('请求错误：', error));

Fetch API 可以更方便地处理错误和响应类型，并提供了一个更一致的 API。

选择合适的工具

选择使用 XMLHttpRequest 还是 Fetch API 取决于你的项目需求。对于简单的请求，XMLHttpRequest 可能更简单，而对于更复杂的请求，Fetch API 可能更方便。

其他选项

除了 XMLHttpRequest 和 Fetch API，还有很多其他的库可以用于发出 HTTP 请求，例如 axios 和 superagent。这些库通常提供更强大的功能和更便捷的 API。