使用Ajax實現局部刷新查詢

在網頁開發中，經常會遇到需要實現實時查詢并展示結果的需求。傳統的方式是使用表單提交，然后刷新整個頁面顯示查詢結果。然而，這種方式會造成用戶體驗的下降，因為整個頁面的刷新需要消耗時間并且用戶需要重新填寫表單。為了提升用戶體驗，Ajax技術應運而生。本文將介紹如何使用Ajax實現局部刷新查詢，讓用戶無需離開當前頁面即可獲取最新的查詢結果。

假設我們有一個書店的網站，我們想要實現一個搜索功能，用戶可以在搜索框中輸入關鍵詞，然后通過點擊搜索按鈕查詢相應的書籍。傳統的做法是通過表單提交，然后后端處理搜索請求，并返回查詢結果。現在我們來介紹如何使用Ajax實現這個功能。

首先，我們需要在頁面中添加一個搜索表單，如下所示：

<form id="searchForm">
<input type="text" id="keyword" name="keyword" placeholder="請輸入關鍵詞">
<input type="button" value="搜索" onclick="searchBook()">
</form>

在上面的代碼中，我們使用了一個文本輸入框和一個按鈕，用戶可以在文本輸入框中輸入關鍵詞，并點擊按鈕進行搜索。

接下來，我們需要編寫一個JavaScript函數來處理搜索請求并使用Ajax技術發送請求。代碼如下：

function searchBook() {
var keyword = document.getElementById("keyword").value;
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽Ajax請求的狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 請求成功，更新頁面內容
document.getElementById("result").innerHTML = xhr.responseText;
}
}
// 發送Ajax請求
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.send();
}

在上面的代碼中，我們首先獲取用戶輸入的關鍵詞，然后創建一個XMLHttpRequest對象，用于發送Ajax請求。然后，我們監聽Ajax請求的狀態變化，當請求成功時，即狀態碼為4且響應狀態為200時，我們將返回的查詢結果更新到頁面中。最后，我們使用xhr.open函數指定請求的方法和URL，并使用xhr.send函數發送請求。

最后，我們需要在頁面中添加一個用于展示查詢結果的容器，如下所示：

<div id="result"></div>

在上面的代碼中，我們使用一個div元素作為容器來展示查詢結果。

通過以上代碼，我們成功地實現了一個使用Ajax實現局部刷新查詢的功能。當用戶輸入關鍵詞并點擊搜索按鈕時，我們將使用Ajax技術發送請求并獲取最新的查詢結果，在頁面中展示給用戶。這種方式不僅提升了用戶體驗，還減少了不必要的頁面刷新。

總結來說，Ajax技術使得實時查詢成為可能，用戶無需離開當前頁面即可獲取最新的查詢結果。通過以上介紹的方法，我們可以輕松地使用Ajax實現局部刷新查詢，從而提升用戶體驗。