AJAX是一種通過在后臺與服務(wù)器進(jìn)行數(shù)據(jù)交換而無需重新加載整個頁面的技術(shù)。它可以通過異步請求從服務(wù)器獲取HTML頁面的數(shù)據(jù)，為用戶提供更流暢和無刷新的瀏覽體驗(yàn)。在本文中，我們將詳細(xì)討論如何使用AJAX從HTML頁面中獲取數(shù)據(jù)，以及一些實(shí)際例子來說明它的應(yīng)用。

要使用AJAX獲取HTML頁面的數(shù)據(jù)，我們可以使用JavaScript的XMLHttpRequest對象來發(fā)送異步HTTP請求。通過發(fā)送GET或POST請求，我們可以與服務(wù)器建立連接并獲取需要的HTML頁面數(shù)據(jù)。以一個簡單的例子來說明：

//創(chuàng)建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//指定請求的類型和URL
xhr.open('GET', 'data.html', true);
//發(fā)送請求
xhr.send();
//監(jiān)聽readyState的變化
xhr.onreadystatechange = function() {
//當(dāng)readyState為4且status為200時，表示請求已成功完成
if (xhr.readyState === 4 && xhr.status === 200) {
//獲取服務(wù)器返回的HTML頁面數(shù)據(jù)
var data = xhr.responseText;
//對數(shù)據(jù)進(jìn)行處理
console.log(data);
}
};

上述代碼通過創(chuàng)建XMLHttpRequest對象，并使用open函數(shù)指定請求的類型和URL。通過send函數(shù)發(fā)送請求，然后使用onreadystatechange事件監(jiān)聽readyState的變化。當(dāng)readyState為4且status為200時，表示請求已成功完成，我們可以從xhr對象的responseText屬性中獲取服務(wù)器返回的HTML頁面數(shù)據(jù)。

接下來，我們將通過一個實(shí)際的例子來詳細(xì)說明如何使用AJAX從HTML頁面獲取數(shù)據(jù)。假設(shè)我們有一個電影列表的HTML頁面，每個電影都有一個標(biāo)題和一個介紹。我們希望通過AJAX從服務(wù)器獲取電影列表數(shù)據(jù)，并顯示在頁面上。

//創(chuàng)建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//指定請求的類型和URL
xhr.open('GET', 'movies.html', true);
//發(fā)送請求
xhr.send();
//監(jiān)聽readyState的變化
xhr.onreadystatechange = function() {
//當(dāng)readyState為4且status為200時，表示請求已成功完成
if (xhr.readyState === 4 && xhr.status === 200) {
//獲取服務(wù)器返回的HTML頁面數(shù)據(jù)
var html = xhr.responseText;
//將獲取到的HTML頁面數(shù)據(jù)插入到頁面中
var container = document.getElementById('container');
container.innerHTML = html;
}
};

上述代碼通過發(fā)送GET請求，獲取服務(wù)器返回的HTML頁面數(shù)據(jù)，并將數(shù)據(jù)插入到id為container的元素中。這樣，我們就可以實(shí)現(xiàn)動態(tài)加載電影列表的效果。

總而言之，AJAX使我們能夠輕松地從HTML頁面中獲取數(shù)據(jù)，提供了更流暢和無刷新的用戶體驗(yàn)。通過使用XMLHttpRequest對象和合適的請求類型，我們可以與服務(wù)器進(jìn)行交互，并獲取所需的HTML頁面數(shù)據(jù)。以上例子只是AJAX在獲取HTML頁面數(shù)據(jù)方面的冰山一角，它還有許多其他用途和功能，使我們能夠更好地利用Web技術(shù)。