JavaScript发送HTTP请求: XMLHttpRequest和Fetch API实战指南

JavaScript发送HTTP请求: XMLHttpRequest和Fetch API实战指南

在Web开发中，我们经常需要使用JavaScript发送HTTP请求与服务器进行数据交互。本文将介绍两种常用的发送HTTP请求的方法：传统的XMLHttpRequest对象和现代的Fetch API，并提供清晰易懂的代码示例。

1. 使用XMLHttpRequest发送HTTP请求

XMLHttpRequest对象是AJAX技术的核心，允许JavaScript在不刷新页面的情况下与服务器进行异步通信。以下是使用XMLHttpRequest发送GET请求的步骤：javascript// 1. 创建XMLHttpRequest对象var xhr = new XMLHttpRequest();

// 2. 设置请求方法、URL和异步标志xhr.open('GET', 'https://api.example.com/data', true);

// 3. 设置请求头 (可选)xhr.setRequestHeader('Content-Type', 'application/json');

// 4. 监听请求状态改变事件xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功 var response = JSON.parse(xhr.responseText); console.log(response); }};

// 5. 发送请求xhr.send();

代码解析:

1. 首先，我们使用new XMLHttpRequest()创建一个新的XMLHttpRequest对象。2. 使用xhr.open()方法初始化请求，指定请求方法('GET'), URL和异步标志(true)。3. 可以使用setRequestHeader()方法设置请求头，例如设置Content-Type为'application/json'。4. 监听onreadystatechange事件，并在回调函数中检查readyState和status属性，判断请求是否成功完成。5. 最后，调用xhr.send()方法发送请求。

2. 使用Fetch API发送HTTP请求

Fetch API是更现代的发送HTTP请求的方式，它使用Promise提供更简洁的语法和更强大的功能。

以下是使用Fetch API发送GET请求的示例：javascript// 发起GET请求fetch('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); });

代码解析:

1. 使用fetch()函数发起GET请求，传入目标URL。2. fetch()函数返回一个Promise对象，可以使用.then()方法处理响应。3. 在第一个.then()方法中，检查response.ok属性是否为true，判断请求是否成功。4. 如果请求成功，调用response.json()方法解析JSON响应数据。5. 第二个.then()方法接收解析后的数据，可以进行后续处理。6. 使用.catch()方法捕获并处理请求过程中出现的错误。

发送POST请求:

使用XMLHttpRequest或Fetch API发送POST请求，只需修改请求方法和请求体即可。例如，使用Fetch API发送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));

总结

本文介绍了使用JavaScript发送HTTP请求的两种常用方法：XMLHttpRequest和Fetch API。Fetch API凭借其简洁的语法和Promise的优势，正逐渐成为主流选择。希望本文能帮助你更好地理解和使用JavaScript进行网络请求！