JavaScript发送HTTP请求的几种方法

想知道JS如何发送HTTP请求吗？本文将深入探讨JS发送HTTP请求的两种主要方式：XMLHttpRequest (XHR) 和 fetch API。XHR作为一种传统的实现方式，拥有良好的兼容性，而fetch API则以其简洁的语法备受青睐。我们将详细介绍这两种方法的使用，包括如何发送GET和POST请求，如何处理请求过程中的错误，以及如何解决跨域请求(CORS)问题。此外，本文还将涵盖请求超时的处理，以及如何根据服务器返回的不同响应类型（JSON、文本、HTML等）进行相应的处理。通过本文，你将全面掌握JS发送HTTP请求的各种技巧，提升你的Web开发能力。

JS发送HTTP请求可通过XMLHttpRequest或fetch API实现，前者兼容性好，后者语法更简洁。

JS发送HTTP请求，核心在于使用XMLHttpRequest对象或者现代的fetch API。前者比较老，但兼容性好；后者更简洁，但可能需要polyfill。

解决方案：

使用XMLHttpRequest（XHR）：

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

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      callback(null, xhr.response);
    } else {
      callback(new Error(`Request failed with status ${xhr.status}`), null);
    }
  };

  xhr.onerror = function() {
    callback(new Error("Network error"), null);
  };

  if (data) {
    xhr.setRequestHeader('Content-Type', 'application/json'); // 假设发送JSON
    xhr.send(JSON.stringify(data));
  } else {
    xhr.send();
  }
}

// 示例：GET请求
sendHttpRequest('GET', 'https://api.example.com/data', null, function(err, data) {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

// 示例：POST请求
const postData = { key1: 'value1', key2: 'value2' };
sendHttpRequest('POST', 'https://api.example.com/submit', postData, function(err, data) {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

使用fetch API：

async function fetchData(url, options = {}) {
  try {
    const response = await fetch(url, options);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json(); // 或者 response.text()，根据返回类型
    return data;
  } catch (error) {
    console.error("Fetch error:", error);
    throw error; // 重新抛出，方便上层处理
  }
}

// 示例：GET请求
fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 示例：POST请求
const postData = { key1: 'value1', key2: 'value2' };
fetchData('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(postData)
})
  .then(data => console.log(data))
  .catch(error => console.error(error));

XHR的onload和onerror处理方式，以及fetch API的try...catch结构，都是为了处理请求过程中可能出现的错误，保证程序的健壮性。

如何处理跨域请求(CORS)？

跨域资源共享（CORS）是个浏览器安全策略，阻止从一个源（域、协议、端口）发起的HTTP请求访问另一个源的资源。 服务器需要在响应头中设置Access-Control-Allow-Origin。

• 服务器端配置： 这是最常见的解决方案。服务器应该设置正确的CORS头部。例如，允许所有域：Access-Control-Allow-Origin: *。 或者，更安全的方式是只允许特定的域：Access-Control-Allow-Origin: https://your-domain.com。 还可以设置Access-Control-Allow-Methods（允许的HTTP方法）和Access-Control-Allow-Headers（允许的请求头）。

• JSONP (仅限GET请求): JSONP利用