JavaScript发送HTTP请求教程：XMLHttpRequest和Fetch API详解

JavaScript发送HTTP请求：掌握XMLHttpRequest和Fetch API

想要在网页上与服务器进行数据交互，发送HTTP请求是必不可少的环节。JavaScript提供了两种常用的发送HTTP请求的方式：传统的XMLHttpRequest对象和现代的Fetch API。本文将分别介绍这两种方法，并提供示例代码，帮助你快速上手。

1. 使用XMLHttpRequest对象发送HTTP请求

XMLHttpRequest对象是AJAX技术的核心，允许JavaScript代码在不刷新页面的情况下与服务器进行异步通信。以下是如何使用XMLHttpRequest对象发送GET请求的示例：javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true); // 发起GET请求xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const response = xhr.responseText; console.log(response); // 在控制台打印响应内容 }};xhr.send();

代码解释：

1. new XMLHttpRequest(): 创建一个新的XMLHttpRequest对象。2. xhr.open('GET', 'https://api.example.com/data', true): 初始化请求，指定请求方法为'GET'，目标URL为'https://api.example.com/data'，第三个参数设置为true表示启用异步请求。3. xhr.onreadystatechange: 设置请求状态变化时的回调函数。4. xhr.readyState === 4 && xhr.status === 200: 判断请求是否成功完成。readyState值为4表示请求已完成，status值为200表示请求成功。5. xhr.responseText: 获取服务器返回的文本数据。6. xhr.send(): 发送请求。

2. 使用Fetch API发送HTTP请求

Fetch API是近年来兴起的一种更加简洁、现代的发送HTTP请求的方式。它基于Promise，提供了更易于使用的接口。以下是如何使用fetch函数发送GET请求的示例：javascriptfetch('https://api.example.com/data') // 发起GET请求 .then(response => response.text()) .then(data => console.log(data)); // 在控制台打印响应内容

代码解释：

1. fetch('https://api.example.com/data'): 发起GET请求，返回一个Promise对象。2. .then(response => response.text()): 当请求成功时，将响应对象转换为文本数据。3. .then(data => console.log(data)): 当文本数据转换完成后，将其打印到控制台。

总结

以上两种方法都可以用于发送GET请求，如果需要发送其他类型的请求（如POST），需要对代码进行一些修改。XMLHttpRequest对象功能强大，但使用起来相对繁琐；Fetch API更加简洁易用，更适合现代Web开发。 选择哪种方式取决于你的项目需求和个人偏好。