Ajax（Asynchronous JavaScript and XML）是一种用于在Web页面上更新部分内容的技术。它通过使用JavaScript和XML（现在通常使用JSON）进行异步通信，可以实现无需刷新整个页面而只更新指定部分的效果。在这篇文章中，我们将重点介绍如何使用Ajax的方式来获取HTML内容，并通过使用div元素来显示这些内容。

假设我们有一个网站上的div元素，希望通过Ajax获取一个外部HTML文件的内容，并将其显示在这个div中。使用Ajax，我们可以通过以下代码实现这个功能：

<script>
// 创建XMLHttpRequest对象
var xhttp = new XMLHttpRequest();
// 设置请求的方法和URL
xhttp.open("GET", "external.html", true);
// 注册请求完成后的回调函数
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 将获取到的HTML内容显示在div元素中
document.getElementById("myDiv").innerHTML = this.responseText;
}
};
// 发送请求
xhttp.send();
</script>

上面的代码首先创建了一个XMLHttpRequest对象（常简称为XHR），用于向服务器发送异步请求。然后，通过调用open方法设置请求的方法（GET）和URL（在这个例子中为external.html）。接着，我们注册了一个回调函数（onreadystatechange），该函数在请求状态改变时被调用。在回调函数中，我们首先检查了请求状态和响应状态码，当都满足要求时，我们将获取到的HTML内容赋值给id为myDiv的div元素的innerHTML属性，即将其显示在页面中。最后，我们调用send方法将请求发送给服务器。

下面是一个实际应用的例子。假设我们有一个电商网站，需要展示商品的详细信息。当用户点击商品列表中的某个商品时，我们希望通过Ajax获取该商品的详细信息，并在页面中显示出来。我们可以如下所示实现这个功能：

<script>
// 创建XMLHttpRequest对象
var xhttp = new XMLHttpRequest();
// 注册点击事件的处理函数
document.getElementById("productList").addEventListener("click", function(event) {
// 确定用户点击的是哪个商品
var productId = event.target.getAttribute("data-product-id");
// 设置请求的方法和URL
xhttp.open("GET", "product.php?id=" + productId, true);
// 注册请求完成后的回调函数
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 将获取到的商品详细信息显示在div元素中
document.getElementById("productDetails").innerHTML = this.responseText;
}
};
// 发送请求
xhttp.send();
});
</script>

在这个例子中，我们首先通过addEventListener方法注册了点击事件的处理函数。当用户点击商品列表中的某个商品时，我们将获取到该商品的id，并拼接到请求URL中。接着，我们使用Ajax的方式发送请求，并通过回调函数将获取到的商品详细信息显示在id为productDetails的div元素中。

通过使用Ajax的方式获取HTML内容，并通过div元素显示这些内容，我们可以实现更流畅且用户友好的Web页面。无论是更新部分内容，展示商品详情，还是获取动态数据，Ajax都是一种非常有用的技术。