AJAX（異步JavaScript和XML）是一種用于在前端頁面和服務器之間進行異步通信的技術。通過使用AJAX，我們可以實現動態加載數據，而無需刷新整個頁面。本文將介紹使用AJAX來顯示數據庫數據的實現方法，并通過舉例來說明其應用場景和優勢。

假設我們正在開發一個電子商務網站，需要在網站上顯示最新上架的商品信息。傳統的做法是在前端代碼中編寫查詢數據庫的代碼，然后生成網頁并返回給用戶。這種方式的缺點是每次用戶訪問網頁時都需要重新加載整個頁面，導致加載速度緩慢。而使用AJAX，可以實現只加載需要更新的部分數據，從而提高用戶體驗。

在上述的示例中，我們可以將商品信息存儲在數據庫中，并使用AJAX從數據庫中獲取最新的商品信息。以下是一個使用AJAX顯示數據庫數據的示例代碼：

``````

在上述代碼中，我們定義了一個名為`loadProducts`的JavaScript函數。函數內部創建了一個XMLHttpRequest對象，并通過`open`方法指定了請求類型（GET）、URL（"getProducts.php"）和是否異步（true）。然后調用`send`方法發送請求。

當服務器返回響應時，`onreadystatechange`事件被觸發。我們檢查XMLHttpRequest對象的`readyState`屬性和`status`屬性以確保請求已經完成且成功。如果滿足條件，我們使用`innerHTML`屬性將返回的響應文本賦值給一個具有`id`為`product-list`的HTML元素，以實現動態顯示數據庫中的商品信息。

為了使上述示例代碼正常工作，我們還需要創建一個服務器端的腳本來處理AJAX請求并返回數據庫數據。以下是一個簡單的`getProducts.php`的示例代碼：

```query($sql);
// 生成HTML列表
if ($result->num_rows >0) {
while ($row = $result->fetch_assoc()) {
echo "
" . $row["name"] . "
";
}
} else {
echo "暫無數據";
}
// 關閉數據庫連接
$conn->close();
?>```

在上述示例代碼中，我們首先使用`mysqli`函數連接到數據庫。然后執行查詢語句，選擇最新上架的5個商品，并使用`fetch_assoc`方法獲取每一行的數據。通過循環輸出這些數據，生成一個帶有商品名稱的列表。最后，關閉數據庫連接。

通過使用AJAX技術，我們可以實現動態加載數據庫數據，提高用戶體驗并減少頁面加載時間。無論是電子商務網站、社交媒體還是在線論壇，AJAX都可以幫助我們更高效地展示數據，并為用戶提供更好的交互體驗。