AJAX取消请求

原创

堕落飞鸟

发布于 2023-05-19 01:11:11

2K00

代码可运行

文章被收录于专栏：飞鸟的专栏飞鸟的专栏

运行总次数：0

代码可运行

在进行 AJAX（Asynchronous JavaScript and XML）请求时，有时候我们需要取消正在进行的请求。取消请求可以帮助我们提高用户体验，并减少不必要的网络流量和服务器负载。

取消请求的方法

在 AJAX 请求中，我们可以使用以下方法来取消正在进行的请求：

使用 abort() 方法：使用 abort() 方法可以取消当前正在进行的 AJAX 请求。该方法会中断请求并终止与服务器的连接。

下面是一个示例，演示如何取消 AJAX 请求：

var xhr = $.ajax({
  url: 'example.php',
  method: 'GET',
  success: function(response) {
    console.log('请求成功：', response);
  },
  error: function(xhr, status, error) {
    console.log('请求失败：', error);
  }
});

// 取消请求
xhr.abort();

在上述示例中，我们使用 $.ajax() 方法发送一个 GET 请求到 example.php URL。我们将 AJAX 请求的返回值保存在 xhr 变量中。要取消请求，我们只需调用 abort() 方法即可。

注意事项

只能取消当前正在进行的请求。如果请求已经完成或已被取消，则 abort() 方法不会产生任何效果。
调用 abort() 方法后，将触发 error 回调函数。

示例场景

取消请求的一个常见场景是在用户触发某个动作后发送 AJAX 请求，并且在用户继续操作之前取消请求。例如，当用户输入搜索关键字时，我们可以实时发送 AJAX 请求来获取搜索结果。如果用户在输入过程中更改了关键字，我们希望取消之前的请求并发送新的请求。

下面是一个示例，演示在搜索场景中如何取消 AJAX 请求：

var searchTimeout;

$('#searchInput').on('input', function() {
  // 取消之前的请求
  if (searchTimeout !== undefined) {
    clearTimeout(searchTimeout);
  }

  var keyword = $(this).val();

  // 延迟 300 毫秒后发送新的请求
  searchTimeout = setTimeout(function() {
    $.ajax({
      url: 'search.php',
      method: 'GET',
      data: { keyword: keyword },
      success: function(response) {
        console.log('搜索结果：', response);
      },
      error: function(xhr, status, error) {
        console.log('请求失败：', error);
      }
    });
  }, 300);
});