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:
- Define what AJAX is and the set of technologies it uses
- Explain why it is used and list its advantages
- Describe how the AJAX request/response process works
- Understand how the XMLHttpRequest object functions
- List each of the XMLHttpRequest object's 'ready states'
- List a number of libraries and methods that work with AJAX
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.
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.
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.
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.
In the diagram below, we see the traditional request/response process from a client to a server:
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.
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?
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.
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
When the XMLHttpRequest object is instantiated, the
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.
- jQuery (third party DOM manipulation library)
- Axios (third party)
- Superagent (third party)
- Prototype (third party)
- Node HTTP (part of Node)
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.
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!