TL;DR

article explains how to avoid slowing down your web app by canceling or aborting previous AJAX requests. It provides a code snippet that assigns the current AJAX request object to a variable and checks if it’s complete before initiating a new request, thus aborting the previous one. The article also includes a solution for ignoring the “abort” error that occurs when a previous request is canceled.

jQuery AJAX is the most common way to deal with AJAX requests these days. You can send as many Ajax requests as you like but there are many cases in which sending too many or frequent Ajax requests is not suitable and best avoided.

For example, let’s say you have developed a certain search functionality that fetches result data using AJAX. The search query string is the value of the input field bound with the Ajax function and is triggered on the keyup event on the input field. In this case, if the user has to enter a query string of let’s say 8 characters, this will mean that there’ll be at least 8 keyup events triggered, which further means that there’ll be at least 8 Ajax calls. This will definitely lead to a slowing of the whole app and is unreasonable as well.

The solution here is to only focus on the query string after the user has finished typing i.e. the last keyup event. So, for this, you have to cancel or abort all the previous Ajax requests.
Let’s say that the input field is as follows:

[PHP]

[/php]

Now, we have to write the code for the Ajax function which will be triggered on the key up event and will also abort the previous Ajax calls if any. So, our code for such a function will be as:

$(document).ready(function() {
	var ajaxReq = 'ToCancelPrevReq'; // you can have its value anything you like

	$("#search").keyup(function() {

		var queryString = $("#search").val();

		if (queryString == '') return; //You can always alter this condition to a better one that suits you.

		ajaxReq = $.ajax({
			url: YourPostURL, //Don't forget to replace with your own post URL
			type: 'POST',
			data: {
				'query': queryString
			},
			dataType: 'JSON',
			beforeSend: function() {
				if (ajaxReq != 'ToCancelPrevReq' & amp; & amp; ajaxReq.readyState & lt; 4) {
					ajaxReq.abort();
				}
			},
			success: function(json) {
				console.log(json);
			},
			error: function(xhr, ajaxOptions, thrownError) {
				if (thrownError == 'abort' || thrownError == 'undefined') return;
				alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
			}
		}); //end ajaxReq

	}); //end keyup

}); //end document.ready

Explanation:

In the above code what’s happening is that we have assigned our $.ajax request to a variable ‘ajaxReq‘. This variable will hold the current Ajax request object and if another Ajax request is called before the previous one is completed it aborts the previous one. It does this by checking the condition set in the beforeSend function which fires before a new Ajax request is initiated.

The ajaxReq != ‘ToCancelPrevReq’ checks if the ajaxReq variable holds a previous ajax request object and the ajaxReq.readyState < 4 condition checks if that is complete or not. The readyState property can have 5 values depending on the status of the Ajax XMLHttpRequest, these are:

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

You can learn more about XMLHttpRequest at:
https://www.w3schools.com/xml/ajax_xmlhttprequest_create.asp

Now, most of the tutorials regarding this topic end here, but aborting the previous request creates another problem if you are catching errors in case of failed Ajax request. You’ll notice that in the error setting function, we have an alert capturing any error that is returned in case of a failed request, its status, and its response text. When we abort a request it’s considered a failed request that will also be captured. But we don’t want to display an alert every time a user types fast and cancels a previous Ajax request in the process, so we add our condition to ignore the ‘abort’ error and just to be safe for any ‘undefined’ error as well.

The condition:

if(thrownError == 'abort' || thrownError == 'undefined')

checks this and returns false, if true, without processing the alert function under it.

This is it. This should be a standard and should also be considered a good practice as well.

If you are looking for a reliable team to manage your web development, consider checking out our web development services and pricing page. Feel free to suggest any other good methods that you may have.

Happy Coding 🙂

Epiphany Infotech

We are a Website Development, WebApp Development, and Digital Marketing Company, providing services to enterprises of all shapes and sizes, across the world. In our blog, we talk about the latest in Tech, Technical Tutorials, and our general opinions, among other things 🙂 Please feel free to reach us through the comment box or via the contact us page if you’d like to know more about our services.

13 Comments

karen cocke on May 1, 2017 at 1:03 am

Interesting article thank you for sharing
- Brajinder Singh on May 12, 2017 at 2:14 am
  
  Glad you liked it 🙂
Alejandro on June 26, 2017 at 9:47 pm

gracias por compartir, me ayudo bastante.
- Brajinder Singh on July 2, 2017 at 4:06 am
  
  de nada 🙂
Brajinder Singh on June 18, 2018 at 4:37 am

Sorry man! Your website doesn’t seem to work for me in any browser. Let me know if you need my help on anything else.
- A/C on July 18, 2018 at 10:40 am
  
  Hey Brajinder, Sorry to be the bearer of bad news, but at least two of three of the comments you’ve replied to so far are spam. You really should delete spam from your blog least you encourage more of the dreadful practice.
  - Brajinder Singh on July 23, 2018 at 3:42 am
    
    Thanks for the concern. May be they are may be they aren’t. The websites they have linked isn’t working. So, I’m going to give them the benefit of doubt here and leave it as it is. I have a few plugins which monitor spam. Still, thanks for your concern. Really appreciated.
James on June 20, 2019 at 2:59 pm

Great, great, great, thanks for publishing. 🙂
- Brajinder Singh on July 16, 2019 at 5:49 pm
  
  Glad to be of help 🙂
Prakash on June 20, 2019 at 5:08 pm

I have 2 tabs, each tab have same function i.e. generateReport() which call same ajax call.
on the tab delete, i put a abort() function.
if i hit the both function, which create 2 ajax call. and delete 1no tab immediately then my abort function run and cancel the 2nd no ajax call.
expectation is 1no ajax call will be canceled.
Any idea about this issue?
- Brajinder Singh on July 16, 2019 at 5:49 pm
  
  Your logic seem flawed or I might be way off in thinking what you have done. Without seeing the actual implementation it’s hard for me to figure out. The best I can say at the moment is use ID based approach, and use this.id to make sure only the selector is acted upon. It’s been a lot of time since you posted it so I assume it’s resolved by now. Anyhow, thanks for going through 🙂
MegaJoe on November 28, 2019 at 9:39 pm

Cool, thanks
- Brajinder Singh on May 2, 2020 at 7:22 am
  
  Glad you liked it 🙂

How to Cancel/abort Previous ajax Request in jQuery

TL;DR

13 Comments

Submit a Comment Cancel reply

Recent Posts