Saturday, May 9, 2020

JQuery AJAX Methods



Hello guys! Welcome to a new section of my tutorial on jQuery. In this tutorial, am going to be talking out my time to discuss 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 

jQuery.ajax( options ) method loads a remote page using an HTTP request.

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

Syntax

Below is the syntax to make use of this method -

 $.ajax( options )

Parameter Details

Below is the description of all the parameters -

  • options - 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 make use of 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 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 - 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 make use of 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 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 optional parameter represents key value pairs that will be sent to the server.
  • callback - This optional parameter represents a function to be executed whenever the data is loaded successfully.
  • type - This optional parameter represents the type of data to be returned to the 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 

The jQuery.getJSON( url, [data], [callback] ) method loads JSON data from the server using a GET HTTP Request.

This method returns 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 optional parameter represents key value pairs that will be sent to the server.    
  • callback - This optional parameter 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>

Assuming we have the following 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 

The jQuery.getScript(url, [callback]) method loads and executes a JavaScript file by using an HTTP GET Request.

This method returns XML Http Request object.

Syntax

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 optional parameter 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 

The jQuery.post(url, [data], [callback], [type]) method loads data from the server by using the POST HTTP Request. The method returns the XMLHttpRequest object

Syntax

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 optional parameter represents key value pairs that will be sent to the server.
  • callback - This optional parameter represents a function to be executed whenever the data is loaded successfully.
  • type - This optional parameter represents the type of data to be returned to the 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

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 optional parameter represents the map of data that is sent with the request.
  • callback - This optional parameter 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>

Assuming we have the following 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
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>

Assuming we have the following 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( url, [data], [callback] ) method serializes all forms and form elements just like the .serialize( ) method but returns a JSON data structure for you to work with.

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

Syntax
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>

Assuming we have the following 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 my next tutorial post, i will be discussing about the Ajax Events Methods.

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.
Share:

0 comments:

Post a Comment