Ajax是一種強大的Web技術，它可以讓我們在不刷新整個頁面的情況下與服務器進行數據交互。在許多Web應用程序中，模糊查詢是一種常見的需求，它允許用戶根據輸入的關鍵詞來獲得相關內容。本文將介紹如何使用Ajax實現模糊查詢，并通過舉例來說明。
要實現模糊查詢功能，首先需要一個包含所有可能匹配的數據集。假設我們有一個電影數據庫，包含了電影的標題、導演和類型等信息。用戶可以通過輸入電影的部分名稱搜索相應的電影。我們希望實現的效果是，用戶輸入一個關鍵詞，然后通過Ajax請求將匹配的電影返回并顯示在頁面上。
首先，我們需要在頁面上創建一個輸入框，讓用戶輸入搜索關鍵詞。然后，我們使用Ajax來監聽輸入框的變化，并發送請求。

html
<p>請輸入電影名稱:</p>
<input type="text" id="keyword">
<script>
// 監聽輸入框變化
document.getElementById("keyword").addEventListener("input", function() {
// 獲取輸入的關鍵詞
var keyword = this.value;
// 發送Ajax請求
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 處理返回的數據
var movies = JSON.parse(this.responseText);
// 顯示數據
displayMovies(movies);
}
};
xhr.send();
});
// 顯示電影
function displayMovies(movies) {
// 清空之前的結果
document.getElementById("result").innerHTML = "";
// 循環遍歷電影列表
for (var i = 0; i < movies.length; i++) {
var movie = movies[i];
// 創建一個新的<span>元素并添加電影標題
var span = document.createElement("span");
span.innerHTML = movie.title;
// 將<span>元素添加到結果<div>中
document.getElementById("result").appendChild(span);
}
}
</script>

上面的代碼是一個簡單的實現示例。當用戶在輸入框中輸入關鍵詞時，事件監聽器會被觸發，發送Ajax請求到服務器。服務器接收到請求后，根據關鍵詞在電影數據庫中進行匹配，并將匹配的電影以JSON格式返回。然后，客戶端將返回的電影數據解析為JavaScript對象，并調用displayMovies函數來顯示電影標題。
在displayMovies函數中，我們首先清空之前的搜索結果，然后通過循環遍歷電影列表，創建新的元素并添加電影標題，最后將元素添加到結果