AJAX（Asynchronous JavaScript and XML）是一種在 web 應用中使用的技術，它可以在不重新加載整個頁面的情況下與服務器進行數據交換和更新。在 AJAX 中，callback 屬性扮演著重要的角色。它允許您指定在異步請求完成后要執行的特定函數。callback 函數允許我們在收到服務器響應后做出相應的處理，例如更新頁面內容、執行其他操作或顯示用戶消息。

了解 callback 屬性的功能可以通過一個簡單的例子來理解。假設我們正在開發一個電子商務網站，當用戶點擊“添加到購物車”按鈕時，我們希望將所選產品添加到購物車并更新購物車中的產品數目。為了實現這個功能，我們需要使用 AJAX 來發送異步請求，而 callback 屬性將指定在請求完成后要執行的函數。

const addToCart = (productId) => {
// 創建 XMLHttpRequest 對象
let xhr = new XMLHttpRequest();
// 設置請求的回調函數
xhr.onload = function() {
// 更新購物車圖標上的數字
updateCartCount();
};
// 打開并發送異步請求
xhr.open('POST', '/addToCart', true);
xhr.send(JSON.stringify({ id: productId }));
}
const updateCartCount = () => {
// 更新購物車圖標上的數字
let cartCount = document.getElementById('cart-count');
cartCount.innerHTML = parseInt(cartCount.innerHTML) + 1;
}

在這個例子中，addToCart 函數通過創建 XMLHttpRequest 對象并使用 open 和 send 方法來發送異步請求。然后，我們使用 callback 屬性來指定在請求完成后要執行的函數。在這種情況下，callback 函數是 updateCartCount，它用于更新購物車圖標上顯示的產品數目。當用戶點擊“添加到購物車”按鈕時，addToCart 函數將被調用，并執行異步請求。一旦請求完成，callback 函數 updateCartCount 將被調用來更新購物車圖標上的數字。

callback 屬性可以被用于處理各種不同的情況和需求。例如，我們可以使用 callback 函數來處理服務器返回的數據，以便進行進一步的操作。假設我們正在開發一個博客網站，希望在用戶提交評論后立即更新評論區域。我們可以使用 AJAX 發送異步請求，并在 callback 函數中更新評論區域的內容。

const submitComment = (comment) => {
// 創建 XMLHttpRequest 對象
let xhr = new XMLHttpRequest();
// 設置請求的回調函數
xhr.onload = function() {
// 更新評論區域的內容
updateComments();
};
// 打開并發送異步請求
xhr.open('POST', '/submitComment', true);
xhr.send(JSON.stringify({ comment: comment }));
}
const updateComments = () => {
// 更新評論區域的內容
let comments = document.getElementById('comments');
// ...
}

在這個例子中，submitComment 函數通過 AJAX 發送異步請求，而 callback 函數 updateComments 則用于更新評論區域的內容。當用戶提交評論時，submitComment 函數將被調用，并執行異步請求。一旦請求完成，callback 函數 updateComments 將被調用來更新評論區域的內容。

通過使用 callback 屬性，我們可以在異步請求完成后執行特定的操作。這使得我們能夠實時更新頁面內容，響應用戶交互，以及執行其他自定義的函數。無論是購物車網站還是博客網站，在 AJAX 中合理使用 callback 屬性可以提高用戶體驗，使網站更加動態和響應。