在使用Web開發(fā)中，Ajax（Asynchronous JavaScript and XML）是一個常用的技術(shù)，它可以在不刷新整個頁面的情況下，通過與服務器進行異步通信從而獲取數(shù)據(jù)并更新頁面內(nèi)容。當我們在搜索引擎中輸入關(guān)鍵詞并點擊搜索按鈕時，頁面會向服務器發(fā)送請求，服務器會根據(jù)關(guān)鍵詞進行查詢，并將結(jié)果返回給瀏覽器。接下來，我將介紹如何使用Ajax將查詢的結(jié)果以實時展示在頁面上。
我們以一個簡單的實例為例，假設(shè)我們需要在頁面上顯示一個用戶的基本信息。在頁面中，我們會有一個輸入框用來輸入用戶ID，并有一個按鈕用來觸發(fā)Ajax請求。當用戶輸入ID并點擊按鈕后，Ajax會將ID發(fā)送給服務器，并接收到服務器返回的用戶信息。然后，我們可以在頁面上顯示這些信息。
首先，我們需要在頁面中為顯示用戶信息的區(qū)域留出一塊空間，可以通過一個div元素實現(xiàn)。我們給這個div設(shè)置一個唯一的ID，例如"id='userInfo'"。
接下來，我們需要編寫Ajax請求的代碼。我們可以使用jQuery的Ajax方法來實現(xiàn)。在點擊按鈕時，我們添加一個事件處理程序。當點擊按鈕時，該處理程序?qū)妮斎肟蛑蝎@取用戶輸入的ID，并將其作為參數(shù)傳遞給Ajax請求的URL。服務器端的腳本將根據(jù)這個ID進行查詢，并將查詢結(jié)果以JSON格式返回給瀏覽器。
以下是一個示例代碼：

$(document).ready(function() {
$('#searchButton').click(function() {
var userId = $('#userIdInput').val();
var url = 'getUserInfo.php?id=' + userId;
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
success: function(result) {
displayUserInfo(result);
}
});
});
function displayUserInfo(userInfo) {
var infoDiv = $('#userInfo');
infoDiv.empty();
var nameSpan = $('<p>').text('Name: ' + userInfo.name);
var ageSpan = $('<p>').text('Age: ' + userInfo.age);
infoDiv.append(nameSpan, ageSpan);
}
});

在上面的代碼中，我們首先獲取了輸入框中的用戶ID，并拼接成Ajax請求的URL。我們設(shè)置了請求的類型為GET，數(shù)據(jù)類型為JSON，這意味著我們希望服務器返回的數(shù)據(jù)是JSON格式。
當Ajax請求成功后，我們調(diào)用了一個名為displayUserInfo的函數(shù)，這個函數(shù)會以參數(shù)的形式接收到服務器返回的結(jié)果。在該函數(shù)中，我們首先清空了之前可能已經(jīng)存在的內(nèi)容，然后根據(jù)返回的結(jié)果創(chuàng)建了兩個p標簽來顯示用戶的姓名和年齡。
最后，我們將這些p標簽添加到之前留出空間的div元素中。當用戶點擊按鈕時，在頁面上將實時展示該用戶的姓名和年齡。
綜上所述，通過使用Ajax技術(shù)，我們可以在不刷新頁面的情況下，通過與服務器進行異步通信，實時地獲取數(shù)據(jù)并更新頁面內(nèi)容。我們使用了一個簡單的示例來說明如何將查詢的結(jié)果顯示在頁面上。通過掌握Ajax的基本原理和使用方法，我們可以在Web開發(fā)中更加靈活地處理數(shù)據(jù)和頁面內(nèi)容。