AJAX（Asynchronous JavaScript and XML）可以實現網頁動態的更新內容，為網頁帶來更好的用戶體驗。本文將介紹如何使用AJAX實現商品收藏功能。

在一個電商網站上，用戶經常會遇到心儀的商品，希望能夠將其存入自己的收藏夾中隨時查看。而傳統的方式是刷新網頁或者跳轉到收藏夾頁面進行操作，繁瑣且不夠直觀。使用AJAX，用戶可以在不離開當前頁面的情況下將商品添加到收藏夾中，實現即時的反饋。

在前端代碼中，我們可以監聽“收藏”按鈕的點擊事件，并使用AJAX將商品的信息發送給后端服務器。以下是一段使用jQuery實現AJAX的示例代碼：

$("#collect-button").click(function(){
var productId = $(this).data("id");
$.ajax({
url: "/api/add-to-favorites",
type: "POST",
data: {id: productId},
success: function(response){
if(response.success){
alert("商品已成功添加到收藏夾！");
}else{
alert("添加失敗，請稍后再試。");
}
},
error: function(){
alert("網絡錯誤，請稍后再試。");
}
});
});

上述代碼中，我們首先獲取了“收藏”按鈕上的商品ID，然后使用AJAX向后端發送了一個POST請求，請求的URL指向后端的收藏夾API接口。數據部分包含了商品ID，后端根據這個信息將商品添加到指定用戶的收藏夾中。

在后端代碼中，我們可以使用相應的后端框架（如Django、Express等）來處理這個請求，并將結果返回給前端。以下是一個Node.js Express框架的示例代碼：

app.post('/api/add-to-favorites', function(req, res){
var productId = req.body.id;
// 將商品添加到收藏夾的邏輯代碼
// ...
// 返回結果給前端
res.json({success: true});
});

在這個示例代碼中，我們通過req.body獲取到了前端發送過來的商品ID，并在后端進行了相應的邏輯處理。處理完成后，我們使用res.json返回了一個JSON對象，告訴前端操作是否成功。

通過上述的前后端代碼示例，我們就成功地實現了商品收藏功能。使用AJAX可以大大提高用戶的操作效率和體驗，他們無需離開當前頁面就可以將商品添加到收藏夾中，輕松管理心儀的商品。這是AJAX在電商網站中的一個實際應用場景，我們相信它會為用戶帶來更好的購物體驗。