AJAX: What is it?

Author’s note: This article was first published in my AJAX Column (AjaxOnline.com.br ) in Portuguese where my intended audience is a group of beginners learning about the AJAX initiative. Since it turned out to be a really interesting article I decided to translate it and share it with a wider audience.

I wondered where I should begin explaining AJAX and finally decided I should begin explaining what’s behind it and how it came around, so everyone knows where we are coming from.

Ajax, web 2.0, RSS, if you’ve never heard any of these terms than something is wrong, you are either way behind in web technologies or not serious enough about web development. The concept of Web 2.0 is what we may call the “father” of the latest trends in web applications, where various technologies are used to improve the user’s experience, but what is the concept?

A Brazilian magazine this month published an article dedicated to this topic and its explanation was on the spot with Wikipedia’s definition. Web 2.0 is a concept born in an O’ Reilly Conference in 2004 and was purposed to describe the new trends of web based applications. This second generation solutions allow a greater collaboration and exchange of information between users, more than any previous system.

In this universe, the web 2.0 apps have a few “expected” characteristics, like using the web as its platform, being data-driven, using external data (such as RSS and Web Services) and breaking the default software life cycle, giving way to the “eternal beta” (that’s why we see so many betas in logos), among others characteristics. Basically we have four main groups: social bookmarking, wikis, communication sites and folksonomy. If you want more examples of these, visit this site: http://en.wikipedia.org/wiki/Web_2 .

With these concepts in mind we finally see the birth of AJAX. Ok, that might not be the right word, as AJAX is not a new technology but really another way of utilizing various older technologies, with a new focus. Some of the elements that compose AJAX can be dated as early as 1996 in Microsoft’s ideas. The idea was to turn around the usual web apps, breaking free of the general stiffness and overall static content, bring to live more dynamic and intuitive apps. These were meant to be more responsive exchanging information behind the scene, creating an illusion of interactivity along with higher speeds and better usability.

If AJAX (Asynchronous JavaScript and XML) isn’t that new, we should be able to notice that looking at the elements used to create the AJAX “Look and Feel”. HTML and CSS, as in most platforms, are used to structure the information visually. DOM (Document Object Model) is used by JavaScript to promote visual changes and XML is vastly used in information exchange. Finally we have the XMLHttpRequest; this is where the “new technology” concept goes into a confusing loop. Few people actually know that this technology has been around from around the year 2000, created by Microsoft to be used in Outlook’s Web Access, and finally incorporated by Mozilla in 2002. However only in 2006 the W3C published its first Draft, sending it on its way to become a standard.

From my experience the real rupture in development is understanding the request’s dynamic, the rest might be lot of work but its still DOM manipulation and other things we have already being playing with for a longer while. So I think it’s really valid to go a little deeper into the XMLHttpRequest to really get the concept.

The image below represents the flow of information in an AJAX communication, indicating exactly where the request goes into action.

As we can observe, the request receives values in URL format, but we can choose between GET and POST to transmit the values, seeing as with POST we don’t need to worry about URL encoding. The data is sent to a backend file, as any POST process, however this file won’t return basic HTML, but some XML data that will be used to promote changes in the original page, maybe even containing HTML data or just plain text.

Finally this response is manipulated and using DOM we can change the page adding or removing elements, populating combo boxes or altering a DIV’s content.

So that’s the perspective, where it all fits in the big plan of the web, next time around I will move on to more “hand’s on work”.