随着前端技术的不断发展，越来越多的网站开始采用 Ajax 技术来实现网页的动态更新。其中，在获取数据方面，Ajax 通过取回一个格式为 JSON（JavaScript Object Notation）的数据对象再通过 JavaScript 解析来实现数据的显示和更新。下面我们就来介绍一下如何使用 Ajax 取回数据，并将其显示在页面上。
/* Ajax 取回 JSON 数据 */
function getJSON(url,callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
callback(JSON.parse(xhr.responseText));
}
};
xhr.open("GET",url,true);
xhr.send();
}
/* 获取 JSON 数据并在页面中显示 */
getJSON("data.json",function(data) {
var output = "";
for(var i = 0; i 
" + data[i].name + "," + data[i].age + "
";
}
document.getElementById("results").innerHTML = output;
});
以上是通过 JavaScript 编写的一个 Ajax 请求的示例。首先，我们创建一个名为 getJSON 的函数，该函数接受两个参数：一个 URL 和一个回调函数。其中，回调函数会在 Ajax 请求返回数据后被触发，它的参数为 JSON 数据。
在函数中，我们创建了一个 XMLHttpRequest 对象，并利用其 onreadystatechange 事件来监测 Ajax 请求的状态。当状态为 4（已完成）并且状态码为 200（成功）时，就调用回调函数来传递解析后的 JSON 数据。
最后，我们使用 getJSON 函数来取回命名为 data.json 的 JSON 数据，并通过 for 循环来遍历每一条数据，并将其添加到 output 变量中。最后，我们用 innerHTML 将结果显示到 id 为 results 的 HTML 元素中。
总的来说，Ajax 技术已成为现代 Web 开发中不可或缺的部分，而获取 JSON 数据更是成为了一种非常普遍的方式。我们需要了解 Ajax 请求的基本原理和具体实现，才能更高效地处理 Web 数据，并提高 Web 应用程序的用户体验。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
