Skip to content
Related Articles

Related Articles

Improve Article

jQuery | ajax() Method

  • Last Updated : 05 Apr, 2019

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=
    </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=
    </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 arrow_drop_up
Recommended Articles
Page :