JavaScript 发出 HTTP 请求：XMLHttpRequest 与 Fetch API

使用 JavaScript 发送 HTTP 请求是网页开发的常见任务，它允许你与服务器交互并动态更新网页内容。本文将介绍两种常用的方法：XMLHttpRequest 对象和更现代的 fetch API。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象是传统的发送 HTTP 请求的方式。以下代码演示了如何使用它创建一个请求并处理响应：

function createHttpRequest(method, url, async) {
  var httpRequest = new XMLHttpRequest();
  httpRequest.open(method, url, async);
  return httpRequest;
}

function sendHttpRequest(request) {
  return new Promise(function(resolve, reject) {
    request.onload = function() {
      if (request.status >= 200 && request.status < 300) {
        resolve(request.response);
      } else {
        reject(Error(request.statusText));
      }
    };
    request.onerror = function() {
      reject(Error('Network Error'));
    };
    request.send();
  });
}

// 发送 GET 请求的示例
var url = 'http://example.com/api';
var request = createHttpRequest('GET', url, true);
sendHttpRequest(request)
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.error(error);
  });

使用 fetch API

fetch API 提供了一种更简洁、更现代的发送 HTTP 请求的方式。以下代码演示了如何使用 fetch 发送 GET 请求：

// 发送 GET 请求的示例
var url = 'http://example.com/api';
fetch(url)
  .then(function(response) {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

总结

以上示例展示了如何使用 JavaScript 发出 GET 请求。你可以根据需要调整代码中的方法和参数来发送其他类型的请求，例如 POST、PUT 等。 fetch API 通常是更推荐的选择，因为它提供了更简洁易懂的语法和更强大的功能。