在前端开发中，我们通常会使用 AJAX 技术来向服务器请求数据。但有时候我们可能需要取消正在进行的 AJAX 请求，比如用户在进行搜索时，如果频繁地输入关键词，就会发出多个 AJAX 请求，这时候就需要取消之前的 AJAX 请求，以避免对服务器的负载造成影响。
本文将介绍如何使用 jQuery 的 .ajax 方法取消正在进行的 AJAX 请求，并提供相应的示例代码。
什么是 AJAX 请求？
AJAX 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的缩写。它通过使用 XMLHttpRequest 对象与服务器进行数据交换，能够实现页面无需刷新即可更新数据的效果。AJAX 常用于向服务器获取 JSON、XML、HTML 或纯文本等格式的数据。
开始一个 AJAX 请求
可以使用 jQuery 的 .ajax() 方法发起一个 AJAX 请求。例如：
-- -------------------- ---- -------
--------
---- ------------
------- ------
----- ---- -------
-------- ------------------ -
----------------------
--
------ ------------- ------- ------ -
---------------------
-
---以上代码向 /api/data 发送了一个 GET 请求，请求参数为 {id: "123"}，当请求成功时会打印服务器返回的数据，当请求失败时会输出错误信息。除了 GET 请求，.ajax() 方法还支持 POST、PUT、DELETE 等方法。
取消一个 AJAX 请求
当一个 AJAX 请求已经发出，但是此时用户可能取消了这个请求或者需要重新发起一个新的请求时，我们就需要取消之前正在进行的 AJAX 请求。具体实现方法如下：
-- -------------------- ---- -------
--- --- - --------
---- ------------
------- ------
----- ---- -------
-------- ------------------ -
----------------------
--
------ ------------- ------- ------ -
---------------------
-
---
-- ------- ---- ----------
------------以上代码通过调用 .abort() 方法来终止 AJAX 请求。注意，这里的 xhr 是 .ajax() 方法返回的 XMLHttpRequest 对象，而不是 .ajax() 方法本身。
取消多个 AJAX 请求
如果需要同时发起多个 AJAX 请求并且需要对它们进行统一的管理，可以使用 jQuery 的 .when() 和 .then() 方法。例如：
-- -------------------- ---- -------
--- -------- - ---
----------------------
---- ------------
------- ------
----- ---- ------
----
----------------------
---- ------------------
------- ------
----- ---- ------
----
--------------- ------------------------- -
-- -- ---- ------
-- ---------- -
-- ---- ---- --
--- ---- - - -- - - ---------------- ---- -
--------------------
-
---以上代码发起了两个 AJAX 请求，并将它们存储在 requests 数组中。然后使用 .when() 方法等待所有 AJAX 请求完成，并在所有请求完成后执行 .then() 方法中的回调函数。如果不希望等待所有 AJAX 请求完成而是要取消它们，则可以在 .then() 方法的失败回调函数中遍历 requests 数组并调用 .abort() 方法来取消所有 AJAX 请求。
总结
以上就是如何使用 jQuery 的 .ajax 方法取消正在进行的 AJAX 请求的介绍。通过以上方法，我们可以更好地控制 AJAX 请求的发起和取消，提高页面的性能和用户体验。
示例代码：
-- -------------------- ---- -------
-- ---- ---- --
--- --- - --------
---- ------------
------- ------
----- ---- -------
-------- ------------------ -
----------------------
--
------ ------------- ------- ------ -
---------------------
-
---
-- ---- ---- --
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------