Ajax（Asynchronous JavaScript and XML）是一種用于在Web頁面上更新部分內(nèi)容的技術(shù)。它通過使用JavaScript和XML（現(xiàn)在通常使用JSON）進(jìn)行異步通信，可以實(shí)現(xiàn)無需刷新整個(gè)頁面而只更新指定部分的效果。在這篇文章中，我們將重點(diǎn)介紹如何使用Ajax的方式來獲取HTML內(nèi)容，并通過使用div元素來顯示這些內(nèi)容。

假設(shè)我們有一個(gè)網(wǎng)站上的div元素，希望通過Ajax獲取一個(gè)外部HTML文件的內(nèi)容，并將其顯示在這個(gè)div中。使用Ajax，我們可以通過以下代碼實(shí)現(xiàn)這個(gè)功能：

<script>
// 創(chuàng)建XMLHttpRequest對(duì)象
var xhttp = new XMLHttpRequest();
// 設(shè)置請(qǐng)求的方法和URL
xhttp.open("GET", "external.html", true);
// 注冊(cè)請(qǐng)求完成后的回調(diào)函數(shù)
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 將獲取到的HTML內(nèi)容顯示在div元素中
document.getElementById("myDiv").innerHTML = this.responseText;
}
};
// 發(fā)送請(qǐng)求
xhttp.send();
</script>

上面的代碼首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象（常簡(jiǎn)稱為XHR），用于向服務(wù)器發(fā)送異步請(qǐng)求。然后，通過調(diào)用open方法設(shè)置請(qǐng)求的方法（GET）和URL（在這個(gè)例子中為external.html）。接著，我們注冊(cè)了一個(gè)回調(diào)函數(shù)（onreadystatechange），該函數(shù)在請(qǐng)求狀態(tài)改變時(shí)被調(diào)用。在回調(diào)函數(shù)中，我們首先檢查了請(qǐng)求狀態(tài)和響應(yīng)狀態(tài)碼，當(dāng)都滿足要求時(shí)，我們將獲取到的HTML內(nèi)容賦值給id為myDiv的div元素的innerHTML屬性，即將其顯示在頁面中。最后，我們調(diào)用send方法將請(qǐng)求發(fā)送給服務(wù)器。

下面是一個(gè)實(shí)際應(yīng)用的例子。假設(shè)我們有一個(gè)電商網(wǎng)站，需要展示商品的詳細(xì)信息。當(dāng)用戶點(diǎn)擊商品列表中的某個(gè)商品時(shí)，我們希望通過Ajax獲取該商品的詳細(xì)信息，并在頁面中顯示出來。我們可以如下所示實(shí)現(xiàn)這個(gè)功能：

<script>
// 創(chuàng)建XMLHttpRequest對(duì)象
var xhttp = new XMLHttpRequest();
// 注冊(cè)點(diǎn)擊事件的處理函數(shù)
document.getElementById("productList").addEventListener("click", function(event) {
// 確定用戶點(diǎn)擊的是哪個(gè)商品
var productId = event.target.getAttribute("data-product-id");
// 設(shè)置請(qǐng)求的方法和URL
xhttp.open("GET", "product.php?id=" + productId, true);
// 注冊(cè)請(qǐng)求完成后的回調(diào)函數(shù)
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 將獲取到的商品詳細(xì)信息顯示在div元素中
document.getElementById("productDetails").innerHTML = this.responseText;
}
};
// 發(fā)送請(qǐng)求
xhttp.send();
});
</script>

在這個(gè)例子中，我們首先通過addEventListener方法注冊(cè)了點(diǎn)擊事件的處理函數(shù)。當(dāng)用戶點(diǎn)擊商品列表中的某個(gè)商品時(shí)，我們將獲取到該商品的id，并拼接到請(qǐng)求URL中。接著，我們使用Ajax的方式發(fā)送請(qǐng)求，并通過回調(diào)函數(shù)將獲取到的商品詳細(xì)信息顯示在id為productDetails的div元素中。

通過使用Ajax的方式獲取HTML內(nèi)容，并通過div元素顯示這些內(nèi)容，我們可以實(shí)現(xiàn)更流暢且用戶友好的Web頁面。無論是更新部分內(nèi)容，展示商品詳情，還是獲取動(dòng)態(tài)數(shù)據(jù)，Ajax都是一種非常有用的技術(shù)。