JavaScript HTTP请求: 使用Fetch和XMLHttpRequest指南

JavaScript HTTP请求: 使用Fetch和XMLHttpRequest指南

在网页开发中，经常需要使用JavaScript发送HTTP请求与服务器进行交互，例如获取数据、提交表单或更新页面内容。本指南将介绍两种常用的发送HTTP请求的方法：fetch API 和 XMLHttpRequest 对象。

1. 使用Fetch API

fetch API是现代浏览器中用于发送HTTP请求的强大且易用的接口。它返回一个Promise对象，允许我们以更简洁的方式处理异步操作。

发送GET请求：javascriptfetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log(data); // 在控制台打印响应数据 }) .catch(error => { console.error('发生错误:', error); });

发送POST请求：javascriptfetch('https://api.example.com/endpoint', { 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); });

2. 使用XMLHttpRequest 对象

XMLHttpRequest 对象是较早出现的发送HTTP请求的API，在所有浏览器中都支持。

发送GET请求：javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); console.log(data); // 在控制台打印响应数据 }};xhr.send();

发送POST请求：javascriptvar xhr = new XMLHttpRequest();xhr.open('POST', 'https://api.example.com/endpoint', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); console.log(data); // 在控制台打印响应数据 }};xhr.send(JSON.stringify({ key: 'value' }));

总结

以上示例演示了如何使用 fetch 和 XMLHttpRequest 发送基本的GET和POST请求。根据您的需求，您可能还需要处理不同的HTTP方法、头部、身份验证等。

希望本指南能帮助您更好地理解如何在JavaScript中发送HTTP请求!