AJAX（Asynchronous JavaScript and XML）是一種在網頁中實現異步通信的技術，它可以實現網頁的動態更新，讓用戶在不刷新頁面的情況下與服務器進行交互。通過使用AJAX，我們可以很方便地實現購物車數量的變化，為用戶提供更好的購物體驗。

假設我們正在開發一個電子商務網站，用戶可以在網站上選擇商品并將其加入購物車。在購物車頁面，用戶可以修改購物車中商品的數量。當用戶點擊“加一”按鈕時，我們可以通過AJAX向服務器發送請求，將購物車中商品的數量增加1。同樣地，當用戶點擊“減一”按鈕時，我們可以通過AJAX將購物車中商品的數量減少1。通過實時更新購物車中商品的數量，我們可以讓用戶更加直觀地了解他們的購物情況。

// HTML代碼片段
<div class="cart-info">
<h2>購物車</h2>
<p>商品數量：<span class="quantity"></span></p>
<button class="increment">加一</button>
<button class="decrement">減一</button>
</div>
// JavaScript代碼片段
var quantityElement = document.querySelector('.quantity');
var incrementButton = document.querySelector('.increment');
var decrementButton = document.querySelector('.decrement');
incrementButton.addEventListener('click', function() {
var currentQuantity = parseInt(quantityElement.innerText);
var newQuantity = currentQuantity + 1;
quantityElement.innerText = newQuantity;
// 使用AJAX發送請求，將新的數量保存到服務器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/update-cart?quantity=' + newQuantity);
xhr.onload = function() {
if (xhr.status === 200) {
console.log("商品數量已更新");
}
};
xhr.send();
});
decrementButton.addEventListener('click', function() {
var currentQuantity = parseInt(quantityElement.innerText);
var newQuantity = currentQuantity - 1;
quantityElement.innerText = newQuantity;
// 使用AJAX發送請求，將新的數量保存到服務器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/update-cart?quantity=' + newQuantity);
xhr.onload = function() {
if (xhr.status === 200) {
console.log("商品數量已更新");
}
};
xhr.send();
});

在上述代碼中，我們使用了JavaScript來處理用戶的點擊事件。當用戶點擊“加一”按鈕時，我們通過parseInt()函數將購物車中商品的當前數量解析為整數，并將其加1。然后，我們使用AJAX發送請求將新的數量保存到服務器，并在控制臺打印出一條確認消息。當用戶點擊“減一”按鈕時，我們通過相同的方式減少購物車中商品的數量。

實際上，我們的服務器端代碼也需要進行相應的更改。當接收到來自客戶端的更新數量的請求時，服務器需要保存新的數量到數據庫中，以便在用戶下一次訪問購物車時能正確地顯示商品的數量。

可以看出，通過使用AJAX來實現購物車數量的變化，我們可以實現購物車的實時更新，提供更好的用戶體驗。用戶可以在不刷新頁面的情況下直觀地了解他們的購物情況，并且可以方便地修改購物車中商品的數量。這將使用戶在購物過程中更加舒適和滿意。