AJAX (Asynchronous JavaScript and XML) 是一種在Web開發中使用的技術，它可以在不刷新整個頁面的情況下與服務器進行交互和獲取數據。傳統的方式在需要從數據庫獲取數據時，通常會通過后端語言生成動態頁面來實現。然而，使用AJAX可以直接從數據庫中獲取數據，然后在網頁中使用這些數據，這樣可以提高響應速度并提供更好的用戶體驗。

假設你正在開發一個在線商店的網站，你想實時顯示最新添加到數據庫的產品列表。在傳統的方式中，當用戶訪問網頁時，后端代碼會從數據庫中獲取產品數據，然后將數據編碼成HTML并發送給瀏覽器。這意味著每當有新產品添加到數據庫中時，用戶必須刷新整個頁面才能看到新的產品。

但是，如果我們使用AJAX來直接獲取數據庫中的產品數據，我們可以實時顯示最新的產品列表，而無需刷新整個頁面。當有新的產品添加到數據庫時，我們可以使用AJAX發送請求到后端代碼，后端代碼返回最新的產品數據并用JSON格式返回給瀏覽器。然后，我們可以使用JavaScript將這些數據處理并動態地更新頁面上的產品列表。

// 使用AJAX獲取數據庫中的產品數據
function fetchProducts() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var products = JSON.parse(this.responseText);
// 處理產品數據并更新頁面
updateProductList(products);
}
};
xmlhttp.open("GET", "getProducts.php", true);
xmlhttp.send();
}
// 處理產品數據并更新頁面
function updateProductList(products) {
var productList = document.getElementById("product-list");
productList.innerHTML = ""; // 清空舊的產品列表
for (var i = 0; i < products.length; i++) {
var product = products[i];
var listItem = document.createElement("li");
listItem.innerHTML = product.name;
productList.appendChild(listItem);
}
}
// 定期更新產品列表
setInterval(fetchProducts, 5000); // 每隔5秒獲取一次數據并更新頁面

上面的代碼演示了如何使用AJAX來獲取數據庫中的產品數據。fetchProducts函數創建了一個AJAX對象并設置了回調函數，在請求成功時處理返回的數據。updateProductList函數根據返回的產品數據動態創建一個產品列表，并將其添加到網頁中的一個DOM元素中。最后，使用setInterval函數定期調用fetchProducts函數，以便每隔一段時間獲取最新的產品數據。

通過使用AJAX直接獲取數據庫數據，我們可以提供更好的用戶體驗。無需刷新整個頁面，我們可以實時地更新網頁內容，并顯示最新的數據。這對于在線商店等需要頻繁更新數據的網站來說尤為重要。同時，使用AJAX也可以減輕服務器的壓力，因為它可以減少不必要的頁面刷新請求。

總之，AJAX不僅可以提高網頁的響應速度和用戶體驗，還可以直接從數據庫獲取數據，而無需刷新整個頁面。通過使用AJAX獲取數據庫數據，我們可以實時更新頁面內容，并為用戶提供最新的信息。