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()
.
- 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. Inopen()
, 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);
- 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 }
- 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, theonreadystatechange
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 ); } };
- 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.
- 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();
Leave a Reply