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

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

想要在你的网页上动态加载数据或与服务器交互吗？掌握使用JavaScript发送HTTP请求是关键！本文将为你详细介绍两种常用方法：传统的XMLHttpRequest对象和现代的Fetch API。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest对象允许你以JavaScript脚本的形式发送HTTP请求并处理响应，无需刷新整个页面。以下是发送GET请求并处理JSON格式响应的示例：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. 在事件处理函数中，检查readyState是否为4（请求完成）以及status是否为200（请求成功）。5. 如果请求成功，使用JSON.parse()方法将响应文本解析为JSON对象。6. 使用send()方法发送请求。

2. 使用 Fetch API

Fetch API提供了一种更简洁、更现代的发送HTTP请求的方式，它返回一个Promise对象，可以方便地进行链式调用。javascriptfetch('https://api.example.com/data') .then(function (response) { return response.json(); }) .then(function (data) { console.log(data); }) .catch(function (error) { console.log(error); });

代码解析:

1. 使用fetch()函数发送请求，传入URL作为参数。2. 使用.then()方法处理响应。第一个.then()处理原始响应，这里我们使用response.json()方法将其解析为JSON对象。3. 第二个.then()接收解析后的JSON数据，并可以进行后续操作。4. 使用.catch()方法捕获请求过程中可能出现的错误。

总结

本文介绍了使用JavaScript发送HTTP请求的两种常用方法：XMLHttpRequest和Fetch API。 Fetch API以其简洁易用和基于Promise的异步处理方式，正逐渐成为主流选择。

无论选择哪种方法，掌握发送HTTP请求都是进行Web开发、构建动态交互式网页的必备技能。