AJAX（Asynchronous JavaScript and XML）是一種在無需刷新整個頁面的情況下與服務器進行數據交互的技術。它可以異步地從服務器獲取數據，并在網頁上動態顯示這些數據，提高用戶體驗。在本文中，我們將探討如何使用AJAX獲取HTML頁面數據的方法和技巧。

假設我們有一個網頁上展示了一個文章列表，每個文章都有一個標題和一段簡要介紹。我們需要通過AJAX從服務器獲取文章數據，并在網頁上展示出來。首先，我們需要在HTML頁面上定義一個容器，用于展示文章列表：

<div id="articleList"></div>

接下來，我們需要使用JavaScript編寫AJAX請求的代碼。我們可以使用XMLHttpRequest對象來發送AJAX請求，并指定請求類型為GET。下面是一個使用純JavaScript實現的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/articles', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var articles = JSON.parse(xhr.responseText);
displayArticles(articles);
}
};
xhr.send();

上面的代碼首先創建了一個新的XMLHttpRequest對象，并使用open方法指定請求類型為GET，并設置要發送的請求URL。然后，我們使用onreadystatechange事件監聽請求狀態的變化，一旦請求完成（readyState為4）并且響應狀態為200（成功），我們解析響應的文本內容，并調用displayArticles函數展示文章列表。

在displayArticles函數中，我們可以通過遍歷獲取到的文章數組，動態地生成HTML元素來顯示文章列表。下面是一個簡單的displayArticles函數的實現：

function displayArticles(articles) {
var articleList = document.getElementById('articleList');
for (var i = 0; i < articles.length; i++) {
var articleTitle = document.createElement('h2');
articleTitle.textContent = articles[i].title;
var articleDescription = document.createElement('p');
articleDescription.textContent = articles[i].description;
articleList.appendChild(articleTitle);
articleList.appendChild(articleDescription);
}
}

上面的代碼中，我們首先獲取文章列表的容器，然后通過遍歷文章數組，在容器中動態生成文章標題和描述的HTML元素，并將它們添加到容器中。這樣，通過AJAX獲取的文章數據就可以在網頁上動態顯示出來了。

總結起來，使用AJAX獲取HTML頁面數據可以讓網頁在不刷新的情況下實時展示動態數據。通過合理地使用AJAX技術，我們可以提高網頁的用戶體驗，并增加交互性。無論是獲取文章數據，還是獲取其他類型的數據，AJAX都是一個強大而靈活的工具。