How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests ?

Last Updated : 20 Jun, 2022

In this article, we are going to see how we can use jQuery's ajax() function to call backend function asynchronously or in other words HTTP Requests. AJAX is a set of web development techniques used by client-side frameworks and libraries to make asynchronous HTTP calls to the server. AJAX stands for "Asynchronous JavaScript and XML".

In simpler words, you can use Ajax to load data from backend without actually the page reloading. You can also send data to the server in the background, request data and receive data while the page has already loaded. Using ajax gives way better user experience on the application.

Syntax:

$.ajax(url);
$.ajax(url,[options]);

The following table lists downs commonly used options with ajax request.

url	A string containing the URL to which the request is sent.
type	A type of http request e.g. POST, PUT and GET. Default is GET request.
contentType	A string containing a type of content sent to the server.
dataType	The type of data that you're expecting back from the server, JSON, XML, etc.
success	A callback function to be executed when Ajax request succeeds.
error	A callback function to be executed when the request fails.
data	A data to be sent to the server. It can be JSON object, string or array.

Creating a simple AJAX GET request

Before we can use Ajax, we need to get jQuery in your application. For this article, we will use the Ajax jQuery script available online as in the code below. For the purpose of this article, we will be considering a JSON file where we will be sending an ajax() request and retrieve data from the file.

Let's consider that the JSON file named "data.json" is inside a folder named data which is in the root directory or in other words the folder where our html file currently is and has the data as shown below.

Note: Remember that you need to be on localhost or some deployed path for ajax requests to work otherwise it will give you a CORS (Cross-Origin Resource Sharing) error.

The data.json file:

[
    {
        "Name":"Aman Prakash Jha",
        "Occupation": "Student"
    },
    {
        "Name":"Sharan Swaroop",
        "Occupation":"SDE-1"
    },
    {
        "Name":"Chiraag Kakar",
        "Occupation":"Sr. Software Engineer"
    }
]

Example:

HTML

<!DOCTYPE html>
<html>

<head>

    <!--Loading the script so that we can use Ajax-->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>

<body>
    <h2>Welcome To GFG</h2>

    
<p>
        Default code has been 
        loaded into the Editor.
    </p>


    <button id="getData">GET</button>
    
    <script>
        $("#getData").click(function (event) {
            event.preventDefault();
            $.ajax({
                url: "data/data.json",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    
                    // This here will print the
                    // retrieved json on the console.
                    console.log(data);
                },
                error: function () {
                    console.log("Something went wrong");
                },
            });
        });
    </script>
</body>

</html>

Output:

[
    {
        "Name":"Aman Prakash Jha",
        "Occupation": "Student"
    },
    {
        "Name":"Sharan Swaroop",
        "Occupation":"SDE-1"
    },
    {
        "Name":"Chiraag Kakar",
        "Occupation":"Sr. Software Engineer"
    }
]

Sending a simple AJAX POST request

Now let's move on and try sending a "POST" request using the ajax() method.

For this example, we will be using a simple python function written in flask-microframework which will receive the POST request from ajax() and simply return the data. If you wish to know more about flask you can read its official documentation here.

Python

from flask import Flask, redirect, render_template, request

app = Flask(__name__)

@app.route('/data/post_data/', methods = ["GET","POST"])
def post_data():
    '''Function which is supposed to process the
    POST request received from ajax'''
    data = None 
    if request.method == "POST":
        '''Stores the Json file that is posted by ajax.
        This function simply returns the Json file 
        it receives.'''
        data = request.get_json()
        print(data)
        return ({"status":200, "data":data})
    return render_template("post.html")

if __name__ == '__main__':
    app.run(debug=True)

Example: This is how you can set the HTML with ajax() for the "POST" request.