JavaScript 发出 HTTP 请求 - XMLHttpRequest 和 Fetch API 教程

如何用 JavaScript 发出 HTTP 请求？

在网页开发中，经常需要使用 JavaScript 向服务器发送请求并获取数据。JavaScript 提供了两种主要的 API 来实现这一目标：传统的 XMLHttpRequest 对象和更现代的 Fetch API。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 应用的基础，允许你发送异步 HTTP 请求。

**示例：**javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { const response = JSON.parse(xhr.responseText); console.log(response); }};xhr.send();

解释：

1. 创建一个新的 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，指定请求方法 (GET)、请求 URL 和是否异步 (true)。3. 设置 onreadystatechange 事件处理程序，该程序在请求状态发生变化时触发。4. 检查 readyState 属性是否为 4（请求完成）以及 status 属性是否为 200（请求成功）。5. 如果请求成功，使用 JSON.parse() 方法解析 JSON 格式的响应。6. 使用 send() 方法发送请求。

使用 fetch API

fetch API 提供了一种更简洁、更易于使用的发送 HTTP 请求的方式，并返回一个 Promise 对象。

**示例：**javascriptfetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

解释：

1. 调用 fetch() 函数，传入请求 URL。2. 使用 then() 方法处理 Promise 的成功状态，并使用 response.json() 方法解析 JSON 格式的响应。3. 再次使用 then() 方法获取解析后的数据。4. 使用 catch() 方法处理 Promise 的错误状态。

自定义请求

以上示例展示了基本的 GET 请求，你可以根据需要修改请求方法、添加请求头、传递请求体等。

**例如，发送 POST 请求：**javascriptfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

总结:

无论是使用 XMLHttpRequest 还是 fetch API，你都可以轻松地使用 JavaScript 发出 HTTP 请求。 fetch API 提供了更现代、更简洁的语法，建议在项目中优先使用。