What are various methods to make ajax request in jQuery ?

In this article, we will see the various methods to make Ajax requests in JQuery. An Ajax request is made to get a response from a server or external website. Ajax Request and Response is the communication between the client and server. jQuery’s AJAX methods allow you to request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post. We can also load external data directly into selected HTML elements on your website. JQuery provides the following methods to make an ajax Request:

$.ajax() method: This is the most common method used to retrieve data from the server. This method allows you to request data synchronously or asynchronously using HTTP GET/POST methods.

Syntax:

$.ajax({
    url: "/path",
    type: "POST/GET",
    async: true/false,
    success: function(response) {
        // task ...
    }
})

$(selector).load() method: This function can load data from files such as HTML, TXT, XML, and JSON. This is a simple but powerful way to load data from the server and paste it into the selected item.

Syntax: 

$(selector).load(url,data,callback)

$.get() method: This method is used to make an HTTP GET request to retrieve data from the server. This method allows you to retrieve the response from the server via the GET method. The HTTP GET method is only used to retrieve data from the server.

Syntax:

$.get(url,data,callback)

 $.post() method: This method sends data to the server using the HTTP POST method. This method allows you to request data from the server by including additional information in your request as a query string. 

Syntax:

$.post(url,data,callback)

$.getJSON() method: This method allows you to make an HTTP GET request to retrieve JSON-encoded data from the server.

Syntax:

$(selector).getJSON(url,data,success(callback))

To run the following examples, we need to import the Ajax Jquery Request into the web pages by using the following CDN link to import the Ajax Jquery into your project:

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>

Please refer to the jQuery AJAX Complete Reference article for other methods that are used to make the ajax request in jQuery

Example 1: In this example, our task is to use the $.load() Ajax jquery method and retrieve the data from the Index.html page, and put data into the ‘div’ element of the External.html page.

• Index.html:

• External.html:

Output:

 

Example 2: In this example, our task is to use the $.ajax() Ajax jquery method and retrieve the data from the Index.html page, and put data into the ‘div’ element of the External.html page.

• Index.html:

• External.html:

Output:

 

Example 3: In this example, our task is to use the $.getJSON() Ajax jquery method and retrieve the data from the Index.json page, and put data into the ‘div’ element of the External.html page. Here, we want the JSON Object in response from the index.json file. 

Create the index.json file and insert the following sample JSON object:

{
    "Title":"GeeksforGeeks",
    "Platform": "Coding",
    "Prepare": "Placement Interviews",
    "Courses": [
        "Web Development",
        "DBMS",
        "DSA"
    ]
}

External.html:

Output: