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
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.
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 amount 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 webapp 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.
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?
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.
- Build Your Own AJAX Web Applications
- How to Insert Data into MySQL Database using AJAX
- jQuery Ajax Example with JSON Response