JQuery AJAX Methods



Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be discussing about some of the JQuery Ajax methods. So read through with absolute care and feel free to ask questions too where necessary.

jQuery.ajax(options) Method

The jQuery.ajax( options ) method loads a remote page making use of an HTTP request.

The $.ajax( ) returns the xml HTTP Request that it creates. In most of the cases, you will not need that object to manipulate directly, but it is as well available if you need to abort the request manually.

Syntax

The following below is the syntax to make use of this method -

 $.ajax( options )

Parameter Details

Below is the description of all the parameters -

  • options - This parameter is a set of key/value pairs that configures the AJAX request. All the options are optional.

Sr.No.Option & Description
1async
A Boolean indicating whether to perform the request asynchronously. The default value is true.
2beforeSend
A callback function that is executed before the request is sent.
3complete
A callback function that executes whenever the request finishes.
4contentType
A string containing a MIME content type to set for the request. The default value is application/x-www-form-urlencoded.
5data
A map or string that is sent to the server with the request.
6dataFilter
A function to be used to handle the raw responsed data of XMLHttpRequest. This is a pre-filtering function to sanitize the response.
7dataType
A string defining the type of data expected back from the server (xml, html, json, or script).
8error
A callback function that is executed if the request fails.
9global
A Boolean indicating whether global AJAX event handlers will be triggered by this request. The default value is true.
10ifModified
A Boolean indicating whether the server should check if the page is modified before responding to the request.
11jsonp
Override the callback function name in a jsonp request.
12password
A password to be used in response to an HTTP access authentication request.
13processData
A Boolean indicating whether to convert the submitted data from an object form into a query-string form. The default value is true.
14success
A callback function that is executed if the request succeeds.
15timeout
Number of milliseconds after which the request will time out in failure.
16timeout
Set a local timeout (in milliseconds) for the request.
17type
A string defining the HTTP method to use for the request (GET or POST). The default value is GET.
18url
A string containing the URL to which the request is sent.
19username
A username to be used in response to an HTTP access authentication request.
20xhr
Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise.

Example

Below is a short example on how to implement this method. Here we will use the success handler to populate returned HTML -

<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 )  {
                         $.ajax( {
                              url: 'jquery/result.html' ,
                              success: function( data )  {
                                   $( '#stage' ).html( data );
                              }
                         } );
                    } );
               } );
          </script>

     </head>

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

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

Assuming we have the following content in the /jquery/result.html file -

<h1>THIS IS RESULT</h1>

Output

When you click on the given button below, then result.html files will be loaded -

jQuery Example Click on the button below to load /jquery/result.html file:
STAGE





jQuery.ajaxSetup(options) Method

jQuery.ajaxSetup(options) method sets the global settings for future AJAX requests.

Syntax

Below is the syntax to make use of this method -

 $.ajaxSetup( options )

Parameter Details

Below is the description of all the parameters -

  • options - This parameter is a set of key/value pairs that configures the AJAX request. All the options are optional.

Sr.No.Option & Description
1async
A Boolean indicating whether to perform the request asynchronously. The default value is true.
2beforeSend
A callback function that is executed before the request is sent.
3complete
A callback function that executes whenever the request finishes.
4contentType
A string containing a MIME content type to set for the request. The default value is application/x-www-form-urlencoded.
5data
A map or string that is sent to the server with the request.
6dataFilter
A function to be used to handle the raw responsed data of XMLHttpRequest. This is a pre-filtering function to sanitize the response.
7dataType
A string defining the type of data expected back from the server (xml, html, json, or script).
8error
A callback function that is executed if the request fails.
9global
A Boolean indicating whether global AJAX event handlers will be triggered by this request. The default value is true.
10ifModified
A Boolean indicating whether the server should check if the page is modified before responding to the request.
11jsonp
Override the callback function name in a jsonp request.
12password
A password to be used in response to an HTTP access authentication request.
13processData
A Boolean indicating whether to convert the submitted data from an object form into a query-string form. The default value is true.
14success
A callback function that is executed if the request succeeds.
15timeout
Number of milliseconds after which the request will time out in failure.
16timeout
Set a local timeout (in milliseconds) for the request.
17type
A string defining the HTTP method to use for the request (GET or POST). The default value is GET.
18url
A string containing the URL to which the request is sent.
19username
A username to be used in response to an HTTP access authentication request.
20xhr
Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise.

Example

Below is a short example on how to implement this method. Here we will use the success handler to populate returned HTML -

<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 )  {
                         // Perform a global setting 
                         $.ajaxSetup( {
                              url: "jquery/result.html" 
                         } );

                         $.ajax( {
                              success: function( data )  {
                                   $( '#stage' ).html( data );
                              }
                         } );
                    } );
               } );
          </script>

     </head>

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

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

Assuming we have the following content in the /jquery/result.html file -

<h1>THIS IS RESULT</h1>

Output

When you click on the given button below, then result.html files will be loaded -

jQuery Example Click on the button below to load /jquery/result.html file:
STAGE




jQuery.get( ) Method

jQuery.get(url, [data], [callback], [type]) method loads data from the server using a GET HTTP request.

This method returns the XML Http Request object.

Syntax

Below is the syntax to use this method -

 $.get( url ,  [data] ,  [callback] , [type] );

Parameter Details

Below is the description of all the parameters -

  • url - A string containing the URL to which the request is sent.
  • data - This is an optional parameter which represents key value pairs that will be sent to the server.
  • callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.
  • type - This is an optional parameter which represents the data type to be returned to callback function: "script", "xml", "html", "json", "jsonp", or "text".

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 )  {
                         $.get( "result.php" ,
                              { name:  "Zara" },
                              function( data )  {
                                   $( '#stage' ).html( data );
                              }
                         );
                    
                    } );
               } );
          </script>

     </head>

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

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

Assuming we have the following PHP content in /jquery/result.php file -

<?php
     
     if( $_REQUEST[ "name" ] )  {
          $name =  $_REQUEST[ 'name' ];
          echo  "Welcome".$name; 
     }
?>

Output

When you click on the given button below, then result.html files will be loaded -

jQuery Example Click on the button below to load /jquery/result.php file:
STAGE





jQuery.getJSON( ) Method

jQuery.getJSON() method load the JSON data from the server using a GET HTTP Request.

This method returns the XML Http Request object.

Syntax

Below is the syntax for this method -

 $.getJSON( url ,  [data] ,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • url - String containing the URL to which request was sent.
  • data - This is an optional parameter which represents key value pairs that will be sent to the server.
  • callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.

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 )  {
                         
                         $.getJSON( '/jquery/result.json' ,   function( jd )    {
                              $( '#stage' ).html( '<p>  Name: '    +  jd.name  +  '</p>' );
                              $( '#stage' ).append( '<p>  Age: '  +  jd.age  +  ' </p>' );
                              $( '#stage' ).append( '<p>  Sex: '  +  jd.sex  +  '</p>' );
                         } );
                    
                    } );
               } );
          </script>

     </head>

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

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

Assume we have the below JSON content in /jquery/result.json file -

{

     "name" :  "Zara Ali",
     "age"     :  "67",
     "sex"      :  "female"

}

Output

When you click on the given button below, then result.html files will be loaded -

jQuery Example Click on the button below to load /jquery/result.json file:
STAGE




jQuery.getScript( ) Method

jQuery.getScript() method loads and executes a JavaScript file by using an HTTP GET Request.

This method returns the XML Http Request object.

Syntax

The following below is the syntax for this method -

 $.getScript( url , [callback] );

Parameter Details

Below is the description of all the parameters -

  • url - String containing the URL to which request was sent.
  • callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.

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 )  {
                         
                         $.getScript( 'result.js' ,   function( jd )    {
                              // Call custom function defined in script
                              CheckJS( );
                         } );
                    
                    } );
               } );
          </script>

     </head>

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

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

Assuming we have the following JS  content in the result.js file -

function  CheckJS(  )  {
     alert( "This is JavaScript" );
}

Output

When you click on the given button below, then result.html files will be loaded -

jQuery Example Click on the button below to load result.js file:
STAGE





jQuery.post( ) Method

jQuery.post(url, [data], [callback], [type]) method loads data from the server by making use of the POST Http request. The method returns the XMLHttpRequest object

Syntax

The following below is the syntax to use this method -

 $.post( url ,  [data] ,  [callback] , [type] );

Parameter Details

Below is the description of all the parameters -

  • url - A string containing the URL to which the request is sent.
  • data - This is an optional parameter which represents key value pairs that will be sent to the server.
  • callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.
  • type - This is an optional parameter which represents the data type to be returned to callback function: "script", "xml", "html", "json", "jsonp", or "text".

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 )  {
                         $.post( "/jquery/result.php" ,
                              { name:  "Zara" },
                              function( data )  {
                                   $( '#stage' ).html( data );
                              }
                         );
                    
                    } );
               } );
          </script>

     </head>

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

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

Assuming we have the following PHP content in /jquery/result.php file -

<?php
     
     if( $_REQUEST[ "name" ] )  {
          $name =  $_REQUEST[ 'name' ];
          echo  "Welcome".$name; 
     }
?>

Output

When you click on the given button below, then result.html files will be loaded -

jQuery Example Click on the button below to load /jquery/result.php file:
STAGE




load( ) Method 

The load(url, [data], [callback]) method loads data from the server and places the returned HTML into the matched element.

Syntax

The following below is the syntax to use this method -

 [selector].load( url ,  [data] ,  [callback] );

Parameter Details

Below is the description of all the parameters -

  • url - A string containing the URL to which the request is sent.
  • data - This is an optional parameter which represents the map of data that is sent with the request.
  • callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.

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 )  {
                                   $( '#stage' ).load( 'result.html' );
                    } );
               } );
          </script>

     </head>

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

          <div  id = "stage"  style = "background-color: green;">
               STAGE
          </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>

Output

When you click on the given button below, then result.html files will be loaded -

jQuery Example Click on the button below to load /jquery/result.html file:
STAGE





serialize( ) Method
The serialize( url, [data], [callback] ) method serializes a set of input elements into a string of data.

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

 $.serialize(  );

Parameter Details
Below is the description of all the parameters -

  • NA.

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 )  {

                         $.post(
                              "/jquery/serialize.php" ,
                              $( "testform" ).serialize( ),

                              function( data )  {
                                   $( '#stage1' ).html( data );
                              }
                         );

                         var  str =  $( "#testform" ).serialize( );
                         $( "#stage2" ).text( str );
                    } );
               } );
          </script>

     </head>

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

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

          <form  id = "testform">
               <table>
                    <tr>
                         <td>Name:</td>
                         <td><input  type = "text"  name = "name"  size = "50" /></td>
                    </tr>

                    <tr>
                         <td>Age:</td>
                         <td><input  type = "text"  name = "age"  size = "50" /></td>
                    </tr>

                    <tr>
                         <td>Sex:</td>
                         <td><select  name = "sex">
                              <option  value = "Male"  selected>Male</option>
                              <option  value = "Female"  selected>Female</option>
                         </select></td>
                    </tr>

                    <tr>
                         <td  colspan = "2">
                              <input  type = "button"  id = "driver"  value = "Load Data" />
                         </td>
                    </tr>
               </table>
          </form>
     </body>
</html>

Assume we have the below PHP content in /jquery/serialize.php file -

<?php

     if( $_REQUEST[ "name" ] )  {

          $name =  $_REQUEST[ 'name' ];
          echo "Welcome" . $name;
          $age =  $_REQUEST[ 'age' ];
          echo "<br /> Your age :  " . $age
          $sex =  $_REQUEST[ 'sex' ];
          echo "<br /> Your gender : " . $sex

     }

?>

Output
When you click on the given button below, then result.html files will be loaded -

jQuery Example Click on the button below to load /jquery/result.php file:
STAGE - 1

STAGE - 2
Name:
Age:
Sex:




serializeArray( ) Method
serializeArray() method serializes all forms and form elements just like .serialize( ) method but returns a JSON data structure for you to work with.

The JSON returned is not a string. You must make use of a plugin or third party library to convert to a string.

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

 $.serialize(  );

Parameter Details
Below is the description of all the parameters -

  • NA.

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 )  {

                         $.post(
                              "/jquery/serialize.php" ,
                              $( "testform" ).serializeArray( ),

                              function( data )  {
                                   $( '#stage1' ).html( data );
                              }
                         );

                         var  fields =  $( "#testform" ).serializeArray( );
                         $( "#stage2" ).empty( );

                         jQuery.each( fields,  function( i,  field )  {
                              $( "#stage2" ).append( field.value  +  " " );
                         } );
                    } );
               } );
          </script>

     </head>

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

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

          <form  id = "testform">
               <table>
                    <tr>
                         <td>Name:</td>
                         <td><input  type = "text"  name = "name"  size = "50" /></td>
                    </tr>

                    <tr>
                         <td>Age:</td>
                         <td><input  type = "text"  name = "age"  size = "50" /></td>
                    </tr>

                    <tr>
                         <td>Sex:</td>
                         <td><select  name = "sex">
                              <option  value = "Male"  selected>Male</option>
                              <option  value = "Female"  selected>Female</option>
                         </select></td>
                    </tr>

                    <tr>
                         <td  colspan = "2">
                              <input  type = "button"  id = "driver"  value = "Load Data" />
                         </td>
                    </tr>
               </table>
          </form>
     </body>
</html>

Assume we have the below PHP content in /jquery/serialize.php file -

<?php

     if( $_REQUEST[ "name" ] )  {

          $name =  $_REQUEST[ 'name' ];
          echo "Welcome" . $name;
          $age =  $_REQUEST[ 'age' ];
          echo "<br /> Your age :  " . $age
          $sex =  $_REQUEST[ 'sex' ];
          echo "<br /> Your gender : " . $sex

     }

?>

Output
When you click on the given button below, then result.html files will be loaded -

jQuery Example Click on the button below to load /jquery/result.php file:
STAGE - 1

STAGE - 2
Name:
Age:
Sex:



Alright guys! We have come to the end of this tutorial post on jQuery Ajax methods. In our next tutorial post, we will be discussing about the Ajax Events Methods.

Do feel free to ask your questions where necessary via the comment box below and i will attend to them as soon as possible.

Follow us on our various social media handles to stay updated with our latest tutorials. You can also subscribe to our newsletter to get our latest tutorials delivered directly to your emails.

Thanks for reading and bye for now.