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 開發中起到了重要的作用。它能夠提供更好的用戶體驗，并提升網站的性能和可擴展性。