AJAX是一種用于創建交互式網頁應用程序的技術，它可以讓網頁通過后臺與數據庫進行通信，從而實現動態加載數據的功能。無需刷新整個頁面，AJAX可以在后臺獲取數據并將其顯示在特定的位置上，大大提升了用戶體驗。本文將介紹如何使用AJAX從數據庫中獲取數據，并用實例進行說明。

在一個在線商城的網站中，我們需要從數據庫中獲取商品的信息并將其展示在網頁上。我們希望當用戶點擊某個分類的鏈接時，頁面可以動態加載該分類下的商品信息。在傳統的網頁中，當用戶點擊分類鏈接時，頁面會被重新加載，用戶需要等待片刻才能看到對應的商品內容。但是利用AJAX技術，我們可以通過后臺與數據庫進行通信，獲取到商品信息后，再將其動態地顯示在當前頁面中，而不需要刷新整個頁面。以下是使用AJAX從數據庫中獲取數據的示例代碼：

function getProducts(categoryId) {
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 當請求成功完成時，處理數據
var products = JSON.parse(xhr.responseText);
displayProducts(products);
}
};
// 發送AJAX請求
xhr.open("GET", "get_products.php?categoryId=" + categoryId, true);
xhr.send();
}
// 根據獲取到的商品信息，在頁面上顯示商品列表
function displayProducts(products) {
var productList = document.getElementById("product-list");
productList.innerHTML = "";
for (var i = 0; i< products.length; i++) {
var product = products[i];
var productElement = document.createElement("div");
productElement.innerHTML = "
" + product.name + "
" +
"
價格：" + product.price + "
" +
"
庫存：" + product.stock + "
";
productList.appendChild(productElement);
}
}

以上代碼中，我們首先創建了一個XMLHttpRequest對象，然后通過open方法指定了請求的方法、URL和是否異步。接著，我們監聽了XMLHttpRequest對象的onreadystatechange事件，當請求狀態變為4（請求已完成）且狀態碼為200（請求成功）時，我們處理從后臺獲取到的商品信息。

當點擊分類鏈接時，我們調用了getProducts函數，并將對應的分類ID作為參數傳遞進去。getProducts函數內部，我們創建了一個XMLHttpRequest對象，并通過open方法指定了請求的方法（GET）、URL（get_products.php）和是否異步（true）。然后，我們通過send方法發送了請求。

在服務器端，我們可以通過接收到的分類ID查詢數據庫，獲取對應分類下的商品信息，并將其以JSON格式返回給前端。前端接收到響應后，可以通過JSON.parse方法將返回的JSON字符串轉換成JavaScript對象。然后，我們調用displayProducts函數，并將獲取到的商品信息作為參數傳遞進去，該函數會根據商品信息在頁面上動態地顯示商品列表。

通過使用AJAX從數據庫中獲取數據，我們可以在用戶點擊分類鏈接時，動態地加載該分類下的商品信息，而無需刷新整個頁面。這為用戶提供了更快捷、更友好的購物體驗。AJAX技術的發展，使得前端開發更加靈活、高效，為創建優秀的Web應用程序提供了強大的支持。