jQuery ajax() Method

Last Updated : 17 Sep, 2024

The jQuery ajax() method is used to perform asynchronous HTTP requests, allowing you to load data from a server without reloading the webpage. It provides a flexible way to interact with remote servers using GET, POST, or other HTTP methods, supporting various data formats.

Syntax:

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

Parameters: The list of possible parameter that can be passed to an Ajax request are listed below:

Property	Description
type	Specifies the request type as POST or GET.
url	Specifies the URL to send the request to.
username	Specifies the username for HTTP access authentication.
xhr	Creates the XMLHttpRequest object.
async	Default is `true`. Specifies if the request is asynchronous.
beforeSend(xhr)	A function executed before the request is sent.
dataType	Expected data type of the server response.
error(xhr, status, error)	A function executed if the request fails.
global	Default is `true`. Specifies whether to trigger global AJAX events for the request.
ifModified	Default is `false`. A request is successful only if the response has changed.
jsonp	Overrides the callback function for JSONP requests.
jsonpCallback	Specifies a name for the callback function in a JSONP request.
cache	Default is `true`. Indicates whether the browser should cache requested pages.
complete(xhr, status)	A function that runs when the request is finished.
contentType	Default is `"application/x-www-form-urlencoded"`. Specifies content type of data sent.
context	Specifies the “this” value for all AJAX-related callbacks.
data	Specifies data to be sent to the server.
dataFilter(data, type)	Handles raw response data from the XMLHttpRequest.
password	Specifies a password for HTTP access authentication.
processData	Default is `true`. Specifies if the data should be transformed into a query string.
scriptCharset	Specifies the charset for the request.
success(result, status, xhr)	Runs when the request succeeds.
timeout	Local timeout for the request, measured in milliseconds.
traditional	Specifies whether to use the traditional style of parameter serialization.

Example 1: In this example we use jQuery’s ajax() method to load content from “geeks.txt” into an <h3> element when the button is clicked. The request is handled asynchronously, displaying the text on success.

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

geeks.txt

"hello geeks !"

Output:

jquery-70

Example 2: In this example we use jQuery’s ajax() method to fetch content from “geeks.txt” and display it in an <h3> element when the button is clicked. It includes error handling with a console log.

<!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>
</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>
        $(document).ready(function () {
            $("button").click(function () {
                $.ajax({
                    url: "geeks.txt",
                    success: function (result) {
                        $("#h11").html(result);
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            });
        });
    </script>
</body>

</html>

Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.