AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁的技術，能夠實現在不重新加載整個網頁的情況下，與服務器進行數據交互。而在AJAX中，使用.then是非常重要的一部分，它是Promise對象的方法之一，用于在異步操作完成后執行特定的回調函數。在本文中，我們將深入探討.then的用法及其示例，以幫助讀者更好地理解如何正確使用它。

首先，讓我們看一個簡單的示例來理解.then的基本用法。假設我們有一個按鈕，當點擊該按鈕時，我們想通過AJAX請求從服務器獲取一條隨機的笑話。我們可以使用以下代碼：

// 當按鈕被點擊時
button.addEventListener('click', function() {
// 發起AJAX請求
fetch('https://api.example.com/jokes/random')
.then(function(response) {
// 將響應轉換為JSON格式
return response.json();
})
.then(function(data) {
// 打印笑話
console.log(data.joke);
})
.catch(function(error) {
// 處理錯誤
console.log('出錯了：' + error);
});
});

在上面的代碼中，當按鈕被點擊時，我們使用fetch函數發起了一個AJAX請求，該函數返回一個Promise對象。然后我們通過使用.then方法進行鏈式調用，對響應進行處理以獲取我們所需的數據。在第一個.then中，我們使用response.json()將響應轉換為JSON格式的數據。在第二個.then中，我們可以訪問轉換后的數據，并執行任何需要的操作。如果發生錯誤，我們可以使用.catch方法捕獲異常并進行相應的處理。

.then本身也是一個返回Promise對象的方法，這意味著我們可以在一個.then中使用另一個.then來實現更復雜的操作。讓我們看一個更復雜的示例。假設我們有一個表單，我們想通過AJAX將用戶輸入的數據保存到服務器上。以下是相關的代碼：

// 當表單提交時
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
// 創建一個FormData對象，存儲表單數據
var formData = new FormData(form);
// 發起AJAX請求
fetch('https://api.example.com/save', {
method: 'POST',
body: formData
})
.then(function(response) {
if (response.ok) {
return response.json();
} else {
throw new Error('HTTP error');
}
})
.then(function(data) {
console.log('保存成功：' + data.message);
})
.catch(function(error) {
console.log('出錯了：' + error);
});
});

在上面的代碼中，我們使用fetch函數發起了一個POST請求，并將表單數據作為請求體進行發送。在第一個.then中，我們檢查響應的狀態碼，如果是200-299之間的成功狀態碼，我們解析響應的JSON數據。否則，我們拋出一個自定義的錯誤。在第二個.then中，我們可以訪問解析后的數據，并執行任何需要的操作。如果發生錯誤，我們可以使用.catch方法進行捕獲和處理。

總結來說，.then方法是在AJAX請求完成后執行回調函數的關鍵。使用.then能夠幫助我們更好地處理異步操作的結果，并根據實際情況進行相應的處理。通過本文中的示例，希望讀者能夠掌握.then的使用技巧，從而提高對AJAX的理解和運用。