AJAX（Asynchronous Javascript and XML）是一種在網頁上進行異步數據交互的技術，它可以通過后臺與服務器進行數據的交互，然后將獲取到的數據實時顯示在網頁上。而JSON（Javascript Object Notation）是一種常用的數據格式，它以鍵值對的形式存儲數據。通過結合AJAX和JSON，我們可以實現在網頁上顯示動態的數據，給用戶提供更好的交互體驗。

假設我們有一個電商網站，我們希望在用戶搜索商品時，實時顯示相關的商品信息。首先，我們需要在網頁上創建一個文本框和搜索按鈕，并通過AJAX來實現實時搜索的功能。

<input type="text" id="searchInput" placeholder="請輸入商品名稱">
<button onclick="search()">搜索</button>
<div id="result"></div>

在Javascript中，我們可以使用AJAX的XMLHttpRequest對象來發送和接收數據。下面是一個使用AJAX進行搜索的簡單示例：

function search(){
var searchInput = document.getElementById("searchInput").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
displaySearchResults(data);
}
};
xhttp.open("GET", "search.php?q=" + searchInput, true);
xhttp.send();
}
function displaySearchResults(data){
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
for(var i=0; i<data.length; i++){
var productDiv = document.createElement("div");
var nameSpan = document.createElement("span");
var priceSpan = document.createElement("span");
nameSpan.innerHTML = data[i].name;
priceSpan.innerHTML = data[i].price;
productDiv.appendChild(nameSpan);
productDiv.appendChild(priceSpan);
resultDiv.appendChild(productDiv);
}
}

上述代碼中，首先我們通過getElementById獲取到輸入框中的搜索關鍵詞，并將其作為參數添加到請求URL中。然后，我們創建一個XMLHttpRequest對象，定義了其onreadystatechange的回調函數，當請求狀態改變時執行該函數。當請求成功返回時（即readyState為4且status為200），我們解析返回的JSON數據，并調用displaySearchResults函數來顯示搜索結果。

displaySearchResults函數中，我們先通過getElementById獲取到顯示結果的div元素，并清空其中的內容。然后，我們使用循環遍歷搜索結果的數據，創建一個div元素和兩個span元素，將商品名稱和價格分別賦值給span元素，并將其添加到div元素中。最后，將該div元素添加到結果顯示的div元素中。

通過上述代碼，我們可以在用戶輸入關鍵詞并點擊搜索按鈕后，實時從服務器獲取商品信息，并將其以動態的方式顯示在網頁上。這樣，用戶可以在不刷新頁面的情況下實時獲取到最新的搜索結果，提升了交互體驗。

除了搜索功能外，我們還可以使用AJAX和JSON來實現更多的功能，如用戶評論的實時加載、購物車中商品數量的實時更新等等。通過結合AJAX和JSON，我們可以在網頁上輕松實現豐富的動態數據顯示功能，為用戶提供更好的用戶體驗。