• How to cancel/abort jQuery AJAX request?

  • jQuery Ajax methods return an XMLHttpRequest (or the equivalent) object, so we can use abort().
  • abort Method (MSDN)- Cancels the current HTTP request.
  • abort() (MDN) – If the request has been sent already, this method will abort the request.
[pastacode lang=”javascript” manual=”var%20xhr%20%3D%20%24.ajax(%7B%0A%20%20%20%20type%3A%20%22POST%22%2C%0A%20%20%20%20url%3A%20%22some.php%22%2C%0A%20%20%20%20data%3A%20%22name%3DJohn%26location%3DBoston%22%2C%0A%20%20%20%20success%3A%20function(msg)%7B%0A%20%20%20%20%20%20%20alert(%20%22Data%20Saved%3A%20%22%20%2B%20msg%20)%3B%0A%20%20%20%20%7D%0A%7D)%3B%0A%0A%2F%2Fkill%20the%20request%0Axhr.abort()%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [ad type=”banner”]

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.

  • The jquery ajax method returns a XMLHttpRequest object. we can use this object to cancel the request.
  • The XMLHttpRequest has a abort method, which cancels the request, but if the request has already been sent to the server then the server will process the request even if we abort the request but the client will not wait for/handle the response.
  • The xhr object also contains a readyState which contains the state of the request(UNSENT-0, OPENED-1, HEADERS_RECEIVED-2, LOADING-3 and DONE-4).
[pastacode lang=”javascript” manual=”%24(document).ready(%0A%20%20%20%20var%20xhr%3B%0A%0A%20%20%20%20var%20fn%20%3D%20function()%7B%0A%20%20%20%20%20%20%20%20if(xhr%20%26%26%20xhr.readyState%20!%3D%204)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20xhr.abort()%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20var%20interval%20%3D%20setInterval(fn%2C%20500)%3B%0A)%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [pastacode lang=”javascript” manual=”%20xhr%20%3D%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20’ajax%2Fprogress.ftl’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fdo%20something%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/]

[pastacode lang=”javascript” manual=”%24.xhrPool%20%3D%20%5B%5D%3B%0A%0A%24.xhrPool.abortAll%20%3D%20function()%20%7B%0A%20%20%2F*%20Original%20example%20used%20_underscore%20api%0A%20%20%20%20_.each(this%2C%20function(jqXHR)%20%7B%0A%20%20%20%20%20%20%20%20jqXHR.abort()%3B%0A%20%20%20%20%7D)%3B%0A%20%20*%2F%0A%20%20%20%20%24.each(this%2C%20function(jqXHR)%20%7B%20%0A%20%20%20%20%20%20%20%20jqXHR.abort()%3B%20%0A%20%20%20%20%7D)%3B%0A%7D%3B%0A%0A%24.ajaxSetup(%7B%0A%20%20%20%20beforeSend%3A%20function(jqXHR)%20%7B%0A%20%20%20%20%20%20%20%20%24.xhrPool.push(jqXHR)%3B%0A%20%20%20%20%7D%0A%7D)%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/]

[pastacode lang=”javascript” manual=”%24.xhrPool%20%3D%20%5B%5D%3B%0A%0A%24.xhrPool.abortAll%20%3D%20function()%20%7B%0A%20%20%20%20%24.each(this%2C%20function(jqXHR)%20%7B%20%0A%20%20%20%20%20%20%20%20jqXHR.abort()%3B%20%0A%20%20%20%20%7D)%3B%0A%7D%3B%0A%0A%24.ajaxSetup(%7B%0A%20%20%20%20beforeSend%3A%20function(jqXHR)%20%7B%0A%20%20%20%20%20%20%20%20%24.xhrPool.push(jqXHR)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20complete%3A%20function(jqXHR)%20%7B%0A%20%20%20%20%20%20%20%20var%20index%20%3D%20%24.xhrPool.indexOf(jqXHR)%3B%0A%20%20%20%20%20%20%20%20if%20(index%20%3E%20-1)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.xhrPool.splice(index%2C%201)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D)%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [ad type=”banner”]

AJAX requests may not complete in the order they were started. Instead of aborting, we can choose to ignore all AJAX responses except for the most recent one:

  • Create a counter
  • Increment the counter when we 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:

[pastacode lang=”javascript” manual=”var%20xhrCount%20%3D%200%3B%0Afunction%20sendXHR()%20%7B%0A%20%20%20%20%2F%2F%20sequence%20number%20for%20the%20current%20invocation%20of%20function%0A%20%20%20%20var%20seqNumber%20%3D%20%2B%2BxhrCount%3B%0A%20%20%20%20%24.post(%22%2Fecho%2Fjson%2F%22%2C%20%7B%20delay%3A%20Math.floor(Math.random()%20*%205)%20%7D%2C%20function()%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20this%20works%20because%20of%20the%20way%20closures%20work%0A%20%20%20%20%20%20%20%20if%20(seqNumber%20%3D%3D%3D%20xhrCount)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22Process%20the%20response%22)%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22Ignore%20the%20response%22)%3B” message=”jQuery Code” highlight=”” provider=”manual”/] [pastacode lang=”javascript” manual=”%20%7D%0A%20%20%20%20%7D)%3B%0A%7D%0AsendXHR()%3B%0AsendXHR()%3B%0AsendXHR()%3B%0A%2F%2F%20AJAX%20requests%20complete%20in%20any%20order%20but%20only%20the%20last%20%0A%2F%2F%20one%20will%20trigger%20%22Process%20the%20response%22%20message%0A” message=”jQuery Code” highlight=”” provider=”manual”/]

Here there are three different solution approaches.

  • Cancel the request
  • Execute all request but only processes the result of the last submit
  • Prevents new requests as long as another one is still pending
[pastacode lang=”javascript” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%0A%3Chead%3E%0A%20%20%20%20%3Ctitle%3EAJAX%20Test%3C%2Ftitle%3E%0A%20%20%20%20%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20var%20Ajax1%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20call%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(typeof%20this.xhr%20!%3D%3D%20’undefined’)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.xhr.abort()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.xhr%20%3D%20%24.ajax(%7B%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [pastacode lang=”javascript” manual=”url%3A%20’your%2Flong%2Frunning%2Frequest%2Fpath’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20’GET’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function%20(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fprocess%20response%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20var%20Ajax2%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20counter%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20call%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20self%20%3D%20this%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20seq%20%3D%20%2B%2Bthis.counter%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20’your%2Flong%2Frunning%2Frequest%2Fpath’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20’GET’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function%20(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(seq%20%3D%3D%3D%20self.counter)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fprocess%20response%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [pastacode lang=”javascript” manual=”%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20var%20Ajax3%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20active%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20call%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(this.active%20%3D%3D%3D%20false)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.active%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20self%20%3D%20this%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20’your%2Flong%2Frunning%2Frequest%2Fpath’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20’GET’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function%20(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fprocess%20response%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [pastacode lang=”javascript” manual=”complete%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20self.active%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20%24(function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(‘%23button’).click(function%20(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Ajax3.call()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%0A%3Cbody%3E%0A%0A%0A” message=”jQuery Code” highlight=”” provider=”manual”/]

  • Here is the solution for Abort Ajax requests using jQuery:
[pastacode lang=”javascript” manual=”var%20%24request%3B%0Aif%20(%24request%20!%3D%20null)%7B%20%0A%20%20%20%20%24request.abort()%3B%0A%20%20%20%20%24request%20%3D%20null%3B%0A%7D%0A%0A%24request%20%3D%20%24.ajax(%7B%0A%20%20%20%20type%20%3A%20%22POST%22%2C%20%2F%2FTODO%3A%20Must%20be%20changed%20to%20POST%0A%20%20%20%20url%20%3A%20%22yourfile.php%22%2C%0A%20%20%20%20data%20%3A%20%22data%22%0A%20%20%20%20%7D).done(function(msg)%20%7B%0A%20%20%20%20%20%20%20%20alert(msg)%3B%0A%20%20%20%20%7D)%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/]

If we check an if statement to check whether the ajax request is null or not.

  • We needed to cancel pending requests that may have taken longer than the latest/most current request.

we can use something like this:

[pastacode lang=”javascript” manual=”%2F%2FOn%20document%20ready%0Avar%20ajax_inprocess%20%3D%20false%3B%0A%0A%24(document).ajaxStart(function()%20%7B%0Aajax_inprocess%20%3D%20true%3B%0A%7D)%3B%0A%0A%24(document).ajaxStop(function()%20%7B%0Aajax_inprocess%20%3D%20false%3B%0A%7D)%3B%0A%0A%2F%2FCall%20for%20new%20request%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [pastacode lang=”javascript” manual=”%2F%2FSnippet%20from%20live%20search%20function%0Aif%20(ajax_inprocess%20%3D%3D%20true)%0A%7B%0A%20%20%20%20request.abort()%3B%0A%7D%0A” message=”jQuery Code” highlight=”” provider=”manual”/]

  • 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 will trying to solve (that others may run in to as well) is that when the user entered information in an input field, we wanted to fire off a request for a Google Instant type of feel.
  • To avoid unnecessary requests and to maintain the front-end.
[pastacode lang=”javascript” manual=”var%20xhrQueue%20%3D%20%5B%5D%3B%0Avar%20xhrCount%20%3D%200%3B%0A%0A%24(‘%23search_q’).keyup(function()%7B%0A%0A%20%20%20%20xhrQueue.push(xhrCount)%3B%0A%0A%20%20%20%20setTimeout(function()%7B%0A%0A%20%20%20%20%20%20%20%20xhrCount%20%3D%20%2B%2BxhrCount%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [pastacode lang=”javascript” manual=”if%20(xhrCount%20%3D%3D%3D%20xhrQueue.length)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Fire%20Your%20XHR%20%2F%2F%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%7D%2C%20150)%3B%0A%0A%7D)%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/]

This will essentially send one request every 150ms (a variable that we can customize for our own needs).

  • Just call xhr.abort() whether it’s jquery ajax object or native XMLHTTPRequest object.

example:

[pastacode lang=”javascript” manual=”%2F%2FjQuery%20ajax%0A%24(document).ready(%0A%20%20%20%20var%20xhr%20%3D%20%24.get(‘%2Fserver’)%3B%0A%20%20%20%20setTimeout(function()%7Bxhr.abort()%3B%7D%2C%202000)%3B%0A)%3B%0A%0A%2F%2Fnative%20XMLHTTPRequest%0Avar%20xhr%20%3D%20new%20XMLHttpRequest()%3B%0Axhr.open(‘GET’%2C’%2Fserver’%2Ctrue)%3B%0Axhr.send()%3B%0AsetTimeout(function()%7Bxhr.abort()%3B%7D%2C%202000)%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [ad type=”banner”]

  • The below example demonstrates how to cancel an AJAX request– if data is not returned from the server within a predefined wait time.

HTML :

[pastacode lang=”javascript” manual=”%3Cdiv%20id%3D%22info%22%3E%3C%2Fdiv%3E%0A” message=”jQuery Code” highlight=”” provider=”manual”/]

JS CODE:

[pastacode lang=”javascript” manual=”var%20isDataReceived%3D%20false%2C%20waitTime%3D%201000%3B%20%0A%24(function()%20%7B%0A%20%20%20%20%2F%2F%20Ajax%20request%20sent.%0A%20%20%20%20%20var%20xhr%3D%20%24.ajax(%7B%0A%20%20%20%20%20%20url%3A%20’http%3A%2F%2Fapi.joind.in%2Fv2.1%2Ftalks%2F10889’%2C%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [pastacode lang=”javascript” manual=”data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20format%3A%20’json’%0A%20%20%20%20%20%20%7D%2C%20%20%20%20%20%0A%20%20%20%20%20%20dataType%3A%20’jsonp’%2C%0A%20%20%20%20%20%20success%3A%20function(data)%20%7B%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20isDataReceived%3D%20true%3B%0A%20%20%20%20%20%20%20%20%24(‘%23info’).text(data.talks%5B0%5D.talk_title)%3B%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20type%3A%20’GET’%0A%20%20%20%7D)%3B%0A%20%20%20%2F%2F%20Cancel%20ajax%20request%20if%20data%20is%20not%20loaded%20within%201sec.%0A%20%20%20setTimeout(function()%7B%0A%20%20%20%20%20if(!isDataReceived)%0A%20%20%20%20%20xhr.abort()%3B%20%20%20%20%20%0A%20%20%20%7D%2CwaitTime)%3B%20%20%20%0A%7D)%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/]

Categorized in:

JAVASCRIPT

Tagged in:

, , , , , , , , , , , , , , , , ,