jQuery | ajax() Method - GeeksforGeeks

The ajax() method in jQuery is used to perform an AJAX request or asynchronous HTTP request.

Syntax:

$.ajax({name:value, name:value, ... })

Parameters: The list of possible values are given below:

type: It is used to specify the type of request.
url: It is used to specify the URL to send the request to.
username: It is used to specify a username to be used in an HTTP access authentication request.
xhr: It is used for creating the XMLHttpRequest object.
async: It’s default value is true. It indicates whether the request should be handled asynchronous or not.
beforeSend(xhr): It is a function which is to be run before the request is being sent.
dataType: The data type expected of the server response.
error(xhr, status, error): It is used to run if the request fails.
global: It’s default value is true. It is used to specify whether or not to trigger global AJAX event handles for the request.
ifModified: It’s default value is false. It is used to specify whether a request is only successful if the response has changed since the last request.
jsonp: A string overriding the callback function in a jsonp request.
jsonpCallback: It is used to specify a name for the callback function in a jsonp request.
cache: It’s default value is true. It indicates whether the browser should cache the requested pages.
complete(xhr, status): It is a function which is to be run when the request is being finished.
contentType: It’s default value is: “application/x-www-form-urlencoded” and it is used when data send to the server.
context: It is used to specify the “this” value for all AJAX related callback functions.
data: It is used to specify data to be sent to the server.
dataFilter(data, type): It is used to handle the raw response data of the XMLHttpRequest.
password: It is used to specify a password to be used in an HTTP access authentication request.
processData: It’s default value is true. It is used to specify whether or not data sent with the request should be transformed into a query string.
scriptCharset: It is used to specify the charset for the request.
success(result, status, xhr): It is to be run when the request succeeds.
timeout: It is the local timeout for the request. It measured in terms of milliseconds.
traditional: It is used to specify whether or not to use the traditional style of param serialization.

Example 1: This example use ajax() method to add the text content using ajax request.

<!DOCTYPE html> 
<html> 
      
<head>  
    <title> 
        jQuery ajax() Method 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <script> 
        $(document).ready(function() { 
            $("li:parent").css("background-color", "green"); 
        }); 
    </script> 
</head>  
  
<body style="text-align:center;"> 
  
    <h1 style="color:green"> 
        GeeksForGeeks 
    </h1> 
      
    <h2> 
        jQuery ajax() Method 
    </h2> 
      
    <h3 id="h11"></h3> 
      
    <button>Click</button> 
      
    <!-- Script to use ajax() method to 
        add text content -->
    <script> 
        $(document).ready(function() { 
            $("button").click(function() { 
                $.ajax({url: "geeks.txt",  
                        success: function(result) { 
                    $("#h11").html(result); 
                }}); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Before Clicking the button:
After Clicking the button:

Example 2: This example illustrates the ajax() method in jQuery.

<!DOCTYPE html> 
<html> 
  
<head>  
    <title> 
        jQuery ajax() Method 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <script> 
        $(document).ready(function() { 
            $("li:parent").css("background-color", "green"); 
        }); 
    </script> 
</head>  
  
<body style="text-align:center;"> 
   
    <h1 style="color:green"> 
        GeeksForGeeks 
    </h1> 
      
    <h2>jQuery ajax() Method</h2> 
      
    <h3 id="h11"></h3> 
      
    <button>Click</button> 
      
    <!-- Script to use ajax() method to 
        add text content -->
    <script> 
        $(document).ready(function(){ 
            $("button").click(function(){ 
                $.ajax({url: "geeks_exp.txt", async: false, 
                                success: function(result) { 
                    $("h11").html(result); 
                }}); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Before Clicking the button:
After Clicking the button:

My Personal Notes

Recommended Posts: