AJAX（Asynchronous JavaScript and XML）是一种基于浏览器的异步通信技术，它可以在不重新加载整个页面的情况下，通过与服务器进行数据交换，实现动态更新内容。

AJAX通信可以分为异步与同步两种方式。在异步通信中，页面无需等待服务器的响应，可以继续执行其他操作。而在同步通信中，页面需等待服务器返回响应后才能执行后续操作。

假设我们有一个在线购物网站，用户在购物车中添加商品时，服务器需要处理并返回购物车的当前状态。下面我们将通过举例来对比AJAX异步通信与普通的提交方式。

首先，我们看一下使用普通提交方式的情况。用户点击添加商品到购物车按钮后，浏览器发送一个POST请求给服务器，将商品信息以表单的方式传递给服务器。服务器接收请求后，处理数据并返回一个带有更新后购物车信息的 HTML 页面。浏览器在接收到响应后，会重新加载整个页面，刷新购物车内容。

<form method="post" action="/addToCart">
<input type="hidden" name="product_id" value="123">
<input type="number" name="quantity" value="1">
<input type="submit" value="Add to Cart">
</form>

使用 AJAX 异步通信的方式，用户点击添加商品到购物车按钮后，浏览器通过 JavaScript 发送一个异步的 POST 请求给服务器，传递商品信息。服务器接收请求后，处理数据并返回一个 JSON 格式的响应，其中包含了更新后的购物车信息。浏览器在接收到响应后，可以通过 JavaScript 更新购物车的显示内容，而不需要重新加载整个页面。

function addToCart() {
const product_id = 123;
const quantity = 1;
const xhr = new XMLHttpRequest();
xhr.open("POST", "/addToCart", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
const response = JSON.parse(xhr.responseText);
updateCart(response);
}
};
xhr.send(JSON.stringify({ product_id, quantity }));
}
function updateCart(cart) {
// 更新购物车显示内容
}

从上面的对比可以看出，使用 AJAX 异步通信可以提升用户体验，因为页面无需刷新，用户可以继续浏览网站而不受影响。此外，AJAX 异步通信还可以减轻服务器的负载，因为服务器只需返回更新后的数据，而不需要生成整个页面。

然而，AJAX 异步通信也有一些局限性。由于浏览器的同源策略，AJAX 请求只能与同域名、同端口和同协议的服务器进行通信。如果需要与其他域的服务器通信，需要通过跨域资源共享（CORS）等机制进行配置。

综上所述，AJAX 异步通信在现代 Web 开发中起到了重要的作用。它能够提供更好的用户体验，并提升网站的性能和可扩展性。