AJAX（Asynchronous JavaScript And XML）是一種在網頁中無需刷新整個頁面的情況下，通過與服務器進行異步通信，實現動態頁面內容展示的技術。在實際應用中，我們經常需要從數據庫中取出數據并在網頁中展示出來。通過使用AJAX技術，我們可以快速高效地從數據庫中取出數據，并在頁面上即時地顯示出來，極大地提升了用戶體驗。

假設我們正在開發一個博客系統，其中有一個“文章列表”頁面，需要從數據庫中取出所有文章的標題和作者，并在頁面上展示出來。傳統的方式是在頁面加載時，通過服務器端腳本從數據庫中查詢所有的文章，然后將這些數據插入到網頁的HTML代碼中，最終生成一個完整的頁面返回給客戶端。然而，這種方式每次加載頁面都需要重新向服務器請求全部的數據，即使只是想查看其中的一篇文章，也會浪費時間和資源。通過使用AJAX技術，我們可以在用戶瀏覽頁面的同時，異步地向服務器請求所需的數據，并將其實時地展示在頁面上，大大提升了用戶的交互體驗。

下面是一個簡單的示例，我們使用AJAX從數據庫中取出文章的標題和作者，并將這些數據展示在頁面上：

// 創建一個AJAX請求對象
var xhr = new XMLHttpRequest();
// 定義請求的URL和方法
xhr.open('GET', '/api/articles', true);
// 注冊請求成功的回調函數
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
// 解析從服務器返回的JSON數據
var articles = JSON.parse(xhr.responseText);
// 將文章數據插入到頁面的HTML中
var articleList = document.getElementById('article-list');
for (var i = 0; i< articles.length; i++) {
var articleItem = document.createElement('li');
articleItem.textContent = articles[i].title + ' - ' + articles[i].author;
articleList.appendChild(articleItem);
}
} else {
console.log('Request failed.  Returned status of ' + xhr.status);
}
});
// 發送請求
xhr.send();

在這個示例中，我們首先創建了一個AJAX請求對象xhr，并用xhr.open方法定義了請求的URL和方法（GET）。然后，我們通過xhr.addEventListener方法注冊了請求成功的回調函數。在回調函數中，當請求成功時（xhr.status為200），我們首先解析從服務器返回的JSON數據，并通過document.createElement和appendChild方法將文章數據插入到頁面的HTML中。最后，我們通過xhr.send方法發送請求。

通過使用AJAX技術，我們可以從數據庫中動態地獲取數據并實時地展示在頁面上，提升了用戶的交互體驗。除了文章列表，我們還可以結合用戶的輸入，實現更豐富的交互功能，比如實時搜索、分頁加載等。AJAX從數據庫中取出數據，不僅僅是讓網頁變得更加動態和靈活，還為用戶提供了更好的用戶體驗。