Introduction

The Web offers a variety of APIs to build your app or website. You could access using JavaScript code. These days the browser offers many APIs to developers. In this article, we will explore the XMLHttpRequest API.
Before moving further let us look at the previous articles of the JavaScript series:

XMLHttpRequest (XHR)

It is basic of client / server communication via Browser. This API provides an easy way to get data from URL without full refresh. It was originally developed by Microsoft, and adopted by others like Google, Apple, and Mozilla. The advantage is to update parts of a web page, without full refresh or reloading the whole page.
XHR is used by many popular frameworks like AngularJS, e.g., $http is a service which operates on this. If you read the AngularJS code.
You will find $http service description:
Example
In 1st example we will create XHR object and download jQuery by sending GET request,
  1. varmyRequest = new XMLHttpRequest(); //myRequest is an object created by XHR API
  2. console.log(typeof(myRequest)); // object
  3. myRequest.open('GET', 'https://code.jquery.com/jquery-2.2.3.min.js');
  4. myRequest.send();
  5. myRequest.onreadystatechange = function()
  6. {
  7. if (myRequest.readyState == 4 && myRequest.status == 200)
  8. {
  9. console.log(myRequest.responseText);
  10. }
Hence, we will get jQuery in myRequest.responseText. Great!
Let us understand nitty gritty of few components in the above example.
Open method syntax
After open method is used we call send() to trigger the call at server but what if we change our code as below:
  1. varmyRequest = new XMLHttpRequest(); //myRequest is an object created by XHR API
  2. console.log(typeof(myRequest)); // object
  3. myRequest.open('GET','https://code.jquery.com/jquery-2.2.3.min.js');
  4. myRequest.send();
  5. console.log(myRequest.responseText); // may not get data in responseTextand there will be no error in console.

What is the benefit of onreadystatechange after we called the send method?

The reason to use onreadystatechangeevent is to ensure data in responseText. To understand this, we will understand readyState property has different value between 0 to 4:
To try this modify program like below
  1. varmyRequest = new XMLHttpRequest();
  2. myRequest.onreadystatechange = function()
  3. {
  4. switch (this.readyState)
  5. {
  6. case 0:
  7. console.log('request not initialized ');
  8. break;
  9. case 1:
  10. console.log('server connection established ');
  11. break;
  12. case 2:
  13. console.log('request received ');
  14. break;
  15. case 3:
  16. console.log('processing request ');
  17. break;
  18. case 4:
  19. console.log('request finished and response is ready ');
  20. console.log(myRequest.responseText);
  21. break;
  22. }
  23. }
  24. myRequest.open('GET', 'https://code.jquery.com/jquery-2.2.3.min.js');
  25. myRequest.send();
Output
It has not printed “case 0: console.log('request not initialized ');” because when you create a new XHR request it states is already 0, so there is no change that is triggered.
Other Events
Other Properties
We understood one HTTP verb GET, the other common HTTP verb is POST. Posts differentiate, as you are required to pass requestHeader depending upon request ex- you are submitting a form:
myRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myRequest.send("fname=sumit&lname=jolly");

Command-line utility

I am always excited to do things from the command line.

Is there a way we can leverage command-line utility to test?

Yes, use curl command. You can download curl utility and run it:
curlhttps://code.jquery.com/jquery-2.2.3.min.js
&I am saving in jQuery.js via redirection operator ‘>’.
You can run VIM editor to review jQuery.js:
$ vi jQuery.js

Summary

I hope you enjoyed this article, the next article I will share more APIs. Please share your feedback/comments.