最近，隨著互聯網技術的快速發展，越來越多的網站開始使用Ajax技術來實現在頁面上實時顯示數據的功能。Ajax（Asynchronous JavaScript and XML）是一種通過在后臺與服務器進行少量數據交換的方式，實現頁面局部的更新，而不需要重新加載整個頁面的技術。這種技術能夠增加用戶體驗度，提高用戶對網站的粘性，并且減輕服務器的負載壓力。 假設我們正在使用一個電商網站，并且我們現在要實現一個商品搜索功能，即當用戶在搜索框中輸入關鍵詞時，頁面會實時顯示相關的商品列表。這個時候，我們可以使用Ajax來實現這個功能。首先，在頁面加載完成后，我們可以使用JavaScript代碼通過Ajax技術向服務器發送一個請求，傳遞用戶輸入的關鍵詞。服務器端收到請求后，根據關鍵詞從數據庫中查詢相關商品的信息，并將結果返回給前端。前端再通過JavaScript代碼將返回的商品列表數據解析并顯示在頁面上。 具體實現起來，我們可以在搜索框輸入關鍵詞后，通過JavaScript代碼捕獲用戶輸入的內容，并將其作為參數傳遞給Ajax請求。下面是一個示例代碼：

```
let keyword = document.getElementById("search-box").value; // 獲取搜索框中的關鍵詞
let xmlhttp = new XMLHttpRequest(); // 創建XMLHttpRequest對象
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let res = JSON.parse(this.responseText); // 解析返回的商品列表數據
let productList = document.getElementById("product-list"); // 獲取用于顯示商品列表的DOM元素
// 遍歷商品列表數據，生成HTML代碼并顯示在頁面上
res.forEach(product =>{
let productItem = document.createElement("div");
productItem.innerHTML = `
${product.name}
${product.price}
`;
productList.appendChild(productItem);
});
}
};
xmlhttp.open("GET", `search.php?keyword=${keyword}`, true); // 發送GET請求，參數中包含關鍵詞
xmlhttp.send();
```

在上面的代碼中，我們使用了XMLHttpRequest對象來發送Ajax請求。我們通過指定onreadystatechange事件處理函數，當Ajax請求狀態發生變化時觸發這個函數。當請求的readyState為4，即請求已完成時，并且服務器返回的狀態碼為200，即請求成功時，我們可以從服務器返回的responseText中獲取到商品列表數據。然后，我們使用forEach方法遍歷商品列表數據，生成對應的HTML代碼，并將其添加到頁面上用于顯示。 通過這樣的實現，當用戶在搜索框中輸入關鍵詞時，頁面會實時顯示與關鍵詞相關的商品列表。這為用戶提供了便利，同時也增加了用戶對網站的粘性。 總而言之，Ajax技術的應用使得在頁面上實時顯示數據成為可能。我們可以通過利用Ajax技術，在頁面上局部地更新數據，提升用戶的體驗度，減輕服務器的負載，從而為用戶提供更好的網站服務。無論是電商網站的商品搜索功能，還是社交媒體網站實時更新用戶消息的功能，Ajax技術都起到了重要的作用。