AJAX（Asynchronous JavaScript and XML）是一種利用 JavaScript 和 XML 技術進行異步通信的方法。通過使用 AJAX 技術，我們可以實現在不刷新整個網頁的情況下，向服務器發送請求，并動態更新頁面上的內容。在這篇文章中，我們將討論如何利用 AJAX 從數據庫中獲取數據，并將其展示在網頁上。

首先，讓我們假設我們的網頁上有一個列表，用于顯示某個在線商店的產品信息。當用戶瀏覽到該網頁時，我們希望頁面上顯示數據庫中存儲的產品數據。為了實現這一目標，我們可以使用 AJAX 來通過服務器請求數據庫，并將返回的數據插入到網頁的列表中。

// AJAX 請求數據
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
var productList = JSON.parse(xmlHttp.responseText);
// 將返回的數據插入到網頁的列表中
var listElement = document.getElementById('product-list');
for(var i = 0; i < productList.length; i++) {
var productElement = document.createElement('li');
productElement.innerHTML = productList[i].name;
listElement.appendChild(productElement);
}
}
};
xmlHttp.open('GET', 'getProductList.php', true);
xmlHttp.send();

在上面的代碼中，我們創建了一個 XMLHttpRequest 對象，用于發送 HTTP 請求。當請求的狀態改變時，我們定義了一個回調函數，用于接收服務器返回的數據并處理。在這個回調函數中，我們首先解析服務器返回的 JSON 格式數據，并將其插入到網頁的列表中。

接下來，讓我們看一下后端的 PHP 代碼，用于處理 AJAX 請求并從數據庫中獲取產品列表。

// getProductList.php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "online_store";
// 創建連接
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 從數據庫中獲取產品列表
$sql = "SELECT name FROM products";
$result = $conn->query($sql);
// 將產品列表轉換為 JSON 格式并發送給客戶端
$productList = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$productList[] = array("name" => $row["name"]);
}
}
echo json_encode($productList);

在上述代碼中，我們首先創建了與數據庫的連接，并檢查連接是否成功。然后，我們使用 SQL 查詢語句從數據庫中獲取產品列表，并將其轉換為 JSON 格式。最后，我們使用 echo 語句將 JSON 數據發送給客戶端。

通過結合前端的 AJAX 代碼和后端的 PHP 代碼，我們可以實現從數據庫中獲取數據并展示在網頁上的功能。無論是從在線商店獲取產品信息，還是從社交媒體網站獲取用戶評論，AJAX 都是一個非常強大和靈活的工具。