JavaScript 发送 HTTP 请求终极指南

想要在你的网页上与服务器交互，获取或发送数据？掌握如何使用 JavaScript 发送 HTTP 请求是关键！本文将为你介绍两种常用方法：XMLHttpRequest 和 Fetch API，并提供清晰易懂的示例和最佳实践，助你轻松上手。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 应用的基石，允许你以 JavaScript 发送 HTTP 请求，并在无需刷新页面的情况下更新网页内容。以下是一个基本示例：javascriptfunction makeHttpRequest(url, method, callback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr.responseText); } }; xhr.send();}

// 示例调用makeHttpRequest('https://api.example.com/data', 'GET', function (response) { console.log(response);});

这段代码定义了一个名为 makeHttpRequest 的函数，它接受三个参数：

url: 请求的目标 URL* method: HTTP 请求方法 (例如 'GET', 'POST')* callback: 当请求完成时执行的回调函数

函数内部创建了一个 XMLHttpRequest 对象，并使用 open() 方法初始化请求。onreadystatechange 事件监听器用于跟踪请求状态，并在请求成功完成 (状态码 200) 时调用回调函数处理响应数据。

2. 使用 Fetch API

Fetch API 提供了一种更简洁、更现代的方式来发送 HTTP 请求。它返回一个 Promise 对象，让你可以使用链式调用处理响应。以下是一个使用 fetch 的示例：javascriptfetch('https://api.example.com/data') .then(function (response) { return response.text(); }) .then(function (data) { console.log(data); }) .catch(function (error) { console.log(error); });

这段代码使用 fetch() 函数发送 GET 请求，并使用 .then() 方法处理响应。response.text() 方法将响应体解析为文本，然后将其传递给下一个 .then() 方法进行处理。.catch() 方法用于捕获请求过程中发生的任何错误。

总结

本文介绍了两种使用 JavaScript 发送 HTTP 请求的方法：XMLHttpRequest 和 Fetch API。XMLHttpRequest 是传统的 AJAX 技术核心，功能强大但使用起来相对繁琐。Fetch API 提供了更简洁、更现代的 API，并支持 Promise，更易于编写和维护异步代码。

选择哪种方法取决于你的项目需求和个人偏好。无论你选择哪种方式，掌握使用 JavaScript 发送 HTTP 请求都是前端开发的必备技能！