AJAX : Asynchronous JavaScript And XML

AJAX stands for Asynchronous JavaScript And XML. AJAX is not a new technology but it is a technique. It is a term that is firstly penned by James Garrett in 2005. Basically, It is a way of using many existing technologies like HTML, CSS, JavaScript, XML, Document Object Model, and main important part is XMLHttpRequest object. When all these technologies work together with AJAX technique, User Interface updates itself without reloading the whole web page. Basically, AJAX will communicate with the server, get data from the server, update UI on the basis of that data without reloading the whole web page.

History of AJAX :

Before 2005, communication between client-side and server-side was harder to establish. Developers use hidden iframes to populate the server data to the client-side. But in 2005, James Garrett write an article named AJAX: a new approach to Web applications. The key technology is used in AJAX is XMLHttpRequest(XHR), firstly invented by Microsoft and then use by other browsers. XHR has capabilities to retrieve data from server-side and populate on client-side with the help of existing technologies. Before 2005, developers use different technologies for communication with server-side such as Java Applets or Flash movies.

XMLHttpRequest Object :

Internet Explorer 5 was the first browser who introduced XHR (XMLHttpRequest) object in the internet world. Internet Explorer includes ActiveX object in MSXML library. Internet Explorer has three version of XHR object :

1. MSXML2.XMLHttp
2. MSXML2.XMLHttp.3.0
3. MSXML2.XMLHttp.6.0

Create XHR object for Internet Explorer 7+ :

Elaboration of above code :

1. This function tries to create most latest version of XHR available on Internet Explorer.
2. In this function, firstly we can check the type of arguments.callee.activeXstring. If type of this activeXstringis not string, then we create an array of latest version of XHR includes in MSXML for Internet Explorer.
3. After that we apply the forloop to assign the latest version of XHR to arguments.callee.activeXstring.
4. At the last line of that function we return a new instance of ActiveXObject with latest version of XHR.

return new ActiveXObject(argument.callee.activeXString);

Note : This function only works on IE7+

All modern browser including IE 7+, Google Chrome, Safari, Firefox supports the native XHR object. Native XHR object can be created by using XMLHttpRequest constructor.

var xhr = new XMLHttpRequest();

Create XHR object for earlier version of Internet Explorer :

The above function is best suited for the greater version than IE 7. If you want to create an XMLHttpRequest object for the pervious version of IE, extend the above function to check the support of native XMLHttpRequest in the Internet Explorer.

Elaboration of above code :

1. This function checks if the browser supports the native XHR than return the new instance of XMLHttpRequestconstructor.
2. If browser supports ActiveX then set latest version of XMLHttpRequest by MSXML.
3. In the last check if browser neither support native XHR nor ActiveX , so throw an error with “No XHR Supports” message.

Syntax of XMLHttpRequest :

xhr.open(method:string,url:string,asynchronous:boolean)

To start with the XMLHttpRequest object, first call the open() method of XHR. It has three arguments :

1. method (GET, POST, DELETE)
2. url(requested URL)
3. true(asynchronous or synchronous)

Example :

xhr.open("get", "data.json", true);

Point to be noted for above example:

1. We call the open() method of an XHR object to prepare the request to be sent only. We cannot call the XHR request by using open() method only.
2. In this method, the first parameter is for Http Request methods like GET, PUT, POST, DELETE etc. As per Http standards, use these methods in capital letters, otherwise, some browser behaves unexpectedly like Firefox.
3. Second parameter in open() method is URL. If you use same domain URL, your call goes smoothly otherwise if you use cross-domain URL, you fight with cross-origin like errors.
4. The last parameter has the main power. The last parameter will be decided that your request goes as an asynchronous type or synchronous type. By default, it sets as an asynchronous type.

Above line of code just prepare the request which sent to the server. For sending the XHR request we use send() method.

xhr.send(null);

In the send() method, we can send data as the parameter or null because this argument is required for some browsers. If you don’t have data to send, set this argument to null.

xhr.open("get", "data.json", true);
xhr.send(null);

Above request is an asynchronous type of request. So, we cannot wait for the response to this request. With the response, we have some data with relevant properties :

1. responseText
2. responseXML
3. status
4. statusText

responseText :

responseText has the text value which returned as the body of response.

responseXML :

responseXML returns with value when content-type set to text/xml or application/xml otherwise it gives null value.

status :

This property sends HTTP status of the response.

statusText :

This property sends the HTTP status text of the response.

Elaboration of above code :

1. In the first line, we create an XMLHttpRequest instance by the using of XMLHttpRequest()

var xhr = new XMLHttpRequest();

2. In the next line, we can prepare the request to be send by send() method

xhr.open("GET", "data.json", true);

3. In the next line of code, we can send the request by send() method.

xhr.send(null);

4. After we get the response, check the status code. On the basis of status code, we retrieve the data or error. If status code is equal to or greater than 200 and less than 300 or 304. We alert the responseText, otherwise alert the status code of error.

if((xhr.status>= 200 && xhr.status<300) || xhr.status === 304){ 
     alert(xhr.responseText);
  }else{  
     alert("Some problem "+ xhr.status);
}

Phases of Request/Response Cycle (readyState) :

1. 0 — Uninitialized — open() is not called yet.
2. 1 — Open — open() method called but send () method not called.
3. 2 — Send — send() method waiting for response.
4. 3 — Receiving — Some response data received.
5. 4 — Completed — All response data is received and available for use.

readyState Event :

When the phases of readyState changes from one phase to another readystatechange event are fired. We can use onreadystatechange event handler to handle the phases of readyState. For frontend developers, only last phase is important because at this phase all data is received and available for use.

Elaboration of above code :

In the above code, we implement one enhancement is that we can check the readyState phase of XMLHttpRequest. We apply the check if readyState is 4, then we implement and put logic on retrieved data.

xhr.readyState === 4

Abort the XMLHttpRequest:

We can use abort() method to cancel the asynchronous XMLHttpRequest before response is received.

xhr.abort();

Conclusion :

The aim of this article is giving the basics information of AJAX. If you face any problem in this article or in JavaScript programming free to mail or message me on vsvaibhav2016@gmail.com.