lukeprosserBlogProjects

AJAX Part 1: What Is AJAX?

So what the heck is AJAX? If you haven't long started out in web development, you've probably heard this term a few times but it can seem pretty darn mysterious.

This article is the first in a series all about AJAX. In this first guide we'll explore what AJAX is, why it's important, and how you can apply it in your own applications.

By the end of the article you will be able to:

What is AJAX?

'AJAX' stands for 'Asynchronous JavaScript and XML'.

Ok, so what does that mean exactly? Essentially, rather than being a single technology, AJAX is actually a set of web technologies. When combined together, these technologies enable an application to send and receive data asynchronously.

You've no doubt experienced a traditional website or web app where the page has to reload when you submit a request for some data. For example, you might enter some information into a form, or search for some content in a search bar.

Before AJAX, the page had to be refreshed to submit the request and load the updated content on the page. Using AJAX, we don't need to interfere with the current web page, so there's no need to reload the entire page.

The request/response process is therefore asynchronous. As we're dealing with the browser, the programming language used to write this code is JavaScript.

XML

But what about the 'XML' part?

XML stands for 'Extensible Markup Language' and it was first published in 1998. According to Wikipedia, it:

...defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.

However, XML is just one of the data types that can be used.

More like 'AJAJ'

Nowadays any modern web application is much more likely to be sending and receiving data as JSON rather than XML, which has largely been replaced.

I therefore find it more useful to think of the process in terms of 'AJAJ' i.e. 'Asynchronous JavaScript and JSON'.

Why use it?

Ok, so we now know what AJAX is, but what's the point of it? Why should we actually use it?

Well, we already touched on the main benefit earlier, in that an application no longer needs to reload the page when sending and receiving data. This sounds so simple, yet it has an enormous impact on the experience of the user.

Imagine if almost every interaction you made with a website caused the entire page to be refreshed? This used to be the case not all that long ago!

Just check out a modern web application like Facebook or Twitter. Imagine having to refresh the page to see more posts instead of simply scrolling, or replying to a comment and having to refresh the page to see it appear.

Whenever you see a part of the UI changing after an interaction, you normally have AJAX to thank. This makes it great for single page applications where the user expects to interface with the UI in the same way that they would with a desktop application, without having to wait for the browser to reload the entire page.

How does it work?

In the diagram below, we see the traditional request/response process from a client to a server:

JavaScript common request and response

In the next diagram we can see that a JavaScript call is made by the client and intercepted by the browser's AJAX engine. The request is then delivered to the server as an XMLHttpRequest (or 'XHR') object.

AJAX engine request and response

Data is returned from the server most commonly as JSON, however it could also be XML or plain text. The AJAX engine converts the data to an HTML response, which can then be rendered for the user.

This is much faster than waiting for an entire page response, providing a superior and more interactive user experience.

XMLHttpRequest object

So the client sends a request to the server in the form of an XMLHttpRequest (or 'XHR') object, but what does this object look like and how does it work?

It's essentially an API (Application Programming Interface) in the form of an object, with a set of properties and methods. The XMLHttpRequest object is provided by the browser's JavaScript environment, and its methods are what transfer data between the client (the browser) and the server.

This object can be used with both HTTP and HTTPS protocols and, as mentioned earlier, it can work with data other than XML, including JSON and plain text.

readyState

It's worth pointing out that the XMLHttpRequest object has a property called readyState. This property returns the state that an XMLHttpRequest client is in at any one time throughout the AJAX operation. There are 5 stages:

  • 0 - UNSENT - A client has been created but the open() method hasn't been called.
  • 1 - OPENED - The open() method has been called.
  • 2 - HEADERS_RECEIVED - The send() method has been called, and headers and status are available.
  • 3 - LOADING - Data is being downloaded.
  • 4 - DONE - The operation has been completed.

We can check the readyState to determine which stage the operation has reached and if the request was made successfully. Alternatively we can use the status returned from the send() method, as each status corresponds to a readyState.

When the XMLHttpRequest object is instantiated, the readyState is 0 (UNSENT).

Nowadays we more commonly check the status of a request, which is what we'll be using for our examples, but you will likely come across readyState in older codebases.

Libraries and other methods

As we'll see, working with the XMLHttpRequest object in JavaScript can be fairly verbose and repetitive. There are therefore a number of libraries and methods available that make working with AJAX simpler and more efficient. These include:

However, it's important to learn how the built-in XMLHttpRequest object works, as you're very likely to encounter it in existing codebases.

In addition, when building your own applications that would benefit from implementing AJAX, it's important to consider the degree of functionality required. Installing libraries like jQuery would be overkill for AJAX functionality alone, thereby introducing a lot of unnecessary bloat into your codebase.

If you're only looking to utilise AJAX, it would likely be much more performant to interact with the XMLHttpRequest object API directly, rather than installing a bunch of features that you don't need.

Next steps

We covered a lot in this article! Hopefully you now have a better understanding of what AJAX is, why it is used, its benefits for the user experience, as well has a theoretical overview of how it works.

In AJAX Part 2: Loading Plain Text Data, we'll dive deeper under the hood by building a demo application to load text data into a UI. This will provide a more practical understanding by allowing you to write some code!