AJAX（Asynchronous JavaScript and XML）是一種用于在瀏覽器和服務器之間異步傳輸數據的技術。通過AJAX，我們可以在不刷新整個頁面的情況下，向服務器發送請求并接收響應數據，實現動態更新頁面內容。在本文中，我們將介紹如何使用AJAX從數據庫獲取新聞的標題，并動態展示在網頁上。

假設我們有一個新聞網站，我們的數據庫中保存了大量的新聞數據，包括新聞的標題、內容和發布時間等信息。我們希望在網頁上展示最新的新聞標題，并在用戶點擊某個標題后，動態地加載對應新聞的詳細內容。使用傳統的方式，每次刷新頁面時都要從數據庫中讀取最新的新聞標題，這樣會導致頁面加載速度變慢。而使用AJAX，我們可以在頁面加載之后，通過異步請求獲取最新的新聞標題，大大提高用戶體驗。

首先，我們需要在網頁中引入jQuery，這是一個廣泛使用的JavaScript庫，可以簡化我們的AJAX操作。然后，我們可以通過以下代碼來實現從數據庫中獲取新聞標題：

$.ajax({
url: "get_news_titles.php", // 調用獲取新聞標題的后臺接口
method: "GET", // 請求方法為GET
success: function(response) { // 請求成功時的回調函數
var newsTitles = JSON.parse(response); // 解析服務器返回的響應數據
for (var i = 0; i< newsTitles.length; i++) {
$("ul.news").append("
" + newsTitles[i] + "
"); // 將新聞標題添加到網頁中
}
},
error: function() { // 請求失敗時的回調函數
alert("Failed to fetch news titles."); // 彈出錯誤提示
}
});

上述代碼中，我們使用jQuery的$.ajax函數發起了一個GET請求，請求的URL是"get_news_titles.php"。這個URL指向一個后臺接口，用于從數據庫中獲取新聞標題并返回給瀏覽器。當請求成功時，服務器會返回一個JSON格式的數據，我們可以通過JSON.parse方法將其解析為一個JavaScript數組，并使用循環將每個新聞標題添加到網頁中。

在上述代碼的回調函數中，我們使用了jQuery的選擇器$("ul.news")來獲取一個無序列表（ul）的DOM元素，其中class為"news"。通過調用append方法，我們可以將新聞標題添加為列表項（li）的內容，從而在網頁上動態顯示新聞標題。

除了獲取新聞標題，我們還需要實現用戶點擊新聞標題后加載對應新聞內容的功能。我們可以通過以下代碼來實現：

$("ul.news").on("click", "li", function() { // 點擊新聞標題時觸發的事件處理函數
var selectedTitle = $(this).text(); // 獲取用戶點擊的新聞標題
$.ajax({
url: "get_news_content.php", // 調用獲取新聞內容的后臺接口
method: "POST", // 請求方法為POST
data: { title: selectedTitle }, // 向服務器傳遞選擇的新聞標題
success: function(response) { // 請求成功時的回調函數
$("div.content").html(response); // 將新聞內容更新到網頁中
},
error: function() { // 請求失敗時的回調函數
alert("Failed to fetch news content."); // 彈出錯誤提示
}
});
});

在上述代碼中，我們使用了jQuery的on方法來添加一個點擊事件處理函數。當用戶點擊ul.news中的任意li元素時，該事件處理函數就會被觸發。在事件處理函數中，我們通過$(this).text()獲取用戶點擊的新聞標題，并將其作為請求參數傳遞給服務器。

與獲取新聞標題的代碼類似，我們使用ajax函數發起了一個POST請求，請求的URL是"get_news_content.php"，這個URL指向一個后臺接口，用于從數據庫中獲取對應新聞的內容并返回給瀏覽器。當請求成功時，服務器會返回一個HTML格式的數據，我們可以通過調用html方法將其更新到網頁相應的DOM元素中，從而在網頁上動態顯示新聞內容。

通過以上代碼，我們可以實現從數據庫中獲取新聞標題，并在網頁上動態展示。同時，用戶點擊新聞標題時，也能夠動態加載對應新聞的內容。這樣，我們可以通過AJAX技術提升用戶體驗，減少頁面加載時間，同時又能夠展示最新的新聞內容。