jQuery Cancel Other Ajax Requests

For some reason, you might be submitting Ajax requests to the same URL for the same purpose and returning the same results but it happens that there are multiple Ajax requests just being redundant. Possibly a user interface where a user is making multiple selections on a page, one after the other and running multiple Ajax requests at the same time, returning results in a different order than they were submitted could cause problems.

The purpose of this article is to show you how you can assign an Ajax request with jQuery to a variable/object and then abort the request before the next one is submitted, keeping your Ajax clean and ensuring that the results returned was the last action submitted.

First, you must create a variable/object for your Ajax request like this:

var request = jQuery.ajax(
type: "POST",
url: "http://myurl",
success: function(response) {
//do things here...

With that done, you can easily abort this request with the abort()method like this:


Hope this helps!