JSON with Ajax

Sending JSON request payload and receiving the JSON response object are very common tasks while dealing with AJAX and remote REST APIs.

Making AJAX Requests with XMLHttpRequest

To make AJAX requests, we create an instance of the XMLHttpRequest object. The XMLHttpRequest object lets us make asynchronous AJAX calls to the live server.

XMLHttpRequest comes with powerful properties such as readystate, response, and responseText. It aos provides useful methods such as open(), onuploadprogress(), onreadystatechange(), and send().

1. The first step to make an AJAX request is calling the open() method with HTTP URL/endpoint. XMLHttpRequest, by default, opens up an asynchronous request. In open(), we specify the HTTP method in which the request has to be sent.

   var xmlhttp = new XMLHttpRequest();
   xmlhttp.open("POST", "/url/to/the/api/endpoint", true);
   

2. We can set up a callback function and assign the callback to the method onreadystatechange. We can assign the callback method to onuploadprogress, if we are using the AJAX request to upload a file.

   xmlhttp.onreadystatechange = function() 
   {
   	//function body
   }
   

3. During the AJAX request progress, we need to check for a property in the xmlhttp object called readyState. The readyState property keeps track of the progress of the XMLHttpRequest that is made.

   Whenever the value of readyState changes, the onreadystatechange method is invoked.

   For example, if the value of readyState is 4, it means that the server has received the request that was made by the client and a response is ready to be sent.

   xmlhttp.onreadystatechange = function() 
   {
       if (this.readyState == 4 && this.status == 200) 
       {
           var responseJsonObj = JSON.parse(this.responseText);
   
           console.log( responseJsonObj.name );
           console.log( responseJsonObj.age );
       }
   };
   

4. In previous example, we used another property called the status. This is the HTTP status code that is coming back from the server.

   For example, status code 200 represents a successful transaction, while status code 400 is a bad request.

5. Finally, use the send() method to send the request over to the server.

   xmlhttp.send();

   If we want to post some data to server, we can use send() method for it.

   var data = {"name" : "Lokesh"};
   xmlhttp.send( JSON.stringify( data ) );
   

Sending JSON in AJAX Request Body

Javascript example to make an HTTP POST request to the server using AJAX, and posting the JSON string as the request body.

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/demo", true);

xmlhttp.onreadystatechange = function() 
{
    if (this.readyState == 4 && this.status == 200) 
    {
    	//Use parse() method to convert JSON string to JSON object
        var responseJsonObj = JSON.parse(this.responseText);

        //use response
    }
};

var jsonData = {"name" : "Lokesh"};
xmlhttp.send( JSON.stringify( jsonData ) );

Recieving JSON in AJAX Response

Javascript example to make an HTTP request to the server using AJAX, and processing the JSON response received from the server.

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() 
{
    if (this.readyState == 4 && this.status == 200) 
    {
    	//Use parse() method to convert JSON string to JSON object
        var responseJsonObj = JSON.parse(this.responseText);

        console.log( responseJsonObj.name );
        console.log( responseJsonObj.age );
    }
};

xmlhttp.open("GET", "/demo", true);
xmlhttp.send();