AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上進行異步數據交互的技術。通常情況下，一旦AJAX請求發起，就會在后臺一直執行直到完成或失敗。然而，有些時候我們可能需要取消正在執行的AJAX請求。本文將介紹在什么情況下可以取消AJAX請求，并通過舉例進行說明。

一種常見的情況是用戶進行了一次AJAX請求，但在請求完成之前又發起了另一個請求。比如，一個在線商城網站上的搜索欄，當用戶在搜索欄中輸入關鍵詞時，網站會自動根據關鍵詞提供搜索結果。用戶可能會連續不斷地修改搜索關鍵詞，每次修改都發起一個AJAX請求。在這種情況下，如果前一次請求仍然在后臺執行，而用戶已經不再關心那些搜索結果，就可以考慮取消前一次請求。

<script>
var xhr = null; // 保存當前AJAX請求的變量
function search(keyword) {
if (xhr != null) { // 如果前一次請求仍在執行，先取消
xhr.abort();
}
xhr = $.ajax({
url: "search.php",
type: "GET",
data: { keyword: keyword },
success: function(response) {
// 處理搜索結果
},
error: function(xhr, status, error) {
// 處理錯誤
}
});
}
</script>

上述代碼示例中，我們使用了jQuery庫中的`$.ajax`方法來發起AJAX請求。在`search`函數中，我們首先檢查`xhr`變量是否已經被賦值，如果不為空，則代表前一次請求仍在執行，我們通過`xhr.abort()`方法取消前一次請求。然后，我們使用`$.ajax`方法發起新的AJAX請求，該方法返回的對象被賦值給`xhr`變量，以便以后取消使用。

另一種場景是頁面跳轉或刷新。當用戶正在進行AJAX請求時，如果用戶執行了頁面跳轉或刷新操作，通常我們希望取消正在執行的請求，以避免不必要的網絡請求和資源浪費。下面是一個示例：

<script>
// 檢測頁面的unload事件
window.addEventListener("beforeunload", function(event) {
if (xhr != null) { // 如果當前有AJAX請求正在執行，取消它
xhr.abort();
}
});
function submitForm() {
xhr = $.ajax({
url: "submit.php",
type: "POST",
data: $("#form").serialize(),
success: function(response) {
// 處理成功響應
},
error: function(xhr, status, error) {
// 處理錯誤
}
});
}
</script>

在上述代碼中，我們通過`window.addEventListener`方法監聽了頁面的`beforeunload`事件，該事件在頁面即將被卸載前觸發。在事件處理函數中，我們檢查`xhr`變量是否被賦值，如果不為空，則取消當前正在執行的AJAX請求。這樣，在用戶進行頁面跳轉或刷新操作時，正在執行的請求會被取消。

總結起來，可以在以下情況下取消正在執行的AJAX請求：當用戶發起了新的請求，而前一次請求還未完成；當頁面即將被卸載或刷新時。通過適當的代碼處理，我們可以有效地取消AJAX請求，提高頁面性能和用戶體驗。