在前端开发中，我们经常需要从外部 URL 获取数据并将其显示在我们的网页上。JSON 是一种常见的格式用于传输和存储数据，它也很容易与 JavaScript 集成。在本篇文章中，我们将讨论如何使用 AJAX 从外部 URL 获取 JSON 数据，并将其作为纯文本显示在 div 中。
AJAX
AJAX 是一种通过 JavaScript 异步地发送 HTTP 请求的技术。它可以在不刷新整个页面的情况下更新部分页面内容，这使得它成为在 Web 应用程序中常用的技术。使用 AJAX 可以使我们在不影响用户体验的情况下获取和处理数据。
获取 JSON 数据
要获取 JSON 数据，我们需要创建一个 XMLHttpRequest 对象。XMLHttpRequest 对象允许我们发送 HTTP 请求，并在请求完成后接收响应。以下是一个简单的示例代码：
-- -------------------- ---- -------
----- ----- - --- -----------------
------------------------ - ---------- -
-- ---------------- -- - -- ----------- -- ---- -
----- ---- - ------------------------------
------------------
-
--
----------------- -------------------------------- ------
-------------在此代码中，我们首先创建了一个新的 XMLHttpRequest 对象，并定义了一个回调函数 onreadystatechange。该回调函数会在 readyState 发生改变时被调用，其中 readyState 表示请求的状态。当 readyState 为 4 时，请求已完成，并且我们可以根据状态码（status）来检查请求是否成功。如果状态码为 200，则表示请求成功。在这种情况下，我们使用 JSON.parse() 方法将响应文本解析为 JSON 格式，并输出到控制台。
将 JSON 数据显示为纯文本
要将 JSON 数据作为纯文本显示在 div 中，我们只需要将其转换为字符串并将其插入到 div 中即可。以下是一个简单示例代码：
-- -------------------- ---- -------
---- ----------------
--------
----- ----- - --- -----------------
------------------------ - ---------- -
-- ---------------- -- - -- ----------- -- ---- -
----- ---- - ------------------------------
----- ------- - --------------------------------
----------------- - ---------------------
-
--
----------------- -------------------------------- ------
-------------
---------在这个示例中，我们首先创建了一个空的 div，并给它一个 ID "json"。然后，我们使用 XMLHttpRequest 对象获取数据并解析它。最后，我们找到 ID 为 "json" 的 div，并使用 JSON.stringify() 方法将数据转换为字符串并将其设置为 div 的 innerText 属性。
总结
在本文中，我们讨论了如何使用 AJAX 从外部 URL 获取 JSON 数据，并将其作为纯文本显示在 div 中。我们学习了 XMLHttpRequest 对象的基础知识，并实现了一个简单的示例。希望这篇文章能够帮助你更好地理解 AJAX 和 JSON，并在实际开发中使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26617