DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for An Intro to AJAX: Asynchronous Javascript and XML
agrem28
agrem28

Posted on

An Intro to AJAX: Asynchronous Javascript and XML

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

Thank you for Writing this Beautiful Short Article, It was short, sweet and in-depth for Noobs Like me.

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await