JavaScript 发起 HTTP 请求教程：Fetch 和 XMLHttpRequest

JavaScript 如何发送 HTTP 请求？

想用 JavaScript 发送 HTTP 请求？你有两个强大的工具可以选择：内置的 fetch 函数和 XMLHttpRequest 对象。以下是如何使用这两种方法的示例代码：

1. 使用 fetch 函数

fetch 函数提供了一种简洁现代的方式来发送 HTTP 请求。 javascriptfetch(url, { method: 'POST', // 请求方法，例如：'GET', 'PUT', 'DELETE' 等 headers: { 'Content-Type': 'application/json' // 设置请求头 }, body: JSON.stringify(data) // 请求体数据}).then(response => response.json()) // 处理响应数据.then(data => { console.log(data); // 输出响应数据}).catch(error => { console.error('Error:', error); // 处理错误});

代码解释：

• 将 url 替换为你的目标 URL，将 data 替换为要发送的数据。* method 属性指定 HTTP 方法（例如 'GET', 'POST', 'PUT', 'DELETE' 等）。* headers 属性设置请求头，例如 Content-Type。* body 属性包含要发送的数据，对于 JSON 数据，使用 JSON.stringify() 进行序列化。* .then() 方法用于处理响应。* .catch() 方法用于捕获和处理错误。

2. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是一种较旧但功能强大的发送 HTTP 请求的方式。javascriptvar xhr = new XMLHttpRequest();xhr.open('POST', url, true); // 请求方法和 URLxhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); // 解析响应数据 console.log(response); }};xhr.onerror = function () { console.error('Error:', xhr.statusText); // 处理错误};xhr.send(JSON.stringify(data)); // 发送请求体数据

代码解释：

• 创建一个 XMLHttpRequest 对象。* 使用 open() 方法设置请求方法和 URL。* 使用 setRequestHeader() 方法设置请求头。* onreadystatechange 事件处理程序在请求状态发生变化时触发。* 检查 readyState 是否为 4（请求完成）以及 status 是否为 200（请求成功）。* 使用 JSON.parse() 解析响应数据。* onerror 事件处理程序用于捕获错误。

请记住:

• 将 url 替换为你的目标 URL，并将 data 替换为要发送的数据。* 根据需要调整请求方法、请求头和数据类型。

希望这些示例能帮助你使用 JavaScript 发送 HTTP 请求！