How to use an HTTP GET or POST for Ajax Calls ?

0 0 2 minutes read

Sending an HTTP request to the server using AJAX is the most common way of fetching data these days. It provides us with methods to send and receive data. In this article, we are going to discuss GET and POST methods.

GET method: This method is used to GET or RECEIVE the data from a file, API, etc.

How to use GET method?
To use the GET method, first, we have to initialize XMLHttpRequest() object, then inside the open() method of this object you have to specify the method (GET in this case) and the URL for the requested data. The syntax for the same is shown below:

Syntax:

var rqst = new XMLHttpRequest();
rqst.open('GET', url);

Example:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        How to use an Http get or 
        Post for my Ajax Calls?
    </title>
     
    <style>
        #container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
 
        #btnDiv {
            width: 20vw;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }
 
        .btn {
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h2 id="heading">Hey Geek,</h2>
        <div id="btnDiv">
            <button class="btn" onclick="requestData()">
                Request Data
            </button>
        </div>
    </div>
 
    <script>
        var head = document.getElementById('heading');
        var request = new XMLHttpRequest();
        function requestData() {
            request.onload = function () {
                head.innerHTML = this.responseText;
            }
            request.open('GET', 'gfgInfo.txt', true);
            request.send();
        }
    </script>
</body>
 
</html>

Output:

POST method: The POST method is used to send or transmit the data to the place where you want.

How to use the POST method?
To use the POST method, we have to initialize the XMLHttpRequest() as we did in GET method, then inside the open() method, we have to pass POST instead of GET this time, and a URL to the file to which we have to send the data. After that, we have to pass the data inside the send() method. Here we will also use setRequestHeader() method that tells the server to process the data that we sent, as shown in the below syntax:

Syntax:

var sendDATA=[1,2,3];
var rqst = new XMLHttpRequest();
rqst.open('POST', url);
rqst.setRequestHeader('Content-type', 
    'application/json; charset=UTF-8');
rqst.send(sendDATA);

Example:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        How to use an Http get or 
        Post for my Ajax Calls?
    </title>
     
    <style>
        #container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
 
        #btnDiv {
            width: 20vw;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }
 
        .btn {
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h2 id="heading">Hey Geek,</h2>
        <div id="btnDiv">
            <button class="btn" onclick="sendRequest()">
                Send Data
            </button>
        </div>
    </div>
 
    <script>
        var head = document.getElementById('heading');
        let sendingData = {
            id: 1,
            title: "Welcome to GFG",
            body: "A computer science portal for all zambiatek"
        }
        let data = JSON.stringify(sendingData);
 
        const url = 
            "https://jsonplaceholder.typicode.com/users";
 
        function sendRequest() {
            let request = new XMLHttpRequest();
 
            request.open('POST', url, true);
            request.setRequestHeader('Content-type', 
                'application/json; charset=UTF-8');
            request.send(data);
 
            request.onload = function () {
                if (request.status === 201) {
                    head.innerHTML = "Data posted successfully!";
                }
            }
        }
    </script>
</body>
 
</html>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!