是否可以使用jQuery取消/中止尚未收到响应的Ajax请求?


当前回答

您可以使用以下命令中止任何连续的ajax调用

<input id="searchbox" name="searchbox" type="text" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
     var request = null;
        $('#searchbox').keyup(function () {
            var id = $(this).val();
            request = $.ajax({
                type: "POST", //TODO: Must be changed to POST
                url: "index.php",
                data: {'id':id},
                success: function () {
    
                },
                beforeSend: function () {
                    if (request !== null) {
                        request.abort();
                    }
                }
            });
        });
</script>

其他回答

我已经分享了一个演示,演示了如何取消AJAX请求——如果在预定义的等待时间内没有从服务器返回数据。

HTML格式:

<div id="info"></div>

JS代码:

var isDataReceived= false, waitTime= 1000; 
$(function() {
    // Ajax request sent.
     var xhr= $.ajax({
      url: 'http://api.joind.in/v2.1/talks/10889',
      data: {
         format: 'json'
      },     
      dataType: 'jsonp',
      success: function(data) {      
        isDataReceived= true;
        $('#info').text(data.talks[0].talk_title);        
      },
      type: 'GET'
   });
   // Cancel ajax request if data is not loaded within 1sec.
   setTimeout(function(){
     if(!isDataReceived)
     xhr.abort();     
   },waitTime);   
});

这是一个异步请求,意味着一旦它被发送,它就在那里。

如果您的服务器由于AJAX请求而启动了一个非常昂贵的操作,那么您所能做的最好就是打开服务器以侦听取消请求,然后发送一个单独的AJAX请求,通知服务器停止它正在做的任何事情。

否则,只需忽略AJAX响应。

没有可靠的方法可以做到这一点,一旦请求得到满足,我甚至不会尝试;唯一合理反应的方法就是忽略反应。

在大多数情况下,这可能会发生在这样的情况下:用户太频繁地点击一个按钮,触发许多连续的XHR,这里有很多选项,要么在XHR返回之前阻止该按钮,要么在另一个正在运行时甚至不触发新的XHR(提示用户向后倾斜),要么丢弃除最近的XHR响应之外的任何未决XHR响应。

这是我基于以上许多答案的实现:

  var activeRequest = false; //global var
  var filters = {...};
  apply_filters(filters);

  //function triggering the ajax request
  function apply_filters(filters){
        //prepare data and other functionalities
        var data = {};
        //limit the ajax calls
        if (activeRequest === false){
          activeRequest = true;
        }else{
          //abort if another ajax call is pending
          $request.abort();
          //just to be sure the ajax didn't complete before and activeRequest it's already false
          activeRequest = true;        
        }

        $request = $.ajax({ 
          url : window.location.origin + '/your-url.php',
          data: data,
          type:'POST',
          beforeSend: function(){
            $('#ajax-loader-custom').show();
            $('#blur-on-loading').addClass('blur');
          },            
          success:function(data_filters){

              data_filters = $.parseJSON(data_filters);
              
              if( data_filters.posts ) {
                  $(document).find('#multiple-products ul.products li:last-child').after(data_filters.posts).fadeIn();
              }
              else{ 
                return;
              }
              $('#ajax-loader-custom').fadeOut();
          },
          complete: function() {
            activeRequest = false;
          }          
        }); 
  } 

您不能撤回请求,但可以设置超时值,超过该值后将忽略响应。有关jquery AJAX选项,请参阅本页。我相信如果超过超时时间,将调用错误回调。每个AJAX请求都有一个默认超时。

您也可以对请求对象使用abort()方法,但是,虽然它会导致客户端停止侦听事件,但它可能不会阻止服务器处理它。