AJAX（Asynchronous JavaScript and XML）和 JSON（JavaScript Object Notation）是前端开发中常用的技术。AJAX允许你在不刷新整个页面的情况下向服务器发送HTTP请求，并根据返回的响应进行更新。JSON则是一种数据交换格式，它以简洁和易于读写的方式表达结构化数据。通过AJAX和JSON的结合应用，开发人员可以创建出更加灵活和高效的Web应用。以下将通过具体的示例来展示如何使用AJAX和JSON来进行数据交互和展示。

首先，我们来看一个使用AJAX和JSON进行数据交互的例子。假设我们想要从服务器获取一组用户数据，并将其展示在页面上。首先，我们需要创建一个用于展示数据的HTML结构，如下所示：

<div id="user-list">
<ul id="user-items"></ul>
</div>

接下来，我们可以使用AJAX发送HTTP请求获取用户数据。在这个例子中，我们使用jQuery来简化AJAX请求的代码。代码示例如下：

$.ajax({
url: '/api/users',
method: 'GET',
success: function(response) {
// 在这里处理服务器返回的响应数据
},
error: function() {
// 如果请求失败，执行相应的错误处理
}
});

在成功回调函数中，我们可以将服务器返回的响应数据解析为JSON格式，并将其展示在页面上。代码示例如下：

success: function(response) {
var userList = $('#user-items');
// 清空用户列表
userList.empty();
// 遍历每个用户数据并创建对应的列表项
for (var i = 0; i< response.length; i++) {
var user = response[i];
var listItem = '<li>' + user.name + '</li>';
userList.append(listItem);
}
}

通过以上代码，我们可以将从服务器获取到的用户数据展示在页面中。

除了获取数据外，我们也可以使用AJAX和JSON来向服务器发送数据。比如，假设我们有一个表单，用户可以填写并提交，我们需要将表单数据发送给服务器进行保存。以下是一个示例表单的HTML代码：

<form id="user-form" action="/api/users" method="POST">
<input type="text" name="name" placeholder="Name" />
<input type="email" name="email" placeholder="Email" />
<button type="submit">Submit</button>
</form>

在表单提交时，我们可以使用AJAX将表单数据发送给服务器。代码示例如下：

$('#user-form').submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: $(this).attr('action'),
method: $(this).attr('method'),
data: formData,
success: function(response) {
// 在这里处理服务器返回的响应数据
},
error: function() {
// 如果请求失败，执行相应的错误处理
}
});
});

在以上代码中，我们首先使用preventDefault()方法阻止表单的默认提交行为。然后，我们使用serialize()方法将表单数据序列化为URL编码的字符串。最后，我们将这个字符串作为HTTP请求的数据发送给服务器。

综上所述，AJAX和JSON的结合应用为我们提供了一种灵活和高效的方式来进行数据交互和展示。通过AJAX，我们可以在不刷新整个页面的情况下与服务器进行通信，而JSON则提供了一种简洁和易于读写的数据格式。通过以上的示例，我们可以看到AJAX和JSON的强大功能和实际应用。希望本文可以帮助读者更好地理解和应用AJAX和JSON。