Voice of a Developer: XMLHttpRequest API

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:

* @description

* The `$http` service is a core Angular service that facilitates communication with the remote

* HTTP servers via the browser's [XMLHttpRequest]

* object or via [JSONP]

Example

In 1st example we will create XHR object and download jQuery by sending GET request,

varmyRequest = new XMLHttpRequest(); //myRequest is an object created by XHR API
console.log(typeof(myRequest)); // object
myRequest.open('GET', 'https://code.jquery.com/jquery-2.2.3.min.js');
myRequest.send();
myRequest.onreadystatechange = function()
{
if (myRequest.readyState == 4 && myRequest.status == 200)
{
console.log(myRequest.responseText);
}

Hence, we will get jQuery in myRequest.responseText. Great!

Let us understand nitty gritty of few components in the above example.

Open method syntax

method: GET, POST
url: Location of API
async: True means asynchronous or false means synchronous
user: If API needs authentication

password: If API needs password

After open method is used we call send() to trigger the call at server but what if we change our code as below:

varmyRequest = new XMLHttpRequest(); //myRequest is an object created by XHR API
console.log(typeof(myRequest)); // object
myRequest.open('GET','https://code.jquery.com/jquery-2.2.3.min.js');
myRequest.send();
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:

0: Request not initialized
1: Server connection established
2: Request received
3: Processing request
4: Request finished and response is ready

To try this modify program like below

varmyRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function()
{
switch (this.readyState)
{
case 0:
console.log('request not initialized ');
break;
case 1:
console.log('server connection established ');
break;
case 2:
console.log('request received ');
break;
case 3:
console.log('processing request ');
break;
case 4:
console.log('request finished and response is ready ');
console.log(myRequest.responseText);
break;
}
}
myRequest.open('GET', 'https://code.jquery.com/jquery-2.2.3.min.js');
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

abort: To terminate XHR request if its sent
progress: You can monitor progress while the result is downloading
error: In case of any error generated

Other Properties

responseType: It could vary depending upon response sent by the server, ex- json, document, text, blob.
responseURL: This will be the final URL after redirects.
timeout: Number of milliseconds a request can take before terminating.

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.

11 Comments

Join the conversation! Your thoughts help the community grow.

Rajib Das Gupta10y ago
Great one
Neeraj Kumar10y ago
Good
Kuppurasu Nagaraj10y ago
Nice sharing..
Debasis Saha10y ago
Nice one..
Guest User10y ago
a. CORS b. JSONP c. Disable browser cross domain flag (chromium-browser --disable-web-security)
Guest User10y ago
Dear Maruthi Palllamalli, thanks for reading & asking question! I think XMLHttpRequest is easy to fetch data, you may differ with it. You raised a valid point Cross Domains. There are various ways to solve this Cross Domain issue....
Maruthi Palllamalli10y ago
How did you say 'XMLHttpRequest ' is an easy way to get data from url. Can we get data from cross domains like from ('http://localhost:8080/Service.svc/getdata') webservices or wcf services ?
Guest User10y ago
thnx Jitenfra
Guest User10y ago
Thanks Bhuvanesh
Bhuvanesh Mohankumar10y ago
Great Series
Jitendra Kumar10y ago
Good One...Thanks for sharing..