An Intro to AJAX: Asynchronous Javascript and XML

#javascript #beginners

In the dark ages of the internet, web pages were built solely on HTML files. This means that each time the user made a change a completely new page must be loaded. Even if only a small change was made, all content must be rerendered and all data resent. This data transfer caused bandwidth to be an important factor in performance.

Then in 1998, Microsoft developed the XMLHttpRequest object, which allowed data to be sent and received from the server asynchronously from the page. This allows elements to be updated without the page needing to reload, reducing data transfer sizes. Google would use this new object in their implementations of their updated apps, namely Gmail and Google Maps. The term AJAX was first published in an article by Jesse James Garrett in 2005 titled “Ajax: A New Approach to Web Applications” about Google’s techniques used in Google Pages. Since then, XMLHttpRequest has become the official Web standard concerning asynchronous programming.

Components

It’s important to know that AJAX is not a language, library, or framework. It is simply a set of techniques that employ existing technologies in a unique way: namely, in a way that allows web apps to send and retrieve data to and from the server while not interfering with the page display. The component used are as follows:

HTML and CSS to build the page,
JSON or XML to store data (JSON has become the norm over XML in recent years),
The DOM which displays the page and allows interaction with data,
The XMLHttpRequest object which allows asynchronous communication with the server, and
Javascript to bring all the elements together.

The XMLHttpRequest Object

The most important of these components is the XMLHttpRequest object. It facilitates the transfer of data to and from the server asynchronously through its methods: open, setRequestHeader, send, and onreadystatechange.

HTTP and HTTPS requests must first be initialized using the open method.

open(method, url, asynchronous, userName, password)

The first parameter method refers to the HTTP request methods: GET, HEAD, POST, PUT, DELETE, etc. The url parameter refers to the server location. The third parameter is an optional boolean value referring to the synchronous nature of the request. This value is set to true by default. The final two parameters are set up for optional security measures.

After a request has been initialized, the setRequestHeader method can be used to change HTTP headers, effectively settings by which the request abides.

setRequestHeader(name, value)

name signifies the header and value represents the intended setting.

When ready to process the request, the send method is used to start the transfer.

send(data)

Data is always needed when sending a request such as with the HTTP methods GET and HEAD.

When open is called with the third parameter set to true, the onreadystatechange method will automatically be invoked on any call which changes the state of the readyState property of the XMLHttpRequest object. A state is determined by a number from 0-4:

0: a request has not been initialized
1: a request has been started by invoking the open method
2: a request has been set up and sent by invoking send after setRequestHeader
3: the sent data has begun to load server-side
4: the data has been fully received and processed

Once processed, the data can be accessed by invoking the responseXML or responseText properties of the XMLHttpRequest object.

This example shows a full request process using XMLHttpRequest methods.

var request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (this.readyState === 4){
        alert(this.readyState);
    }
};
request.open('GET', 'somepage.html', true);
request.setRequestHeader('Content-Type', 'application/json');
request.send(null);

By utilizing the HTTP request methods and the XMLHttpRequest object methods you can create some efficient and beautiful webpages and applications.