在前端开发中， 与服务器进行数据交互是不可避免的需求，而 JavaScript 提供了多种方式来实现 HTTP 请求。本篇博客将介绍两种常见的 HTTP 请求方式：XMLHttpRequest 和 Fetch API，以便更好地理解它们的使用场景和特点。

1. XMLHttpRequest

发送GET请求

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log("Response:", xhr.responseText);}
};
xhr.send();

在上述例子中，通过创建 XMLHttpRequest 对象，使用 open 方法配置请求方法、URL 和是否异步。然后通过 onreadystatechange 监听状态变化，当状态为 4（表示完成）且状态码为 200 时，表示请求成功，可以获取响应数据。

发送POST请求

let xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/post", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log("Response:", xhr.responseText);}
};
let postData = { key: "value" };
xhr.send(JSON.stringify(postData));

在上述例子中，通过将请求方法改为 POST，并使用 setRequestHeader 设置请求头，然后通过 send 方法发送 JSON 格式的数据。

2. Fetch API

发送GET请求

fetch("https://api.example.com/data").then(response => {if (!response.ok) {throw new Error("Network response was not ok");}return response.json();}).then(data => {console.log("Data:", data);}).catch(error => {console.error("Fetch error:", error);});

在上述例子中，使用 fetch 函数发起 GET 请求，通过 .then() 方法处理响应，并使用 .catch() 方法捕获错误。

发送POST请求

fetch("https://api.example.com/post", {method: "POST",headers: {"Content-Type": "application/json"},body: JSON.stringify({ key: "value" })
}).then(response => {if (!response.ok) {throw new Error("Network response was not ok");}return response.json();}).then(data => {console.log("Data:", data);}).catch(error => {console.error("Fetch error:", error);});

在上述例子中，使用 fetch 函数发起 POST 请求，通过配置 method、headers 和 body选项来发送 JSON 格式的数据。

3. 对比与总结

XMLHttpRequest

• 老式API：XMLHttpRequest 是较老的 API，虽然在现代浏览器中仍然可用，但 Fetch API 更加现代且易用
• 繁琐的用法：相对于 Fetch API，XMLHttpRequest 的用法相对繁琐，需要多个步骤配置和处理

Fetch API

• 现代API：Fetch API 是一个现代的 API，提供了更简单和灵活的方式来处理 HTTP 请求
• Promise基础：Fetch API 基于 Promise，使得异步代码更易读和管理
• 更直观的API设计：Fetch API 的设计更加直观，支持链式调用，简化了 HTTP 请求的写法

4. 总结

根据项目的需求和个人喜好，选择合适的 HTTP 请求方式是很重要的。XMLHttpRequest 适用于更古老的项目或需要与较老系统交互的场景，而 Fetch API 更适合现代化的项目，提供了更直观和简单的 API。希望通过本篇博客，你对 JavaScript 中使用 XMLHttpRequest 和 Fetch API 发送 HTTP 请求有了更深入的了解。