JavaScript发送HTTP请求: 使用XMLHttpRequest和Fetch API教程

JavaScript发送HTTP请求: 使用XMLHttpRequest和Fetch API教程

在Web开发中，经常需要使用JavaScript发送HTTP请求与服务器交互，获取或发送数据。本文将介绍两种常用的方法：传统的XMLHttpRequest对象和现代化的Fetch API。

使用XMLHttpRequest发送HTTP请求

XMLHttpRequest对象是浏览器提供的用于发送HTTP请求的原生API。以下代码演示了如何使用XMLHttpRequest发送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 response = JSON.parse(xhr.responseText); console.log(response); }};xhr.send();

代码解释：

1. 创建XMLHttpRequest对象实例。2. 使用open()方法初始化请求，指定请求方法（GET）、请求URL和是否异步（true）。3. 设置onreadystatechange事件处理函数，监听请求状态变化。4. 当请求完成且状态码为200时，解析响应数据并输出到控制台。5. 使用send()方法发送请求。

使用Fetch API发送HTTP请求

Fetch API是近年来出现的一种更简洁、更现代的发送HTTP请求的方式。它基于Promise，使用起来更加方便。以下代码演示了如何使用fetch函数发送GET请求：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('There has been a problem with your fetch operation: ', error.message); });

代码解释：

1. 调用fetch()函数，传入请求URL，返回一个Promise对象。2. 使用.then()方法处理成功响应，检查响应状态码是否为成功（response.ok）。3. 如果成功，解析响应数据为JSON格式。4. 使用第二个.then()方法处理解析后的数据，这里将其输出到控制台。5. 使用.catch()方法捕获请求过程中的错误，并输出错误信息。

总结

本文介绍了使用JavaScript发送HTTP请求的两种常用方法：XMLHttpRequest和Fetch API。XMLHttpRequest是传统的API，功能强大但使用起来较为繁琐。Fetch API更加现代简洁，基于Promise，更易于理解和使用。开发者可以根据实际需求选择合适的方法。