Ajax（Asynchronous JavaScript and XML）是一種前端技術，用于在不刷新整個頁面的情況下，通過異步請求獲取服務器端的數據。通過Ajax，我們可以輕松地獲取另一個頁面中的div中的文章內容。不僅可以優化用戶體驗，減少頁面加載時間，還能使頁面內容更加動態和可交互。以下將詳細介紹如何使用Ajax獲取另一個頁面div中的文章內容。
以一個新聞網站為例，假設我們的網站主頁上有一個“熱門新聞”板塊，顯示了幾條最近更新的熱門新聞標題。當用戶點擊某個新聞標題時，我們希望通過Ajax從服務器端獲取該新聞的詳細內容，以便在同一個頁面上展示出來。
首先，在HTML中定義一個具有獨特id的div，用于顯示新聞內容。例如：

html
<div id="newsContent"></div>

接下來，使用JavaScript編寫Ajax請求函數，通過該函數從服務器端獲取新聞內容。以下是一個示例函數：

javascript
function getNewsContent(newsId) {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽XMLHttpRequest對象的onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 更新div中的內容
document.getElementById("newsContent").innerHTML = xhr.responseText;
}
};
// 發送異步GET請求
xhr.open("GET", "getNewsContent.php?id=" + newsId, true);
xhr.send();
}

在函數中，我們首先創建了一個XMLHttpRequest對象，用于發送HTTP請求，并通過onreadystatechange事件監聽函數來處理請求的響應。如果readyState為4（表示請求已完成）且status為200（表示請求成功），則將服務器返回的新聞內容更新到div中。
使用此函數，我們可以在頁面上為每個新聞標題添加一個點擊事件，以便獲取其中的新聞內容。例如，我們在JavaScript中為網頁上的新聞標題添加了一個點擊事件：

javascript
var newsTitles = document.getElementsByClassName("newsTitle");
for (var i = 0; i < newsTitles.length; i++) {
var newsId = newsTitles[i].getAttribute("data-news-id");
// 添加點擊事件處理函數
newsTitles[i].addEventListener("click", function() {
getNewsContent(newsId);
});
}

在上述代碼中，我們使用了getElementsByClassName函數獲取到所有具有“newsTitle”類名的元素，并為每個新聞標題元素添加了點擊事件。當用戶點擊某個新聞標題時，將通過函數getNewsContent獲取對應的新聞內容并展示出來。
通過以上代碼，我們可以實現在主頁上通過Ajax獲取另一個頁面div中的文章內容。用戶點擊新聞標題后，不需要刷新整個頁面即可顯示該新聞的詳細內容。這樣不僅提高了用戶體驗，還減少了整個頁面的加載時間，使網站更加動態和可交互。