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.
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”.