What Is Ajax & How Is It Used In Modern Web Development?
This page may contain links from our sponsors. Here’s how we make money.
When I first started web development in 2006 the term Ajax was mentioned in whispers by professional circles of developers. These were the beginnings of a revolutionary concept that have shaped the way websites call HTTP data and load it onto the page.
In this post, I’d like to answer the question of what is ajax and how can it be applied to modern web development. A lot has changed in the past decade and Ajax is now the most common way to build dynamic web applications.
But it helps to understand the history of Ajax and the problems it solves before applying it to your live web projects.
Brief History of Ajax
Ajax is a method of transferring HTTP data in a web browser without refreshing the page. It can sometimes be spelled as an acronym(AJAX) where the letters stand for Asynchronous JavaScript And XML.
The concept was designed by Jesse James Garrett and really picked up steam in the mid-2000s.
In those early days, many web 2.0 companies fawned over Ajax design principles. One of the original titans was Digg’s voting badge which passed an HTTP query to the vote database without refreshing the page.
Since then many other sites have adopted this same technology, and these days Ajax is basically a necessity of frontend web development.
Abstraction libraries like jQuery make it much easier for modern developers to pick up the foundational Ajax tech without requiring raw vanilla JS. But what exactly are these foundations and how does Ajax function in the browser?
Down To Basics: What Is Ajax?
Strictly speaking, Ajax is a type of API object with the earliest method being XMLHttpRequest(). This provides client-side functionality to pass(or retrieve) data from the client to the server without refreshing the page.
It was initially designed by Microsoft and has now been standardized by WHATWG. According to Aaron Swartz’s blog, this XMLHttpRequest (or XHR for short) was first added to the IE5 browser. It was soon adopted by Mozilla and other browser developers.
So to sum up, Microsoft built a JS method called XMLHttpRequest that allowed HTTP data transmission on the client-side. This method was bundled natively into IE and soon spread to other browsers. It was coined Ajax and rapidly grew into the methodology we see today.
So how exactly does it work? An HTTP request is sent to a file on a server, either local or remote. Data is returned from that file and it can then be parsed by JavaScript.
The most common datatype transmission was originally XML, hence the name XMLHttpRequest. But over time this has changed to support newer JS-based datatypes like JSON. This was a very natural progression because JSON data can be parsed as objects which are much more friendly than XML nodes.
Ajax In Everyday Development
While you can still use the XHR object if you wish, the syntax is incredibly confusing and verbose. Most developers nowadays prefer a library like jQuery or UmbrellaJS, both of which have their own .ajax() method.
Also, most Ajax code is used in conjunction with a database. The Ajax call connects to a script on your server which then pulls data from a database. This script could be written in PHP, Python, Ruby, Node, or even Java. All that matters is the return type which is predominantly JSON.
Developers can even access remote databases with Ajax to create a live stream of updates like recent tweets. But APIs often have throttle limits to minimize the number of calls per minute.
The most valuable use for Ajax in modern development is with a local database. This allows users to, for example, update profile info without refreshing the whole page or cast a vote on a site like Designer News and store the vote in a database without a refresh.
The key aspect of any Ajax web app is to understand how data is passed from the frontend to the backend. Ajax optimization is a subject worth reading if you need to improve the speed of a website.
Asynchronous Loading: How Often Is Too Often?
Developers quibble and fall into heavy debates over when to use Ajax in a website. There doesn’t seem to be a single right answer, but there are some best practices and tips to consider.
The first is to mitigate HTTP calls as often as possible. Unless you have a team of developers and a server farm like Twitter, you can’t run live Ajax updates on your app without sacrificing speed.
Ajax is best used to improve the user experience in a web application. Some blogs use the infinite scrolling technique which changes pagination from page refreshes to Ajax calls. In the long run, this might actually save bandwidth because you’re not pulling a full HTML page, just some raw data parsed through JavaScript.
However caching also plays a factor and there’s a lot to say about optimization in this field.
But generally speaking, Internet speeds are much faster nowadays and you can get away with Ajax calls a lot more often. Just remember to ask yourself the reasoning about why you’d want the additional functionality: Does the Ajax feature really add to the user experience, or is it just something you want to do?
Further Reading
It’s amazing to see how much Ajax has grown as a methodology in only a decade. Ajax started as a luxury for web developers and is now considered standard operating procedure.
While the technicalities behind Ajax can be fascinating, the best way to learn more is to build stuff for yourself. Check out the tutorials below and start with simple goals. APIs can offer a fun way to learn Ajax without building your own database.