JavaScript发送HTTP请求: XMLHttpRequest与Fetch API详解

JavaScript发送HTTP请求: XMLHttpRequest与Fetch API详解

想要使用JavaScript从服务器获取数据？你需要掌握发送HTTP请求的技巧。本文将介绍两种常用的方法：传统的XMLHttpRequest对象和现代的Fetch API，并提供清晰易懂的代码示例。

1. 使用XMLHttpRequest对象

XMLHttpRequest对象是AJAX技术的核心，允许你异步地发送HTTP请求并处理服务器响应。javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); console.log(response); }};xhr.send();

这段代码演示了发送一个GET请求获取https://api.example.com/data的数据，并将服务器返回的JSON数据解析后打印在控制台上。

2. 使用Fetch API

Fetch API 提供了更简洁、更现代的发送HTTP请求的方式，并基于Promise语法，使代码更易读和维护。javascriptfetch('https://api.example.com/data') .then(function (response) { if (response.ok) { return response.json(); } throw new Error('Network response was not ok.'); }) .then(function (data) { console.log(data); }) .catch(function (error) { console.log('Error:', error.message); });

这段代码使用fetch()函数发送GET请求，并使用Promise链式调用处理响应。response.json()方法将JSON数据解析为JavaScript对象。

总结

以上两种方法都能实现发送HTTP请求的目标，你可以根据项目需求和代码风格选择合适的方式。Fetch API 的代码更简洁易懂，而XMLHttpRequest提供了更细粒度的控制。