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

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

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