AJAX是一种常见的网页开发技术，它可以通过在不需要重新加载整个页面的情况下与服务器进行数据交换，提供了更流畅、更快速的用户体验。而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于AJAX中传输数据。在本文中，我们将介绍一个基于AJAX和JSON的小例子，展示如何利用这两种技术实现实时搜索功能。

假设我们有一个商品列表，用户可以在一个搜索框中输入关键词，实时显示与关键词匹配的商品。当用户输入关键词后，网页会通过AJAX请求将关键词发送给服务器，并接收服务器返回的匹配结果。服务器将使用JSON格式返回商品的相关信息，如名称、价格等。通过将这些数据动态地插入到网页中，用户可以实时看到符合搜索条件的商品。

下面是实现这一功能的简化例子：

// HTML部分
<input type="text" id="searchInput" placeholder="请输入关键词">
<div id="searchResults"></div>
// JavaScript部分
var searchInput = document.getElementById('searchInput');
var searchResults = document.getElementById('searchResults');
searchInput.addEventListener('input', function() {
var keyword = searchInput.value;
// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 发送AJAX请求到服务器
xhr.open('GET', '/search?keyword=' + encodeURIComponent(keyword), true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();
// 接收服务器返回的数据
xhr.onload = function() {
if (xhr.status === 200) {
var results = JSON.parse(xhr.responseText);
// 清空之前的搜索结果
searchResults.innerHTML = '';
// 将搜索结果动态插入网页
results.forEach(function(result) {
var resultElement = document.createElement('div');
resultElement.innerText = result.name + ': ' + result.price;
searchResults.appendChild(resultElement);
});
}
};
});

通过这段代码的示例，我们可以看到：

• 在HTML部分，我们有一个输入框和一个用于显示搜索结果的div元素。
• 在JavaScript部分，我们使用addEventListener函数为输入框添加了一个input事件的监听器，以便实时监听用户的输入。
• 当用户输入关键词后，AJAX请求会发送到服务器。其中，关键词会作为查询参数附加在URL上。
• 服务器接收到请求后，根据关键词进行搜索，并将搜索结果以JSON格式返回给客户端。
• 客户端会接收到服务器返回的数据，并将其动态地插入到网页中，实时显示搜索结果。

这个简单的例子展示了如何使用AJAX和JSON实现实时搜索功能。当然，在实际开发中，还可能涉及到更复杂的数据交互以及各种异步操作。但总的来说，AJAX和JSON的使用可以极大地提升网页的用户体验和性能，使网页更加智能、动态。