Sending JSON request payload and receiving the JSON response object are very common tasks while dealing with AJAX and remote REST APIs.<\/p>\n\n\n\n
To make AJAX requests, we create an instance of the The first step to make an AJAX request is calling the We can set up a callback function and assign the callback to the method onreadystatechange<\/strong>. We can assign the callback method to During the AJAX request progress, we need to check for a property in the Whenever the value of For example, if the value of In the previous example, we used another property called the For example, status code 200 represents a successful transaction, while status code 400 is a bad request.<\/p>\n\n\n\n Finally, use the If we want to post some data to server, we can use Javascript example to make an HTTP POST request to the server using AJAX, and posting the JSON string as the request body.<\/p>\n\n\n\n Javascript example to make an HTTP request to the server using AJAX, and processing the JSON response received from the server.<\/p>\n\n\n\n Sending JSON request payload and receiving the JSON response object are very common tasks while dealing with AJAX and remote REST APIs. 1. AJAX 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 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":249,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[19,17],"_links":{"self":[{"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/posts\/261"}],"collection":[{"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/comments?post=261"}],"version-history":[{"count":0,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/posts\/261\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/media\/249"}],"wp:attachment":[{"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/media?parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/categories?post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/tags?post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}XMLHttpRequest<\/code> object. The XMLHttpRequest<\/code> object lets us make asynchronous AJAX calls to the live server.<\/p>\n\n\n\nXMLHttpRequest<\/code> comes with powerful properties such as readystate<\/code>, response<\/code>, and responseText<\/code>. It also provides useful methods such as open()<\/code>, onuploadprogress()<\/code>, onreadystatechange()<\/code>, and send()<\/code>.<\/p>\n\n\n\nopen()<\/code> method with HTTP URL\/endpoint. XMLHttpRequest<\/code>, by default, opens up an asynchronous<\/strong> request. In open()<\/code>, we specify the HTTP method in which the request has to be sent.<\/p>\n\n\n\nvar xmlhttp = new XMLHttpRequest();\r\nxmlhttp.open(\"POST\", \"\/url\/to\/the\/api\/endpoint\", true);<\/code><\/pre>\n\n\n\nonuploadprogress<\/code>(), if we are using the AJAX request to upload a file.<\/p>\n\n\n\nxmlhttp.onreadystatechange = function()\r\n{\r\n\/\/function body\r\n}<\/code><\/pre>\n\n\n\nxmlhttp<\/code> object called readyState<\/strong>. The readyState property keeps track of the progress of the XMLHttpRequest that is made.<\/p>\n\n\n\nreadyState<\/code> changes, the onreadystatechange<\/code> method is invoked.<\/p>\n\n\n\nreadyState<\/code> 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.<\/p>\n\n\n\nxmlhttp.onreadystatechange = function()\r\n{\r\n\tif (this.readyState == 4 && this.status == 200)\r\n\t{\r\n\t\tvar responseJsonObj = JSON.parse(this.responseText);\r\n\r\n\t\tconsole.log( responseJsonObj.name );\r\n\t\tconsole.log( responseJsonObj.age );\r\n\t}\r\n};<\/code><\/pre>\n\n\n\nstatus<\/code>. This is the HTTP status code that is coming back from the server.<\/p>\n\n\n\nsend()<\/code> method to send the request over to the server.<\/p>\n\n\n\nxmlhttp.send();<\/code><\/pre>\n\n\n\nsend()<\/code> method for it.<\/p>\n\n\n\nvar data = {\"name\" : \"Lokesh\"};\r\nxmlhttp.send( JSON.stringify( data ) );<\/code><\/pre>\n\n\n\n2. Sending JSON in AJAX Request Body<\/h2>\n\n\n\n
var xmlhttp = new XMLHttpRequest();\r\nxmlhttp.open(\"POST\", \"\/demo\", true);\r\n\r\nxmlhttp.onreadystatechange = function()\r\n{\r\n\tif (this.readyState == 4 && this.status == 200)\r\n\t{\r\n\t\t\/\/Use parse() method to convert JSON string to JSON object\r\n\t\tvar responseJsonObj = JSON.parse(this.responseText);\r\n\r\n\t\t\/\/use response\r\n\t}\r\n};\r\n\r\nvar jsonData = {\"name\" : \"Lokesh\"};\r\nxmlhttp.send( JSON.stringify( jsonData ) );<\/code><\/pre>\n\n\n\n2. Recieving JSON in AJAX Response<\/h2>\n\n\n\n
var xmlhttp = new XMLHttpRequest();\r\n\r\nxmlhttp.onreadystatechange = function()\r\n{\r\n\tif (this.readyState == 4 && this.status == 200)\r\n\t{\r\n\t\t\/\/Use parse() method to convert JSON string to JSON object\r\n\t\tvar responseJsonObj = JSON.parse(this.responseText);\r\n\r\n\t\tconsole.log( responseJsonObj.name );\r\n\t\tconsole.log( responseJsonObj.age );\r\n\t}\r\n};\r\n\r\nxmlhttp.open(\"GET\", \"\/demo\", true);\r\nxmlhttp.send();<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"