AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。它可以在不重新加載整個網頁的情況下，通過與服務器進行異步通信，動態更新網頁的內容。在傳統的網頁開發中，顯示數據庫中的數據通常需要重新加載整個網頁，這樣會增加服務器的負載并且導致用戶體驗下降。而使用AJAX，我們可以直接從數據庫中獲取數據并實時地在網頁中顯示，大大提高了用戶體驗和網頁性能。

假設我們正在開發一個簡單的待辦事項應用程序，用戶可以通過該應用程序添加新的待辦事項并查看已存在的事項列表。在傳統的網頁開發中，當用戶添加或刪除一個待辦事項時，需要使用form表單將數據傳遞給服務器進行處理，然后重新加載整個頁面以顯示更新后的事項列表。然而，使用AJAX，我們可以通過異步請求直接與服務器交互，不需要重新加載整個頁面。

下面是一個簡單的示例，演示如何使用AJAX直接從數據庫中獲取數據，并將其顯示在網頁上：

// HTML部分
<div id="todoList"></div>
<button onclick="loadTodoList()">加載事項列表</button>
// JavaScript部分
function loadTodoList() {
var xmlhttp;
if (window.XMLHttpRequest) {
// 創建 XMLHttpRequest 對象
xmlhttp = new XMLHttpRequest();
} else {
// 兼容舊版本的瀏覽器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 從服務器獲取到的數據
var data = JSON.parse(this.responseText);
// 將數據顯示在網頁上
var todoList = document.getElementById("todoList");
todoList.innerHTML = "";
for (var i = 0; i < data.length; i++) {
var todoItem = document.createElement("p");
todoItem.innerHTML = data[i].text;
todoList.appendChild(todoItem);
}
}
};
// 發送異步請求
xmlhttp.open("GET", "get_todo_list.php", true);
xmlhttp.send();
}

在上面的示例中，我們首先在HTML中創建了一個用于顯示事項列表的div元素和一個按鈕，當按鈕被點擊時，會調用JavaScript函數loadTodoList()。在loadTodoList()函數中，首先創建一個XMLHttpRequest對象，該對象可用于與服務器進行異步通信。然后，我們定義了一個回調函數，該函數在服務器返回數據時被調用。

接下來，我們使用XMLHttpRequest的open()方法指定要發送的請求類型（GET），并指定服務器端處理數據的腳本文件（get_todo_list.php）。在發送請求之后，我們通過XMLHttpRequest的send()方法發送請求。當服務器返回數據時，回調函數中的代碼會執行。

回調函數中的代碼解析服務器返回的數據，并將其顯示在網頁上。我們首先通過JSON.parse()方法將返回的JSON數據解析為JavaScript對象。然后，我們遍歷該對象并創建HTML的

元素，將每個待辦事項的文本內容添加到其內部。最后，我們將這些

元素添加到之前創建的todoList div中，從而在網頁上顯示待辦事項列表。

通過上述示例，我們可以看出，使用AJAX直接顯示數據庫數據可以實現動態更新網頁內容，無需重新加載整個頁面。這樣不僅提高了用戶體驗，還減輕了服務器的負載，有效提高了網頁的性能。在實際開發中，我們可以根據具體需求和框架選擇相應的AJAX庫或框架，簡化開發過程并提高代碼的可維護性。