AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上異步獲取和加載數據的技術。通過AJAX，網頁可以在不重新加載整個頁面的情況下，通過與服務器進行異步通信來更新部分頁面內容。這使得網頁可以更加動態和交互，提升用戶體驗。而在使用AJAX的過程中，常常需要從數據庫中獲取數據。本文將介紹如何使用AJAX來調用數據庫數據，并通過舉例說明這個過程。

假設我們有一個網頁上展示用戶評論的功能。用戶可以在網頁上發表評論，并實時查看他人的評論。這個功能的實現需要從數據庫中獲取評論數據，然后將數據顯示在網頁上。在使用AJAX之前，為了顯示評論，我們需要每次刷新整個頁面。現在，我們可以通過AJAX來實現實時更新評論的功能，而不需要刷新頁面。

// 假設有一個評論表格
CREATE TABLE comments (
id INT AUTO_INCREMENT PRIMARY KEY,
content TEXT,
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
// 網頁中的AJAX代碼
function getComments() {
// 創建XMLHttpRequest對象
const xhr = new XMLHttpRequest();
// 設置回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const comments = JSON.parse(xhr.responseText);
// 將評論數據顯示在網頁上
displayComments(comments);
}
}
// 發送請求
xhr.open('GET', 'getComments.php', true);
xhr.send();
}
function displayComments(comments) {
const commentContainer = document.getElementById('commentContainer');
commentContainer.innerHTML = '';
for (let i = 0; i < comments.length; i++) {
const comment = document.createElement('div');
comment.classList.add('comment');
comment.innerHTML = comments[i].content;
commentContainer.appendChild(comment);
}
}
// 網頁加載完成后調用getComments()函數
window.onload = getComments;

在上面的代碼中，我們首先創建了一個XMLHttpRequest對象xhr。然后，我們通過設置xhr的onreadystatechange屬性為一個匿名函數，來定義當請求的狀態發生變化時的回調函數。回調函數會在請求完成后被調用。

在回調函數中，我們檢查xhr的readyState屬性是否為4（表示請求已完成），以及status屬性是否為200（表示請求成功）。如果請求成功，我們通過JSON.parse()方法將服務器返回的評論數據解析成一個JavaScript對象comments，然后調用displayComments()函數將評論顯示在網頁上。

displayComments()函數遍歷comments對象，創建一個div元素comment，并將評論的內容賦值給comment的innerHTML屬性。然后，將comment添加到網頁的commentContainer元素中。通過這種方式，我們實現了實時更新評論的功能。

在服務器端，我們需要編寫一個用于獲取評論數據的PHP文件getComments.php：

// getComments.php文件
// 連接數據庫
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
// 查詢評論數據
$sql = "SELECT * FROM comments ORDER BY timestamp DESC";
$result = $conn->query($sql);
// 將評論數據轉換成JSON格式
$comments = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$comments[] = array('content' => $row["content"]);
}
}
echo json_encode($comments);
$conn->close();

在getComments.php文件中，我們首先連接到數據庫。然后，我們執行一個SELECT查詢，從comments表中獲取評論數據。將數據傳輸回客戶端之前，我們將評論數據轉換成JSON格式，以便于在客戶端解析。

通過以上的代碼示例，我們可以看到，使用AJAX調用數據庫數據并更新網頁內容并不復雜。通過AJAX，我們可以實現更加動態和實時的網頁交互效果，提升用戶體驗。希望本文對于理解AJAX調用數據庫數據的過程有所幫助。