Ajax是一種讓網(wǎng)頁在不刷新的情況下與服務(wù)器進(jìn)行交互的技術(shù)。它可以讓用戶在搜索框中輸入關(guān)鍵字，并且實(shí)時地獲取到與這些關(guān)鍵字相關(guān)的搜索結(jié)果，而不需要等待整個網(wǎng)頁重新加載。

假設(shè)我們正在開發(fā)一個電子商務(wù)網(wǎng)站，用戶可以在搜索框中輸入商品的名稱，然后網(wǎng)站會實(shí)時地顯示與這個名稱相關(guān)的商品列表。使用Ajax實(shí)現(xiàn)這個搜索功能非常簡單。

首先，我們可以在頁面中添加一個輸入框和一個用于顯示搜索結(jié)果的區(qū)域：

<input type="text" id="searchInput">
<div id="searchResult"></div>

然后，我們需要編寫一段JavaScript代碼，當(dāng)用戶輸入關(guān)鍵字時，會發(fā)送一個Ajax請求，并且根據(jù)服務(wù)器返回的數(shù)據(jù)更新搜索結(jié)果：

<script>
var searchInput = document.getElementById("searchInput");
var searchResult = document.getElementById("searchResult");
searchInput.addEventListener("input", function () {
var keyword = searchInput.value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var results = JSON.parse(xhr.responseText);
var html = "";
for (var i = 0; i < results.length; i++) {
html += "<p>" + results[i].name + "</p>";
}
searchResult.innerHTML = html;
}
};
xhr.send();
});
</script>

在這段代碼中，我們使用addEventListener方法來監(jiān)聽輸入框的輸入事件。每次用戶輸入關(guān)鍵字時，會觸發(fā)這個事件，并且發(fā)送一個GET請求到search.php頁面。請求的URL中包含用戶輸入的關(guān)鍵字。

當(dāng)服務(wù)器返回數(shù)據(jù)時，我們會解析這些數(shù)據(jù)，并且使用一個循環(huán)來生成一些包含搜索結(jié)果名稱的HTML代碼。最后，我們將生成的HTML代碼放置到搜索結(jié)果的區(qū)域中。

舉個例子，假設(shè)用戶在輸入框中輸入關(guān)鍵字"電視"。當(dāng)用戶按下鍵盤上的"v"鍵時，會發(fā)送一個請求到search.php頁面，并且URL會變成"search.php?keyword=電視"。服務(wù)端收到請求后，會根據(jù)這個關(guān)鍵字查詢數(shù)據(jù)庫中的商品數(shù)據(jù)，并且返回一個包含這些數(shù)據(jù)的JSON字符串。前端代碼會解析這個JSON字符串，并且將其中的商品名稱生成HTML代碼。

總之，通過使用Ajax，我們可以在用戶輸入關(guān)鍵字的同時，實(shí)時地展示搜索結(jié)果，提供更好的用戶體驗。以下是一些展示搜索結(jié)果的網(wǎng)站，它們都使用了Ajax技術(shù)：Google、百度、亞馬遜等。