How to Abort AJAX Request in JavaScript / jQuery

AJAX (Asynchronous JavaScript and XML) requests allow you to communicate with web server, transfer data with them, without reloading your web page. It is a very useful technology and used in most modern websites and web applications. While using AJAX, we typically make a request from browser to server. Since the request is non-blocking, the control is returned back to the client browser to continue executing other lines of code, instead of waiting for response. But sometimes you may need to cancel or abort AJAX request in JavaScript/jQuery. In this article, we will learn how to do this.

How to Abort AJAX Request in JavaScript / jQuery

Let us say you have the following AJAX request that make to home.php script and send data variables name and location. You can easily do this in jQuery using $.ajax() function. It returns an AJAX object that can use for tracking and further operations. We store it in xhr variable.

var xhr = $.ajax({
    type: "POST",
    url: "home.php",
    data: "name=John&location=NYC",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

Let us say you want to cancel this request. You can do this by calling abort() function on the above request object as shown below.

xhr.abort();

For example, each jQuery AJAX request offers a beforeSend attribute where you can do some checks to before the request is sent. You can place the above abort() command in it to avoid duplicate AJAX requests. Here is an example to illustrate it.

var xhr = 'cancel_duplicate';

xhr = $.ajax({
    type: "POST",
    url: "home.php",
    data: "name=John&location=NYC",
    beforeSend : function() {
	if(xhr != 'cancel_duplicate' && xhr.readyState < 4) {
		xhr.abort();
		}
     },
    success: function(msg){
       alert( "Data Saved: " + msg );
       xhr='cancel_duplicate';
    }
});

In the above article, we first set xhr variable to a default string ‘cancel_duplicate’. When we issue AJAX request using $.ajax() function, it checks the value of xhr variable in beforeSend section. If it is not equal to default string then it means an AJAX request has been issued, since we also use it to store AJAX request object. We also check if the state of this object is <4, that is, if it is still running. If so, then we call the abort() function and the request is never sent, else we continue with the AJAX request.

Similarly, you can also issue abort() function in the click handler of a button, so that users can easily abort AJAX functions by clicking a button/link.

<button id="click" onclick='myfunc'>Click me</button>

Here is the function myfunc to be called as click handler.

<script>


var xhr = 'cancel_duplicate';

xhr = $.ajax({
    type: "POST",
    url: "home.php",
    data: "name=John&location=NYC",    
    success: function(msg){
       alert( "Data Saved: " + msg );
       xhr='cancel_duplicate';
    }
});

function myfunc() {
  if(xhr != 'cancel_duplicate' && xhr.readyState < 4) {
		xhr.abort();
		}
}
</script>

In this article, we have learnt a couple of ways to abort AJAX request using jQuery. The first example is used to check if an AJAX request is a duplicate and abort it before it is executed. The handler function in second example simply aborts the request when called.

Also read:

How to Get Value of Text Input Field with JavaScript
How to Merge Two Arrays in JavaScript
How to Persist Variables Between Page Loads
How to Scroll to Element With JavaScript
How to Scroll to Element With jQuery