JavaScript 发出 HTTP 请求：fetch 和 XMLHttpRequest 详解

使用 JavaScript 发出 HTTP 请求可以使用内置的 fetch 函数或者 XMLHttpRequest 对象。

使用 fetch 函数

以下是使用 fetch 函数发送 GET 请求的示例：

fetch(url, {
  method: 'GET', // 或者 'POST', 'PUT', 'DELETE' 等
  headers: {
    'Content-Type': 'application/json', // 根据需要设置适当的content-type
  },
  // 可选的请求体，例如要发送的数据
  // body: JSON.stringify({ key: 'value' }),
})
  .then(response => response.json()) // 解析响应体为json格式
  .then(data => {
    // 在这里处理返回的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

这是一个基本的 GET 请求示例，你可以根据需要进行相应的修改。fetch 函数返回的是一个 Promise，可以使用 .then() 来处理成功的响应，.catch() 来处理错误。

使用 XMLHttpRequest 对象

以下是使用 XMLHttpRequest 对象发送 GET 请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Content-Type', 'application/json'); // 根据需要设置适当的content-type
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText); // 解析响应体为json格式
    // 在这里处理返回的数据
    console.log(response);
  } else if (xhr.readyState === 4 && xhr.status !== 200) {
    // 处理错误
    console.error('Error:', xhr.status);
  }
};
xhr.send();

这是一个基本的 GET 请求示例，你也可以根据需要进行相应的修改。XMLHttpRequest 对象提供了更多的灵活性和控制权，但使用起来相对复杂一些。

总结

fetch 函数和 XMLHttpRequest 对象都是发送 HTTP 请求的有效方法，你可以根据自己的需求选择合适的方法。fetch 函数更易于使用，而 XMLHttpRequest 对象提供了更多控制权。