AJAX（Asynchronous JavaScript and XML）是一種用于實現異步通信的技術，它可以通過在后臺與服務器進行小規模的數據交換，實現頁面的局部刷新而不需要重載整個頁面。在前端開發中，特別是與數據庫交互時，使用AJAX可以提升用戶體驗和頁面性能。本文將通過一個簡單的數據庫實例，介紹如何使用AJAX從數據庫中獲取數據，并將其展示在頁面上。

假設我們有一個在線書店的網站，需要在用戶瀏覽頁面時通過AJAX從數據庫中獲取書籍的信息。首先，在數據庫中創建一個名為"books"的表，包含"id"、"title"和"author"字段分別表示書籍的唯一標識、書名和作者。接下來，我們在前端代碼中編寫一個AJAX請求，用于從數據庫中獲取書籍信息。

function getBooks() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "getBooks.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var books = JSON.parse(xhr.responseText);
displayBooks(books);
}
};
xhr.send();
}

上述代碼首先創建了一個XMLHttpRequest對象，通過open方法指定請求的類型（GET）和URL（getBooks.php），設置了請求為異步模式（true）。然后，通過onreadystatechange事件指定了當請求狀態發生變化時的回調函數。當請求成功返回（readyState為4，status為200）時，將返回的書籍信息解析為JSON格式，并調用displayBooks函數進行展示。

接下來，我們需要在服務器端創建一個getBooks.php文件，用于處理AJAX請求并從數據庫中獲取書籍信息。

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "bookstore";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM books";
$result = $conn->query($sql);
$books = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$books[] = $row;
}
}
echo json_encode($books);
$conn->close();
?>

上述服務器端代碼使用PHP連接數據庫，并執行查詢語句獲取所有書籍的信息，將其存儲在一個數組中。最后，通過echo函數將數組轉換為JSON格式并輸出。

回到前端代碼，我們還需要編寫一個displayBooks函數，用于將獲取到的書籍信息展示在頁面上。

function displayBooks(books) {
var booksContainer = document.getElementById("booksContainer");
booksContainer.innerHTML = "";
for (var i = 0; i < books.length; i++) {
var bookDiv = document.createElement("div");
bookDiv.innerHTML = "Title: " + books[i].title + "<br>Author: " + books[i].author;
booksContainer.appendChild(bookDiv);
}
}

上述代碼通過遍歷書籍信息數組，將每本書的標題和作者信息添加到一個新創建的