在Web開發中，很多時候我們需要通過Ajax來進行異步請求。當Ajax請求完成后，有時候我們希望能夠執行一些特定的操作或者修改頁面的某些元素。本篇文章將詳細介紹Ajax執行完成后再進行的操作，通過實際舉例來說明。

在一個電商網站中，用戶可以將商品添加到購物車中。當用戶點擊“添加到購物車”按鈕時，頁面會通過Ajax請求將商品的ID發送給后臺。后臺根據ID將該商品添加到購物車中，并返回一個結果給前端頁面。

<button id="add-to-cart">添加到購物車</button>
<script>
// 監聽按鈕點擊事件
document.getElementById("add-to-cart").addEventListener("click", function() {
var productId = 123; // 假設商品ID為123
// 發送Ajax請求
var xhr = new XMLHttpRequest();
xhr.open("POST", "/add-to-cart", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// Ajax請求完成后進行的操作
if (response.success) {
updateCartCount(response.count); // 更新購物車數量
showSuccessMessage("商品已成功添加到購物車！"); // 顯示成功信息
} else {
showErrorMessage("添加失敗，請重試！"); // 顯示錯誤信息
}
}
};
xhr.send(JSON.stringify({ productId: productId }));
});
// 更新購物車數量
function updateCartCount(count) {
document.getElementById("cart-count").innerText = count;
}
// 顯示成功信息
function showSuccessMessage(message) {
var successMessage = document.getElementById("success-message");
successMessage.innerText = message;
successMessage.style.display = "block";
}
// 顯示錯誤信息
function showErrorMessage(message) {
var errorMessage = document.getElementById("error-message");
errorMessage.innerText = message;
errorMessage.style.display = "block";
}
</script>

在上述的代碼中，當用戶點擊按鈕時，首先會發送一個Ajax請求。如果請求成功，將返回一個JSON對象，其中包含成功添加到購物車的商品數量。根據這個數量，我們可以通過調用updateCartCount函數來實時更新頁面上的購物車數量。另外，如果成功添加到購物車，我們還可以通過調用showSuccessMessage函數來顯示一個成功的提示信息；如果失敗添加，則可以調用showErrorMessage函數來顯示一個失敗的提示信息。

除了在電商網站中，Ajax請求完成后再進行的操作也可以應用于其他場景。比如，在一個社交媒體平臺上，用戶可以通過Ajax請求發送私信給好友。當Ajax請求完成后，我們可以通過調用一個函數來更新頁面上的私信列表，并通過調用另一個函數來彈出一個發送成功的提示框。

總的來說，Ajax請求執行完畢后再進行特定的操作，可以實現頁面與用戶的交互，使用戶可以獲得及時的反饋。我們可以根據請求的結果，動態修改頁面的某些元素，或者顯示相應的提示信息，提升用戶體驗。在實際開發中，通過合理地利用這一特性，我們可以更好地滿足用戶的需求。