在現代web開發中，通過ajax獲取數據庫數據并實時將其顯示在HTML頁面上已成為一種常見的需求。通過這種方式，我們可以在不刷新整個頁面的情況下，動態更新數據并展現給用戶。比如，一個在線商城網站，當用戶點擊“加載更多”按鈕時，通過ajax從數據庫中獲取更多商品信息并將其顯示在當前頁面上。這種技術可以提升用戶體驗，同時減少不必要的服務器響應和頁面刷新，從而提高網站性能與效率。
假設我們有一個拍賣網站，用戶在頁面上可以看到當前出價最高的商品。當有新的出價提交時，頁面上應該能夠實時更新出價數據。我們可以使用ajax來實現這一功能。
首先，我們需要在HTML頁面上創建一個用于顯示最高出價的元素。比如，在一個div元素中，我們可以使用id屬性為其命名為"highest-bid"。代碼如下：

html
<div id="highest-bid"></div>

接下來，我們需要在JavaScript中編寫ajax請求的代碼。這段代碼將獲取數據庫中最新的出價數據，并將其更新到HTML頁面中的元素中。代碼如下：

javascript
// 創建一個XMLHttpRequest對象
var xhttp = new XMLHttpRequest();
// 定義回調函數來處理服務器的響應
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 獲取服務器響應的數據
var response = JSON.parse(this.responseText);
// 更新HTML頁面元素中的數據
document.getElementById("highest-bid").innerHTML = response.highestBid;
}
};
// 發送ajax請求
xhttp.open("GET", "get-highest-bid.php", true);
xhttp.send();

以上代碼中，我們創建了一個XMLHttpRequest對象，并定義了一個回調函數來處理服務器的響應。在回調函數中，我們將服務器響應的最高出價數據更新到HTML頁面中的元素中。
最后，我們需要在服務器端編寫一個用于處理ajax請求的腳本。在本例中，我們創建一個名為"get-highest-bid.php"的腳本文件。在該腳本文件中，我們將訪問數據庫，獲取最高出價數據，并將其返回給前端。代碼如下：

php
<?php
// 連接數據庫
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "auction";
$conn = new mysqli($servername, $username, $password, $dbname);
// 獲取最高出價數據
$sql = "SELECT MAX(bid_amount) AS highestBid FROM bids";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$highestBid = $row["highestBid"];
// 將數據以JSON格式返回給前端
$response = array("highestBid" => $highestBid);
echo json_encode($response);
// 關閉數據庫連接
$conn->close();
?>

以上代碼中，我們首先連接到數據庫，然后執行SQL查詢來獲取最高出價數據。接下來，我們將查詢結果保存在一個關聯數組中，并以JSON格式返回給前端。
通過以上的代碼，我們實現了通過ajax獲取數據庫數據并將其動態展示在HTML頁面上的功能。當有新的出價提交時，頁面上的最高出價數據將會實時更新，而無需刷新整個頁面。這種實時更新數據的方式為用戶提供了更好的體驗，并且減少了不必要的頁面刷新和服務器響應，從而提高了網站的性能和效率。