Post
Ask Question

Asynchronous HTTP Call In JavaScript

Introduction

 
XMLHTTPRequest is an object which is used to perform the Asynchronous HTTP call using JavaScript. Usually, we call it an AJAX call. It is a browser object which is supported by all modern browsers and basically, it can handle any type of data which is used to communicate between the client and server using HTTP.
 

Asynchronous HTTP call

 
AsyncDemo.HTML
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <button id="btnAsync" type="button">Click Me</button>  
  9. </body>  
  10. <script>  
  11.     (function () {  
  12.         document.getElementById("btnAsync").addEventListener('click', makeRequest);//attaching click event for button   
  13.         function makeRequest() {  
  14.             var httpRequest = new XMLHttpRequest();// Initiatlization of XMLHttpRequest  
  15.             if (!httpRequest) {  
  16.                 alert(' Cannot create an XMLHTTP instance');  
  17.                 return false;  
  18.             }  
  19.             httpRequest.onreadystatechange = function () {        // ready state event, will be executed once the server send back the data   
  20.                 if (httpRequest.readyState === XMLHttpRequest.DONE) {  
  21.                     if (httpRequest.status === 200) {  
  22.                         alert(httpRequest.responseText);  
  23.                     } else {  
  24.                         alert('There was a problem with the request.');  
  25.                     }  
  26.                 }  
  27.             };  
  28.             httpRequest.open('GET', 'http://localhost:11207/api/Customer/CustomerDetails'); // service call   
  29.             httpRequest.send();  
  30.         }  
  31.     })();  
  32. </script>  
  33. </html>  
httpRequest is an instance of XMLHttpRequest().
 
The open() is used to open the HTTP request to the server, It contains five parameters where three are optional parameters - httpRequest.open(type, URL, async, user, password)
  1. httpRequest.open('GET', 'http://localhost:11207/api/Customer/CustomerDetails'); 
From the above code, you can observe that we passed the type of request and the URL with the open method.
  • Send( )- > It is basically used to post the data from the client to the server in the form of a query string, XML, JSON and so on
  • Onreadystatechange -> This event will be fired once the server sends back the response based on the request
Asynchronous HTTP Call In JavaScript
 
Asynchronous HTTP Call In JavaScript
 

Conclusion

 
We saw how to perform an Ajax call in JavaScript using the XMLHTTPRequest object and different methods and events of the object which were used to make the successful Ajax call. I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this article are always welcomed.
Next Recommended Reading Calling a JavaScript function of Parent Window from Child Window