AJAX（Asynchronous JavaScript and XML）是一种用于创建快速、动态和交互式网页的技术。它通过在后台与服务器进行异步通信，从而使网页能够在不刷新整个页面的情况下更新特定区域的内容。AJAX 通常用于从服务器加载数据，其中 JSON（JavaScript Object Notation）是一种常见的数据格式。本文将介绍如何使用 AJAX 加载 JSON 数据，并通过具体的例子进行说明。

假设我们有一个网站，显示每个用户的个人资料。用户的个人资料数据存储在一个 JSON 文件中，如下所示：

{
"users": [
{
"name": "张三",
"age": 25,
"country": "中国"
},
{
"name": "John Doe",
"age": 30,
"country": "美国"
},
{
"name": "Marta Fernandez",
"age": 27,
"country": "西班牙"
}
]
}

我们可以使用 AJAX 加载这个 JSON 文件，并在网页上显示用户的个人资料。首先，我们需要创建一个 XMLHttpRequest 对象，然后使用其 open() 方法指定要加载的文件和 HTTP 请求的方法。接下来，我们需要设置一个回调函数，当请求完成时，该函数将被调用。在这个回调函数中，我们可以通过解析服务器返回的响应来获取 JSON 数据，并使用它更新网页上的内容。

var xhr = new XMLHttpRequest();
xhr.open("GET", "users.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var users = response.users;
// 更新网页上的内容
}
};
xhr.send();

使用上述代码，我们可以加载 JSON 文件并将其转换成 JavaScript 对象。然后，我们可以访问其中的数据，并将它们用于更新网页上的内容。例如，我们可以创建一个用户列表的 HTML 元素，并在加载 JSON 数据后，动态地将用户的名字和国家添加到列表中，如下所示：

<ul id="user-list"></ul>
// 在回调函数中更新网页上的内容
var userList = document.getElementById("user-list");
for (var i = 0; i< users.length; i++) {
var user = users[i];
var listItem = document.createElement("li");
listItem.innerHTML = user.name + " - " + user.country;
userList.appendChild(listItem);
}

通过上述代码，我们可以在页面上创建一个有序列表，并使用用户的名字和国家更新列表项。当 JSON 数据加载完成后，用户列表将自动更新，无需刷新整个页面。

总而言之，AJAX 是一种强大的技术，可以使网页更加动态和交互。通过使用 AJAX 加载 JSON 数据，我们可以在网页上展示来自服务器的实时数据，提升用户体验和功能性。无论是读取个人资料、新闻内容还是其他数据，AJAX 加载 JSON 数据都能为网页开发提供很多便利。希望本文的介绍能够帮助你更好地理解和应用 AJAX 加载 JSON 数据的方法。