A Complete Guide to JQuery AJAX Event Methods



Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In our last tutorial post, we discussed about the various Ajax methods in jQuery and how they can be implemented.

So moving forward, in this tutorial we are going to be studying about the Ajax Event methods in jQuery.

ajaxComplete( callback ) Method

ajaxComplete( callback ) method attaches a function to be executed whenever an AJAX request is been completes.

Syntax

The following below is the syntax to use this method -

 $(document).ajaxComplete( callback );

Parameter Details

Below is the description of all the parameters -

  • callback - It is the function to be executed. The XML Http request and settings that are used for that request are all passed as arguments to the function.

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "#driver" ).click( function( event )  {
                         $( '#stage1' ).load( 'result.html' );
                    } );

                    $( document ).ajaxComplete( function( event,  request,  settings ) {
                         $( "#stage2" ).html( "<h1>Request Complete</h1>" );
                    } );
               } );
          </script>

     </head>

     <body>
          <span>Click on the button below to load /jquery/result.html file:</span>

          <div  id = "stage1"  style = "background-color: green;">
               STAGE - 1
          </div>

          <div  id = "stage2"  style = "background-color: green;">
               STAGE - 2
          </div>
          
          <input  type = "button"  id = "driver"  value = "Load Data" />
     </body>
</html>

Assume we have the below HTML content in /jquery/result.html file -

<h1>THIS IS RESULT.......</h1>

You can try the above code out to see the result for yourselves.


ajaxStart( callback ) Method

jQuery ajaxStart(callback) method attaches a function to be executed whenever an Ajax request starts and there is none already active. This is known as an AJAX Event.

Syntax

The following below is the syntax to use this method -

 $(document).ajaxStart( callback );

Parameter Details

Below is the description of all the parameters -

  • callback - It is the function to execute.

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    /* This is a global variable */
                    var  count =  0;
                    
                    $( "#driver" ).click( function( event )  {
                         $( '#stage1' ).load( 'result.html' );
                    } );

                    /* Get called when request starts.  */

                    $( document ).ajaxStart( function(  ) {
                         count ++;
                         $( "#stage2" ).html( "<h1>Starts,  Count : "  +  count  +  "</h1>" );
                    } );

                    /* Get called when request completes. */
                    $( document ).ajaxComplete( function( event,  request,  set )  {
                         count ++;
                         $( "#stage3" ).html( "<h1>Completes,  Count : "  +  count  +  "</h1>" );     
                    } );                 
               } );
          </script>

     </head>

     <body>
          <span>Click on the button below to load /jquery/result.html file:</span>

          <div  id = "stage1"  style = "background-color: green;">
               STAGE - 1
          </div>

          <div  id = "stage2"  style = "background-color: green;">
               STAGE - 2
          </div>

          <div  id = "stage3"  style = "background-color: green;">
               STAGE - 3
          </div>
          
          <input  type = "button"  id = "driver"  value = "Load Data" />
     </body>
</html>

Assume we have the below HTML content in /jquery/result.html file -

<h1>THIS IS RESULT.......</h1>

You can try the above code out to see the result for yourselves.


ajaxError( callback ) Method

jQuery ajaxError(callback) method attaches a function to be executed whenever an AJAX request fails. This is an AJAX Event.

Syntax

The following below is the syntax to use this method -

 $(document).ajaxError( callback );

Parameter Details

Below is the description of all the parameters -

  • callback - It is the function to be executed. The XML Http request and settings that are used for that request are all passed as arguments to the function. A third argument, an exception object, is passed if an exception occurs while processing the request.

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {

                    $( "#driver" ).click( function( event )  {
                         /* Assume that result.text does not exist. */
                         $( '#stage1' ).load( '/jquery/result.text' );
                    } );

                    $( document ).ajaxError( function( event,  request,  settings ) {
                         $( "#stage2" ).html( "<h1>Error in loading page!</h1>" );
                    } );
               } );
          </script>

     </head>

     <body>
          <span>Click on the button below to load /jquery/result.text file:</span>

          <div  id = "stage1"  style = "background-color: green;">
               STAGE - 1
          </div>

          <div  id = "stage2"  style = "background-color: green;">
               STAGE - 2
          </div>
          
          <input  type = "button"  id = "driver"  value = "Load Data" />
     </body>
</html>

You can try the above code out to see the result for yourselves.


ajaxSend( callback ) Method

jQuery ajaxSend(callback) method attaches a function to be executed whenever an Ajax request is sent. This is known as an AJAX Event.

Syntax

The following below is the syntax to use this method -

 $(document).ajaxSend( callback );

Parameter Details

Below is the description of all the parameters -

  • callback - It is the function to be executed. The XML Http request and settings that are used for the request are all passed as arguments to the callback.

Example

Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    /* This is a global variable */
                    var  count =  0;
                    
                    $( "#driver" ).click( function( event )  {
                         $( '#stage0' ).load( 'result.html' );
                    } );

                    /* Get called when request starts.  */

                    $( document ).ajaxStart( function(  ) {
                         count ++;
                         $( "#stage1" ).html( "<h1>Starts,  Count : "  +  count  +  "</h1>" );
                    } );

                    /* Get called when request is sent. */
                    $( document ).ajaxSend( function( event,  request,  set )  {
                         count ++;
                         $( "#stage2" ).html( "<h1>Sends,  Count : "  +  count  +  "</h1>" );
                         $( "#stage2" ).append( "<h1>URL : "  +  set.url  +  "</h1>" );
                    } );

                    /* Get called when request completes. */
                    $( document ).ajaxComplete( function( event,  request,  set )  {
                         count ++;
                         $( "#stage3" ).html( "<h1>Completes,  Count : "  +  count  +  "</h1>" );     
                    } );                 
               } );
          </script>

     </head>

     <body>
          <span>Click on the button below to load /jquery/result.html file:</span>

          <div  id = "stage0"  style = "background-color: green;">
               STAGE - 0
          </div>

          <div  id = "stage1"  style = "background-color: green;">
               STAGE - 1
          </div>

          <div  id = "stage2"  style = "background-color: green;">
               STAGE - 2
          </div>

          <div  id = "stage3"  style = "background-color: green;">
               STAGE - 3
          </div>
          
          <input  type = "button"  id = "driver"  value = "Load Data" />
     </body>
</html>

Assume we have the below HTML content in /jquery/result.html file -

<h1>THIS IS RESULT.......</h1>

You can try the above code out to see the result for yourselves.


ajaxStop( callback ) Method
jQuery ajaxStop(callback) method attaches a function to be executed whenever an Ajax request have ended. This is known as an AJAX Event.

Syntax
The following below is the syntax to use this method -

 $(document).ajaxStop( callback );

Parameter Details
Below is the description of all the parameters -

  • callback - It is the function to execute.

Example
Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    /* This is a global variable */
                    var  count =  0;
                    
                    $( "#driver" ).click( function( event )  {
                         $( '#stage0' ).load( 'result.html' );
                    } );

                    /* Get called when request starts.  */

                    $( document ).ajaxStart( function(  ) {
                         count ++;
                         $( "#stage1" ).html( "<h1>Starts,  Count : "  +  count  +  "</h1>" );
                    } );

                    /* Get called when request is sent. */
                    $( document ).ajaxSend( function( event,  request,  set )  {
                         count ++;
                         $( "#stage2" ).html( "<h1>Sends,  Count : "  +  count  +  "</h1>" );
                         $( "#stage2" ).append( "<h1>URL : "  +  set.url  +  "</h1>" );
                    } );

                    /* Get called when request completes. */
                    $( document ).ajaxComplete( function( event,  request,  set )  {
                         count ++;
                         $( "#stage3" ).html( "<h1>Completes,  Count : "  +  count  +  "</h1>" );     
                    } ); 

                    /* Get called when all requests are ended. */
                    $( document ).ajaxStop( function( event,  request,  set )  {
                         count ++;
                         $( "#stage4" ).html( "<h1>Stops,  Count : "  +  count  +  "</h1>" );
                    } );               
               } );
          </script>

     </head>

     <body>
          <span>Click on the button below to load /jquery/result.html file:</span>

          <div  id = "stage0"  style = "background-color: green;">
               STAGE - 0
          </div>

          <div  id = "stage1"  style = "background-color: green;">
               STAGE - 1
          </div>

          <div  id = "stage2"  style = "background-color: green;">
               STAGE - 2
          </div>

          <div  id = "stage3"  style = "background-color: green;">
               STAGE - 3
          </div>

          <div  id = "stage4"  style = "background-color: green;">
               STAGE - 4
          </div>
          
          <input  type = "button"  id = "driver"  value = "Load Data" />
     </body>
</html>

Assume we have the below HTML content in /jquery/result.html file -

<h1>THIS IS RESULT.......</h1>

You can try the above code out to see the result for yourselves.


ajaxSuccess( callback ) Method
ajaxSuccess(callback) method attaches a function to be executed whenever an Ajax request is been completed successfully. This is known as an AJAX Event.

Syntax
The following below is the syntax to use this method -

 $(document).ajaxSuccess( callback );

Parameter Details
Below is the description of all the parameters -

  • callback - It is the function to execute.

Example
Below is a short example on how to implement this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    /* This is a global variable */
                    var  count =  0;
                    
                    $( "#driver" ).click( function( event )  {
                         $( '#stage0' ).load( 'result.html' );
                    } );

                    /* Get called when request starts.  */

                    $( document ).ajaxStart( function(  ) {
                         count ++;
                         $( "#stage1" ).html( "<h1>Starts,  Count : "  +  count  +  "</h1>" );
                    } );

                    /* Get called when request is sent. */
                    $( document ).ajaxSend( function( event,  request,  set )  {
                         count ++;
                         $( "#stage2" ).html( "<h1>Sends,  Count : "  +  count  +  "</h1>" );
                         $( "#stage2" ).append( "<h1>URL : "  +  set.url  +  "</h1>" );
                    } );

                    /* Get called when request completes. */
                    $( document ).ajaxComplete( function( event,  request,  set )  {
                         count ++;
                         $( "#stage3" ).html( "<h1>Completes,  Count : "  +  count  +  "</h1>" );     
                    } ); 

                    /* Get called when all requests are ended. */
                    $( document ).ajaxStop( function( event,  request,  set )  {
                         count ++;
                         $( "#stage4" ).html( "<h1>Stops,  Count : "  +  count  +  "</h1>" );
                    } );   

                    /* Get called when all requests are completed successfully. */
                    $( document ).ajaxSuccess( function( event,  request, set )  {
                         count ++; 
                         $( "#stage5" ).html( "<h1>Success,  Count : "  +  count  +  "</h1>" );
                    } );       
               } );
          </script>

     </head>

     <body>
          <span>Click on the button below to load /jquery/result.html file:</span>

          <div  id = "stage0"  style = "background-color: green;">
               STAGE - 0
          </div>

          <div  id = "stage1"  style = "background-color: green;">
               STAGE - 1
          </div>

          <div  id = "stage2"  style = "background-color: green;">
               STAGE - 2
          </div>

          <div  id = "stage3"  style = "background-color: green;">
               STAGE - 3
          </div>

          <div  id = "stage4"  style = "background-color: green;">
               STAGE - 4
          </div>

          <div  id = "Stage5"  style = "background-color: green;">
               STAGE - 5
          </div>
          
          <input  type = "button"  id = "driver"  value = "Load Data" />
     </body>
</html>

Assume we have the below HTML content in /jquery/result.html file -

<h1>THIS IS RESULT.......</h1>

You can try the above code out to see the result for yourselves.

Alright guys! we have come to the end of this tutorial post on JQuery AJAX Event methods. In our next tutorial, we will be studying about how you can use jQuery in creating beautiful effects.

Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.

Thanks for reading and bye for now.