Javascript发送HTTP请求指南: XMLHttpRequest和Fetch API详解

在Javascript中，发送HTTP请求是Web开发中常见的任务。我们可以使用内置的XMLHttpRequest对象或者更方便的fetch函数来实现。

使用XMLHttpRequest对象

以下是使用XMLHttpRequest对象的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('请求失败: ' + xhr.status);
    }
  }
};
xhr.send();

这段代码将发送一个GET请求到'http://example.com/api'。如果请求成功，它将打印响应数据；如果请求失败，它将打印错误信息。

使用fetch函数

fetch函数提供了一种更简洁、更现代的方式来发送HTTP请求。以下是使用fetch函数的示例代码：

fetch('http://example.com/api')
  .then(function(response) {
    if (response.ok) {
      return response.text();
    } else {
      throw new Error('请求失败: ' + response.status);
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

这段代码与前面的XMLHttpRequest示例功能相同，但代码更易读和维护。

自定义请求

在实际应用中，你可以根据需要设置请求方法（GET、POST等）、请求头、请求体等。上述示例代码只是基本的用法，你可以根据具体情况进行调整。

例如，要发送POST请求，你可以修改xhr.open()方法的第一个参数为'POST'，并设置请求体。

希望这份指南能帮助你更好地理解如何在Javascript中发送HTTP请求！