AJAX（Asynchronous JavaScript and XML）是一種在網(wǎng)頁中使用的技術(shù)，它允許網(wǎng)頁在不刷新整個頁面的情況下與服務(wù)器進(jìn)行交互。通過AJAX，可以實(shí)現(xiàn)異步獲取查詢結(jié)果，從而提高用戶體驗(yàn)和減少數(shù)據(jù)的傳輸量。

在使用AJAX獲取查詢結(jié)果之前，我們需要先了解如何發(fā)送一個AJAX請求。通常，我們可以使用JavaScript中的XMLHttpRequest對象來創(chuàng)建一個AJAX請求。下面是一個使用AJAX獲取查詢結(jié)果的簡單例子。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 對返回的結(jié)果進(jìn)行處理
}
};
xhr.open('GET', 'http://example.com/query', true);
xhr.send();

在這個例子中，我們通過XMLHttpRequest對象創(chuàng)建了一個AJAX請求。通過調(diào)用xhr.open方法，我們指定了請求的方法（GET），以及請求的地址（http://example.com/query）。然后，通過xhr.send方法發(fā)送請求。

當(dāng)服務(wù)器響應(yīng)請求時，xhr.onreadystatechange事件將會被觸發(fā)。在這個例子中，我們對響應(yīng)的狀態(tài)進(jìn)行了檢查。如果狀態(tài)為4（表示請求已完成）且狀態(tài)碼為200（表示響應(yīng)成功），我們可以通過xhr.responseText屬性獲取響應(yīng)的內(nèi)容，并進(jìn)行處理。

接下來，我們來看一個更具體的例子。假設(shè)我們有一個網(wǎng)頁中有一個表單，用戶可以在表單中輸入一個關(guān)鍵字進(jìn)行查詢。我們希望通過AJAX獲取查詢結(jié)果，并在網(wǎng)頁中動態(tài)地顯示這些結(jié)果。以下是一個實(shí)現(xiàn)這個功能的代碼示例：

// HTML代碼
<form id="search-form" action="/search" method="get">
<input type="text" id="keyword" name="keyword">
<input type="submit" value="Search">
</form>
<div id="results"></div>
// JavaScript代碼
var form = document.getElementById('search-form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認(rèn)提交行為
var keyword = document.getElementById('keyword').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayResults(response);
}
};
xhr.open('GET', '/search?keyword=' + encodeURIComponent(keyword), true);
xhr.send();
});
function displayResults(results) {
var resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '';
for (var i = 0; i < results.length; i++) {
var resultDiv = document.createElement('div');
resultDiv.innerHTML = results[i].title;
resultsDiv.appendChild(resultDiv);
}
}

在這個例子中，我們首先獲取到了表單元素和結(jié)果顯示的div元素。然后，我們給表單綁定了submit事件的處理函數(shù)。當(dāng)表單被提交時，我們阻止了表單的默認(rèn)提交行為（即刷新頁面），并使用document.getElementById方法獲取到了輸入框中的關(guān)鍵字。

接著，我們創(chuàng)建了一個AJAX請求，并在請求發(fā)送成功后的回調(diào)函數(shù)中解析響應(yīng)的內(nèi)容。在這個例子中，我們假設(shè)服務(wù)器返回的是一個JSON格式的數(shù)據(jù)。我們使用JSON.parse方法將響應(yīng)的內(nèi)容轉(zhuǎn)換為JavaScript對象，并將結(jié)果傳遞給displayResults函數(shù)。

displayResults函數(shù)負(fù)責(zé)顯示查詢結(jié)果。首先，它通過document.getElementById方法獲取到結(jié)果顯示的div元素，并清空其內(nèi)容。然后，通過for循環(huán)遍歷查詢結(jié)果，并將每個結(jié)果創(chuàng)建為一個div元素，并添加到結(jié)果顯示的div元素中。

通過以上的代碼示例，我們可以看到如何使用AJAX獲取查詢結(jié)果，并實(shí)現(xiàn)在網(wǎng)頁中動態(tài)地顯示這些結(jié)果。通過AJAX，用戶無需刷新整個頁面就能獲取到查詢結(jié)果，提高了用戶體驗(yàn)，并減少了不必要的數(shù)據(jù)傳輸。