Aborting an Ajax Request in jQuery

When using ajax to request a page or data, there will be occasions where you will need to cancel the ajax call.

Some reasons may be that the page you are calling enters an infinite loop and stops the call from returning. Maybe you need to cancel a previous request before making a new request to prevent duplicate requests from being sent.

Luckily jQuery has made this almost too easy as you can see by my example below.

/* our handler to the ajax call */

var xhr = null;

function goAjax()

{

        /* if there is a previous ajax search, then we abort it and then set xhr to null */

        if( xhr != null ) {

                xhr.abort();

                xhr = null;

        }

        /* and now we can saftely make another ajax call since the previous one is aborted */

        xhr = $.ajax({

type: "POST",

url: "/some/url",

data: "variables=whatever&var2=something",

success: function(msg) {

/* handle the ajax response */

}

        });

}

Now you can call the goAjax() function as often as you like and it will cancel the previous ajax request if it hasn’t been completed before making a new request preventing duplicate requests from occuring.

<a href='javascript:goAjax();'>Click me as much as you like</a>