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

想要在网页上与服务器交互，就需要使用 JavaScript 发起 HTTP 请求。本教程将介绍两种常用的方法：Fetch API 和 XMLHttpRequest，并提供示例代码和详细说明。

Fetch API

Fetch API 是现代 JavaScript 中发起 HTTP 请求的推荐方式，它提供了一种简洁易用的语法。

**GET 请求示例:**javascriptfetch('https://api.example.com/data', { method: 'GET', // 请求方法，例如：GET, POST, PUT, DELETE headers: { 'Content-Type': 'application/json' // 请求内容类型 // 可选：添加身份验证信息，例如 'Authorization': 'Bearer token' }}) .then(response => response.json()) // 解析响应数据为 JSON 格式 .then(data => { console.log(data); // 处理响应数据 }) .catch(error => { console.error('Error:', error); // 处理错误 });

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

XMLHttpRequest 对象

XMLHttpRequest 是传统的 JavaScript 发起 HTTP 请求的方法，它提供了更底层的控制能力。

**GET 请求示例:**javascriptvar request = new XMLHttpRequest();request.open('GET', 'https://api.example.com/data', true);request.setRequestHeader('Content-Type', 'application/json'); // 可选：添加身份验证信息，例如 request.setRequestHeader('Authorization', 'Bearer token')

request.onload = function() { if (request.status >= 200 && request.status < 400) { var data = JSON.parse(request.responseText); console.log(data); } else { console.error('Error:', request.statusText); }};

request.onerror = function() { console.error('Request failed'); };

request.send();

**POST 请求示例:**javascriptvar request = new XMLHttpRequest();request.open('POST', 'https://api.example.com/data', true);request.setRequestHeader('Content-Type', 'application/json'); request.onload = function() { // ... 处理响应 ...};request.onerror = function() { // ... 处理错误 ...};request.send(JSON.stringify({ key: 'value' }));

总结

本教程介绍了使用 Fetch API 和 XMLHttpRequest 发起 HTTP 请求的方法，并提供了 GET 和 POST 请求的示例代码。您可以根据自己的需求选择合适的方法，并根据 API 文档调整请求参数和数据格式。

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