在现代 Web 应用程序中，JSON 是一种广泛使用的数据格式。在前端开发过程中，我们经常需要通过 URL 向后端服务器请求 JSON 数据，并将其渲染到页面上。本文将介绍如何通过 JavaScript 发送 JSON 请求。
XMLHttpRequest 对象
XMLHttpRequest 是一种浏览器内置的对象，可以用于发送 HTTP 请求和接收服务器响应。它是实现 AJAX 的基础。在发送 JSON 请求时，我们可以设置如下属性：
onreadystatechange: 当 readyState 属性改变时，该方法被调用。open(method, url, async): 指定请求的方法、URL 和是否异步处理请求。setRequestHeader(header, value): 设置请求头信息。send(data): 发送请求并且可选地传递数据。
以下是一个简单的示例，演示如何使用 XMLHttpRequest 发送 JSON 请求：
-- -------------------- ---- -------
--- --- - --- -----------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
--- ---- - -----------------------------
-- -------
-
--
--------------- ------------------------------------ ------
-----------在这个示例中，我们向 https://example.com/api/data.json 发送了一个 GET 请求，并在 readyState 改变时检查状态码。如果状态码为 200，则表示请求成功，我们将响应文本解析为 JSON 格式的数据，并在回调函数中对数据进行处理。
fetch API
fetch 是一种比 XMLHttpRequest 更现代化的网络请求 API，它使用 Promise 风格的语法并且默认支持 JSON 格式。以下是一个示例：
fetch('https://example.com/api/data.json')
.then(response => response.json())
.then(data => {
// 处理返回的数据
})
.catch(error => console.error(error));在这个示例中，我们使用 fetch 方法发送 GET 请求，并在成功响应后解析响应 JSON 数据。如果出现错误，则通过 catch 方法处理错误信息。
axios 库
axios 是一个流行的 JavaScript HTTP 客户端库，提供了更方便的 API 和更好的错误处理机制。以下是一个示例：
axios.get('https://example.com/api/data.json')
.then(response => {
var data = response.data;
// 处理返回的数据
})
.catch(error => console.error(error));在这个示例中，我们使用 axios 库发送 GET 请求，并在成功响应后从 response 对象的 data 属性读取响应 JSON 数据。如果出现错误，则通过 catch 方法处理错误信息。
结论
在本文中，我们介绍了三种发送 JSON 请求的方法：XMLHttpRequest、fetch 和 axios。无论您选择哪种方法，都需要确保请求 URL 的正确性和安全性，并且处理返回的 JSON 数据以及可能发生的错误。通过这篇文章，您可以学习如何使用这些工具来发送 JSON 请求，并将数据渲染到您的 Web 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30355