JavaScript HTTP 请求：XMLHttpRequest 和 fetch 方法详解

使用 JavaScript 发出 HTTP 请求的两种常见方法是使用内置的 XMLHttpRequest 对象或 fetch 函数。以下是两种方法的示例：

使用 XMLHttpRequest 对象：

function sendHttpRequest(url, method, data, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status >= 200 && xhr.status < 400) {
        callback(xhr.responseText);
      } else {
        console.error('HTTP request failed with status ' + xhr.status);
      }
    }
  };

  xhr.send(data);
}

// 示例用法：
const apiUrl = 'https://api.example.com';
const requestData = JSON.stringify({ key: 'value' });

sendHttpRequest(apiUrl, 'POST', requestData, function(response) {
  console.log('Received response:', response);
});

使用 fetch 函数：

function sendHttpRequest(url, method, data, callback) {
  fetch(url, {
    method: method,
    body: data
  })
  .then(function(response) {
    if (response.ok) {
      return response.text();
    } else {
      throw new Error('HTTP request failed with status ' + response.status);
    }
  })
  .then(function(responseText) {
    callback(responseText);
  })
  .catch(function(error) {
    console.error(error);
  });
}

// 示例用法：
const apiUrl = 'https://api.example.com';
const requestData = JSON.stringify({ key: 'value' });

sendHttpRequest(apiUrl, 'POST', requestData, function(response) {
  console.log('Received response:', response);
});

这些示例使用 POST 方法发送数据，你可以根据需要进行调整。请确保替换 apiUrl 为你要请求的实际 API 地址，并根据 API 的要求设置适当的请求头和数据。