How to detect an Ajax event on a page

Hello dear friend!

Today will be a brief note on Ajax!

Sometimes there is a situation to perform a task after performing a Ajax request.

Good, if you added the Ajax function yourself, then you can just use “Promise callbacks” ( .done(), .fail(), .always(), и .then() ) and execute the action after the desired response.

Example of use “Promise callbacks”

$.ajax({
	url: "test.html",
	context: document.body
}).done(function() {
	console.log( "success" );
}).fail(function() {
	console.log( "error" );
}).always(function() {
	console.log( "complete" );
});

Now consider a situation where you didn’t write the Ajax function and you can’t add the callback function to it.

For example, you use some library which functions to send an Ajax request. The script file is connected to the CDN and you can’t change it remotely.

Of course you can download it and find the place where the Ajax request is performed and fix it. But by doing so you lose future updates and possibly security.

I suggest another option: we could simply use the event handler “ajaxComplete”. It will be called every time you complete an Ajax request.

For example, we will detect the status of our request

$( document ).ajaxComplete(function( event, xhr, settings ) { 
	console.log( xhr.statusText );
});

And for example, let’s perform the action after a successful query for the test.html page

$(document).ajaxComplete(function( event, xhr, settings ) {
	if ( settings.url === 'test.html' &amp;&amp; xhr.statusText === 'success' ) {
		console.log( 'Data received' );
	}
});

More information can be found in the documentation

Thank you for your read.

Keep it with you so you don’t lose it!