AJAX是一種技術，可以在不重新加載整個網頁的情況下，通過異步方式向服務器發送請求并獲取數據。在使用AJAX時，我們經常會用到callback函數，它是在請求完成后被調用的函數。在本文中，我們將探討如何編寫AJAX callback函數以及一些常見的應用場景。

首先，讓我們來看一個簡單的例子。假設我們有一個網頁上的按鈕，當用戶點擊該按鈕時，我們需要通過AJAX請求從服務器獲取一些數據，并在頁面上顯示出來。在這種情況下，我們可以將顯示數據的代碼包裝在callback函數中。

function getData() {
// 創建一個AJAX對象并設置請求參數
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/api/data", true);
// 注冊一個回調函數來處理請求完成后的操作
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
displayData(data); // 調用顯示數據的函數
}
};
// 發送請求
xhttp.send();
}
function displayData(data) {
// 將數據顯示在頁面上
document.getElementById("data-container").innerHTML = data;
}

在上面的例子中，我們定義了一個名為getData的函數，在該函數中創建了一個AJAX對象并設置了請求參數。然后，我們注冊了一個名為xhttp.onreadystatechange的回調函數，該函數在請求的狀態發生變化時被調用。

在回調函數中，我們首先檢查請求的readyState是否為4，status是否為200。readyState為4表示請求已完成，status為200表示請求已成功。如果條件成立，我們解析返回的JSON數據并將其傳遞給displayData函數。在這個例子中，displayData函數負責將數據顯示在頁面上。

除了在AJAX請求完成后執行某些操作之外，callback函數還可以用于處理錯誤情況。例如，如果請求發生錯誤或超時，我們可以定義一個錯誤回調函數來執行相應的操作。

function errorHandler() {
// 處理請求錯誤的情況
alert("請求出錯，請稍后再試。");
}
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/api/data", true);
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
var data = JSON.parse(this.responseText);
displayData(data);
} else {
errorHandler(); // 調用錯誤處理函數
}
}
};
xhttp.send();
}

在上面的代碼中，我們定義了一個名為errorHandler的函數，用于處理請求錯誤的情況。當請求的狀態為4時，我們首先檢查請求的狀態碼。如果狀態碼不等于200，說明請求出錯，我們將調用errorHandler函數來處理該錯誤。這樣，無論是成功獲取數據還是出現錯誤，我們都能通過callback函數來完成相應的操作。

綜上所述，callback函數在AJAX請求中起著非常重要的作用。它可以幫助我們在請求完成后執行特定的操作，無論是顯示數據、處理錯誤還是其他操作。通過合理地使用callback函數，我們可以更好地控制網頁的交互行為和響應速度。