Abort Ajax requests using jQuery

Question

Is it possible that using jQuery  I cancel abort an Ajax request that I have not yet received the response from

User · Answer

I was doing a live search solution and needed to cancel pending requests that may have taken longer than the latest/most current request.

In my case I used something like this:

//On document ready
var ajax_inprocess = false;

$(document).ajaxStart(function() {
ajax_inprocess = true;
});

$(document).ajaxStop(function() {
ajax_inprocess = false;
});

//Snippet from live search function
if (ajax_inprocess == true)
{
    request.abort();
}
//Call for new request

User · Answer

This is my implementation based on many answers above    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

User · Answer

You can t recall the request but you can set a timeout value after which the response will be ignored   See this page for jquery AJAX options   I believe that your error callback will be called if the timeout period is exceeded   There is already a default timeout on every AJAX request   You can also use the abort   method on the request object but  while it will cause the client to stop listening for the event  it may probably will not stop the server from processing it

User · Answer

Most of the jQuery Ajax methods return an XMLHttpRequest  or the equivalent  object  so you can just use abort     See the documentation    abort Method  MSDN   Cancels the current HTTP request  abort    MDN   If the request has been sent already  this method will abort the request      var xhr     ajax       type   POST       url   some php       data   name John amp location Boston       success  function msg          alert   Data Saved      msg                 kill the request xhr abort     UPDATE  As of jQuery 1 5 the returned object is a wrapper for the native XMLHttpRequest object called jqXHR  This object appears to expose all of the native properties and methods so the above example still works  See The jqXHR Object  jQuery API documentation    UPDATE 2  As of jQuery 3  the ajax method now returns a promise with extra methods  like abort   so the above code still works  though the object being returned is not an xhr any more  See the 3 0 blog here    UPDATE 3  xhr abort   still works on jQuery 3 x  Don t assume the update 2 is correct  More info on jQuery Github repository

User · Answer

You can abort any continuous ajax call by using this  lt input id  quot searchbox quot  name  quot searchbox quot  type  quot text quot    gt    lt script src  quot http   code jquery com jquery-1 11 0 min js quot  gt  lt  script gt   lt script type  quot text javascript quot  gt       var request   null              searchbox   keyup function                  var id     this  val                request     ajax                   type   quot POST quot     TODO  Must be changed to POST                 url   quot index php quot                   data    id  id                   success  function                                              beforeSend  function                          if  request     null                            request abort                                                                         lt  script gt

User · Answer

If  xhr abort     causes page reload   Then you can set onreadystatechange before abort to prevent        prevent page reload by abort   xhr onreadystatechange   null       may cause page reload xhr abort

User · Answer

You can t recall the request but you can set a timeout value after which the response will be ignored   See this page for jquery AJAX options   I believe that your error callback will be called if the timeout period is exceeded   There is already a default timeout on every AJAX request   You can also use the abort   method on the request object but  while it will cause the client to stop listening for the event  it may probably will not stop the server from processing it

User · Answer

It s an asynchronous request  meaning once it s sent it s out there   In case your server is starting a very expensive operation due to the AJAX request  the best you can do is open your server to listen for cancel requests  and send a separate AJAX request notifying the server to stop whatever it s doing   Otherwise  simply ignore the AJAX response

User · Answer

It is always best practice to do something like this   var  request  if   request    null         request abort         request   null      request     ajax       type    POST     TODO  Must be changed to POST     url    yourfile php       data    data         done function msg            alert msg             But it is much better if you check an if statement to check whether the ajax request is null or not

User · Answer

If  xhr abort     causes page reload   Then you can set onreadystatechange before abort to prevent        prevent page reload by abort   xhr onreadystatechange   null       may cause page reload xhr abort

User · Answer

Just call xhr abort   whether it s jquery ajax object or native XMLHTTPRequest object   example     jQuery ajax   document  ready function        var xhr     get   server        setTimeout function   xhr abort      2000          native XMLHTTPRequest var xhr   new XMLHttpRequest    xhr open  GET    server  true   xhr send    setTimeout function   xhr abort      2000

User · Answer

It is always best practice to do something like this   var  request  if   request    null         request abort         request   null      request     ajax       type    POST     TODO  Must be changed to POST     url    yourfile php       data    data         done function msg            alert msg             But it is much better if you check an if statement to check whether the ajax request is null or not

User · Answer

Just use ajax abort   for example you could abort any pending ajax request before sending another one like this    check for existing ajax request if ajax     ajax abort         then you make another ajax request   ajax     your code here

User · Answer

Save the calls you make in an array  then call xhr abort   on each   HUGE CAVEAT  You can abort a request  but that s only the client side  The server side could still be processing the request  If you are using something like PHP or ASP with session data  the session data is locked until the ajax has finished  So  to allow the user to continue browsing the website  you have to call session write close    This saves the session and unlocks it so that other pages waiting to continue will proceed  Without this  several pages can be waiting for the lock to be removed

User · Answer

I have shared a demo that demonstrates how to cancel an AJAX request-- if data is not returned from the server within a predefined wait time   HTML     lt div id  info  gt  lt  div gt    JS CODE   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

User · Answer

As many people on the thread have noted  just because the request is aborted on the client-side  the server will still process the request  This creates unnecessary load on the server because it s doing work that we ve quit listening to on the front-end   The problem I was trying to solve  that others may run in to as well  is that when the user entered information in an input field  I wanted to fire off a request for a Google Instant type of feel   To avoid firing unnecessary requests and to maintain the snappiness of the front-end  I did the following   var xhrQueue       var xhrCount   0       search q   keyup function         xhrQueue push xhrCount        setTimeout function             xhrCount     xhrCount           if  xhrCount     xhrQueue length                   Fire Your XHR                      150          This will essentially send one request every 150ms  a variable that you can customize for your own needs   If you re having trouble understanding what exactly is happening here  log xhrCount and xhrQueue to the console just before the if block

User · Answer

I had the problem of polling and once the page was closed the poll continued so in my cause  a user would miss an update as a mysql value was being set for the next 50 seconds after page closing  even though I killed the ajax request  I figured away around  using   SESSION to set a var won t update in the poll its self until its ended and a new one has started  so what I did was set a value in my database as 0   offpage   while I m polling I query that row and return false  when it s 0 as querying in polling will get you current values obviously     I hope this helped

User · Answer

there is no reliable way to do it  and I would not even try it  once the request is on the go  the only way to react reasonably is to ignore the response   in most cases  it may happen in situations like  a user clicks too often on a button triggering many consecutive XHR  here you have many options  either block the button till XHR is returned  or dont even trigger new XHR while another is running hinting the user to lean back - or discard any pending XHR response but the recent

User · Answer

AJAX requests may not complete in the order they were started  Instead of aborting  you can choose to ignore all AJAX responses except for the most recent one    Create a counter Increment the counter when you initiate AJAX request Use the current value of counter to  stamp  the request In the success callback compare the stamp with the counter to check if it was the most recent request   Rough outline of code   var xhrCount   0  function sendXHR            sequence number for the current invocation of function     var seqNumber     xhrCount        post   echo json      delay  Math floor Math random     5     function                this works because of the way closures work         if  seqNumber     xhrCount                console log  Process the response              else               console log  Ignore the response                        sendXHR    sendXHR    sendXHR       AJAX requests complete in any order but only the last     one will trigger  Process the response  message   Demo on jsFiddle

User · Answer

I had the problem of polling and once the page was closed the poll continued so in my cause  a user would miss an update as a mysql value was being set for the next 50 seconds after page closing  even though I killed the ajax request  I figured away around  using   SESSION to set a var won t update in the poll its self until its ended and a new one has started  so what I did was set a value in my database as 0   offpage   while I m polling I query that row and return false  when it s 0 as querying in polling will get you current values obviously     I hope this helped

User · Answer

Just use ajax abort   for example you could abort any pending ajax request before sending another one like this    check for existing ajax request if ajax     ajax abort         then you make another ajax request   ajax     your code here

User · Answer

I have shared a demo that demonstrates how to cancel an AJAX request-- if data is not returned from the server within a predefined wait time   HTML     lt div id  info  gt  lt  div gt    JS CODE   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

User · Answer

It s an asynchronous request  meaning once it s sent it s out there   In case your server is starting a very expensive operation due to the AJAX request  the best you can do is open your server to listen for cancel requests  and send a separate AJAX request notifying the server to stop whatever it s doing   Otherwise  simply ignore the AJAX response

User · Answer

Most of the jQuery Ajax methods return an XMLHttpRequest  or the equivalent  object  so you can just use abort     See the documentation    abort Method  MSDN   Cancels the current HTTP request  abort    MDN   If the request has been sent already  this method will abort the request      var xhr     ajax       type   POST       url   some php       data   name John amp location Boston       success  function msg          alert   Data Saved      msg                 kill the request xhr abort     UPDATE  As of jQuery 1 5 the returned object is a wrapper for the native XMLHttpRequest object called jqXHR  This object appears to expose all of the native properties and methods so the above example still works  See The jqXHR Object  jQuery API documentation    UPDATE 2  As of jQuery 3  the ajax method now returns a promise with extra methods  like abort   so the above code still works  though the object being returned is not an xhr any more  See the 3 0 blog here    UPDATE 3  xhr abort   still works on jQuery 3 x  Don t assume the update 2 is correct  More info on jQuery Github repository

User · Answer

Save the calls you make in an array  then call xhr abort   on each   HUGE CAVEAT  You can abort a request  but that s only the client side  The server side could still be processing the request  If you are using something like PHP or ASP with session data  the session data is locked until the ajax has finished  So  to allow the user to continue browsing the website  you have to call session write close    This saves the session and unlocks it so that other pages waiting to continue will proceed  Without this  several pages can be waiting for the lock to be removed

User · Answer

Most of the jQuery Ajax methods return an XMLHttpRequest  or the equivalent  object  so you can just use abort     See the documentation    abort Method  MSDN   Cancels the current HTTP request  abort    MDN   If the request has been sent already  this method will abort the request      var xhr     ajax       type   POST       url   some php       data   name John amp location Boston       success  function msg          alert   Data Saved      msg                 kill the request xhr abort     UPDATE  As of jQuery 1 5 the returned object is a wrapper for the native XMLHttpRequest object called jqXHR  This object appears to expose all of the native properties and methods so the above example still works  See The jqXHR Object  jQuery API documentation    UPDATE 2  As of jQuery 3  the ajax method now returns a promise with extra methods  like abort   so the above code still works  though the object being returned is not an xhr any more  See the 3 0 blog here    UPDATE 3  xhr abort   still works on jQuery 3 x  Don t assume the update 2 is correct  More info on jQuery Github repository

User · Answer

We just had to work around this problem and tested three different  approaches    does cancel the request as suggested by  meouw execute all request but only processes the result of the last submit prevents new requests as long as another one is still pending    x000D   x000D  var Ajax1     x000D    call  function     x000D      if  typeof this xhr      undefined   x000D        this xhr abort    x000D      this xhr     ajax   x000D        url   your long running request path   x000D        type   GET   x000D        success  function data    x000D            process response x000D          x000D          x000D      x000D     x000D  var Ajax2     x000D    counter  0  x000D    call  function     x000D      var self   this  x000D        seq     this counter  x000D        ajax   x000D        url   your long running request path   x000D        type   GET   x000D        success  function data    x000D          if  seq     self counter    x000D              process response x000D            x000D          x000D          x000D      x000D     x000D  var Ajax3     x000D    active  false  x000D    call  function     x000D      if  this active     false    x000D        this active   true  x000D        var self   this  x000D          ajax   x000D          url   your long running request path   x000D          type   GET   x000D          success  function data    x000D              process response x000D             x000D          complete  function     x000D            self active   false  x000D            x000D            x000D        x000D      x000D     x000D    function     x000D        button   click function e    x000D      Ajax3 call    x000D        x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input id  button  type  button  value  click    gt  x000D   x000D   x000D    In our case we decided to use approach  3 as it produces less load for the server  But I am not 100  sure if jQuery guarantees the call of the  complete  -method  this could produce a deadlock situation  In our tests we could not reproduce such a situation

User · Answer

The following code shows initiating as well as aborting an Ajax request   function libAjax      var req    function start       req        ajax                 url   1 php                 success  function data                   console log data                                          function stop        req abort           return  start start stop stop     var obj   libAjax          go   click function        obj start                  stop   click function       obj stop             lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt input type  button  class  go  value  GO    gt      lt input type  button  class  stop  value  STOP    gt

User · Answer

I was doing a live search solution and needed to cancel pending requests that may have taken longer than the latest/most current request.

In my case I used something like this:

//On document ready
var ajax_inprocess = false;

$(document).ajaxStart(function() {
ajax_inprocess = true;
});

$(document).ajaxStop(function() {
ajax_inprocess = false;
});

//Snippet from live search function
if (ajax_inprocess == true)
{
    request.abort();
}
//Call for new request

User · Answer

The following code shows initiating as well as aborting an Ajax request   function libAjax      var req    function start       req        ajax                 url   1 php                 success  function data                   console log data                                          function stop        req abort           return  start start stop stop     var obj   libAjax          go   click function        obj start                  stop   click function       obj stop             lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt input type  button  class  go  value  GO    gt      lt input type  button  class  stop  value  STOP    gt

User · Answer

We just had to work around this problem and tested three different  approaches    does cancel the request as suggested by  meouw execute all request but only processes the result of the last submit prevents new requests as long as another one is still pending    x000D   x000D  var Ajax1     x000D    call  function     x000D      if  typeof this xhr      undefined   x000D        this xhr abort    x000D      this xhr     ajax   x000D        url   your long running request path   x000D        type   GET   x000D        success  function data    x000D            process response x000D          x000D          x000D      x000D     x000D  var Ajax2     x000D    counter  0  x000D    call  function     x000D      var self   this  x000D        seq     this counter  x000D        ajax   x000D        url   your long running request path   x000D        type   GET   x000D        success  function data    x000D          if  seq     self counter    x000D              process response x000D            x000D          x000D          x000D      x000D     x000D  var Ajax3     x000D    active  false  x000D    call  function     x000D      if  this active     false    x000D        this active   true  x000D        var self   this  x000D          ajax   x000D          url   your long running request path   x000D          type   GET   x000D          success  function data    x000D              process response x000D             x000D          complete  function     x000D            self active   false  x000D            x000D            x000D        x000D      x000D     x000D    function     x000D        button   click function e    x000D      Ajax3 call    x000D        x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input id  button  type  button  value  click    gt  x000D   x000D   x000D    In our case we decided to use approach  3 as it produces less load for the server  But I am not 100  sure if jQuery guarantees the call of the  complete  -method  this could produce a deadlock situation  In our tests we could not reproduce such a situation

User · Answer

Just call xhr abort   whether it s jquery ajax object or native XMLHTTPRequest object   example     jQuery ajax   document  ready function        var xhr     get   server        setTimeout function   xhr abort      2000          native XMLHTTPRequest var xhr   new XMLHttpRequest    xhr open  GET    server  true   xhr send    setTimeout function   xhr abort      2000

User · Answer

You can t recall the request but you can set a timeout value after which the response will be ignored   See this page for jquery AJAX options   I believe that your error callback will be called if the timeout period is exceeded   There is already a default timeout on every AJAX request   You can also use the abort   method on the request object but  while it will cause the client to stop listening for the event  it may probably will not stop the server from processing it

User · Answer

there is no reliable way to do it  and I would not even try it  once the request is on the go  the only way to react reasonably is to ignore the response   in most cases  it may happen in situations like  a user clicks too often on a button triggering many consecutive XHR  here you have many options  either block the button till XHR is returned  or dont even trigger new XHR while another is running hinting the user to lean back - or discard any pending XHR response but the recent

User · Answer

You can abort any continuous ajax call by using this  lt input id  quot searchbox quot  name  quot searchbox quot  type  quot text quot    gt    lt script src  quot http   code jquery com jquery-1 11 0 min js quot  gt  lt  script gt   lt script type  quot text javascript quot  gt       var request   null              searchbox   keyup function                  var id     this  val                request     ajax                   type   quot POST quot     TODO  Must be changed to POST                 url   quot index php quot                   data    id  id                   success  function                                              beforeSend  function                          if  request     null                            request abort                                                                         lt  script gt

User · Answer

It s an asynchronous request  meaning once it s sent it s out there   In case your server is starting a very expensive operation due to the AJAX request  the best you can do is open your server to listen for cancel requests  and send a separate AJAX request notifying the server to stop whatever it s doing   Otherwise  simply ignore the AJAX response

User · Answer

You can t recall the request but you can set a timeout value after which the response will be ignored   See this page for jquery AJAX options   I believe that your error callback will be called if the timeout period is exceeded   There is already a default timeout on every AJAX request   You can also use the abort   method on the request object but  while it will cause the client to stop listening for the event  it may probably will not stop the server from processing it

User · Answer

As many people on the thread have noted  just because the request is aborted on the client-side  the server will still process the request  This creates unnecessary load on the server because it s doing work that we ve quit listening to on the front-end   The problem I was trying to solve  that others may run in to as well  is that when the user entered information in an input field  I wanted to fire off a request for a Google Instant type of feel   To avoid firing unnecessary requests and to maintain the snappiness of the front-end  I did the following   var xhrQueue       var xhrCount   0       search q   keyup function         xhrQueue push xhrCount        setTimeout function             xhrCount     xhrCount           if  xhrCount     xhrQueue length                   Fire Your XHR                      150          This will essentially send one request every 150ms  a variable that you can customize for your own needs   If you re having trouble understanding what exactly is happening here  log xhrCount and xhrQueue to the console just before the if block

User · Answer

Most of the jQuery Ajax methods return an XMLHttpRequest  or the equivalent  object  so you can just use abort     See the documentation    abort Method  MSDN   Cancels the current HTTP request  abort    MDN   If the request has been sent already  this method will abort the request      var xhr     ajax       type   POST       url   some php       data   name John amp location Boston       success  function msg          alert   Data Saved      msg                 kill the request xhr abort     UPDATE  As of jQuery 1 5 the returned object is a wrapper for the native XMLHttpRequest object called jqXHR  This object appears to expose all of the native properties and methods so the above example still works  See The jqXHR Object  jQuery API documentation    UPDATE 2  As of jQuery 3  the ajax method now returns a promise with extra methods  like abort   so the above code still works  though the object being returned is not an xhr any more  See the 3 0 blog here    UPDATE 3  xhr abort   still works on jQuery 3 x  Don t assume the update 2 is correct  More info on jQuery Github repository

User · Answer

This is my implementation based on many answers above    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

User · Answer

It s an asynchronous request  meaning once it s sent it s out there   In case your server is starting a very expensive operation due to the AJAX request  the best you can do is open your server to listen for cancel requests  and send a separate AJAX request notifying the server to stop whatever it s doing   Otherwise  simply ignore the AJAX response

User · Answer

AJAX requests may not complete in the order they were started  Instead of aborting  you can choose to ignore all AJAX responses except for the most recent one    Create a counter Increment the counter when you initiate AJAX request Use the current value of counter to  stamp  the request In the success callback compare the stamp with the counter to check if it was the most recent request   Rough outline of code   var xhrCount   0  function sendXHR            sequence number for the current invocation of function     var seqNumber     xhrCount        post   echo json      delay  Math floor Math random     5     function                this works because of the way closures work         if  seqNumber     xhrCount                console log  Process the response              else               console log  Ignore the response                        sendXHR    sendXHR    sendXHR       AJAX requests complete in any order but only the last     one will trigger  Process the response  message   Demo on jsFiddle

[javascript] Abort Ajax requests using jQuery

Examples related to javascript

Examples related to jquery

Examples related to ajax