Ajax（Asynchronous JavaScript and XML）是一種在網頁中向服務器發送異步請求并動態更新頁面內容的技術。在進行Ajax請求時，我們常常需要監聽請求完成的事件，以便在請求完成后執行一些操作。這個事件就是complete事件。本文將詳細介紹Ajax的complete事件，并舉例說明其使用方法和效果。
在Ajax中，complete事件會在請求完成后觸發，無論是請求成功還是失敗。這使得我們可以在請求返回后執行一些后續操作，例如更新頁面內容、處理返回數據等。下面以一個簡單的例子來說明complete事件的使用。
假設我們有一個網頁，上面有一個按鈕，點擊按鈕后會通過Ajax向服務器發送一個請求，并在請求完成后顯示返回的數據。我們可以通過以下代碼實現這個功能：

html
<button id="btn">發送請求</button>
<div id="result"></div>

javascript
$(document).ready(function() {
$('#btn').click(function() {
$.ajax({
url: 'example.com/api',
method: 'GET',
dataType: 'json',
complete: function(response) {
$('#result').text(response.responseText);
}
});
});
});

在上述代碼中，我們首先使用jQuery選擇器選取按鈕元素，并為其綁定點擊事件。當按鈕被點擊時，會執行一個Ajax請求。請求的URL為example.com/api，請求方法為GET，數據類型為JSON。在complete事件的回調函數中，我們將返回的數據設置為一個div元素的文本內容。
通過上述代碼，當按鈕被點擊時，Ajax請求會被發送至服務器，并在請求完成后，服務器返回的數據會被顯示在頁面上。這個過程是異步的，即在請求的同時可以進行其他操作，例如同時請求其他資源、響應其他用戶的操作等。
除了在請求完成后處理返回的數據外，complete事件還可以用來處理請求失敗的情況。例如，在上述例子中，如果請求失敗了，我們可以在complete事件中進行一些錯誤處理，例如顯示一個錯誤消息或者重試請求等。下面的代碼展示了一個處理請求失敗的例子：

javascript
$(document).ready(function() {
$('#btn').click(function() {
$.ajax({
url: 'example.com/api',
method: 'GET',
dataType: 'json',
complete: function(response) {
if (response.status == 200) {
$('#result').text(response.responseText);
} else {
$('#result').text('請求失敗，請重試！');
}
}
});
});
});

在上述代碼中，我們通過判斷response對象的status屬性是否為200來確定請求是否成功。如果請求成功，我們將返回的數據顯示在頁面上；如果請求失敗，我們顯示一個錯誤消息。
總之，Ajax的complete事件在發送異步請求后發揮著重要的作用，不僅可以處理請求成功時的情況，還可以處理請求失敗時的情況。通過使用complete事件，我們可以靈活地處理請求的返回數據，并根據具體情況進行后續操作。這使得我們能夠更好地優化用戶體驗，并提升網頁的性能。