|
|
| Introducing AJAX |
|
If you haven't already heard about AJAX you must have been out to some other planet or maybe on Moon. While you were taking giant leaps we petty mortals here witnessed a revolution of sorts. Web was transformed and web development would never be same again. The magic of AJAX was there for us - to see and feel "the difference".
|
|
The very term AJAX seems to evoke a sense of excitement that have all but disappeared since the bubble busted. This seems to be the 'buzz word' these days. "Haven't you seen Google Maps or Google Suggest? Why can't my application do things they do?"
|
|
Ok so we have established that AJAX is cool (with a 'k'), now lets see what exactly it is. Simply put AJAX (which by the way stands for 'Asynchronous Javascript And XML') is a collection or grouping of several technologies, each flourishing in its own right, coming together to do something that we thought was not possible to do in web based applications.
|
|
It's not that these concepts or even a collection of these concepts is something new. Independent applications have been using some or all of these technologies to achieve respective objectives but never before they assumed such greater importance and such acceptability than now under this magical term AJAX. Popularity of Google has a lot to do with making AJAX a buzzword. With Google being so much in the news it was pretty obvious that anything linked with the word 'Google' will be immediately popular. So it happened with AJAX, with some of its power and capabilities showcased in Google Maps and Google Suggest.
|
|
What is AJAX?
|
|
You must be getting impatient by now, "Why is this guy telling me the 'History', I just want to know what AJAX is and how I can use it to show the depth of my grey matter to my Boss or to even my colleagues". Well so let me cut to the chase.
|
|
AJAX consists of these technologies or components:
|
- Standards-based presentation using XHTML and CSS
- Dynamic display and interaction using the Document Object Model (DOM)
- Data interchange and manipulation using XML and XSLT
- Asynchronous data retrieval using XMLHttpRequest object
- JavaScript for binding together the above four
|
|
Let us look at what role does each one of them play within AJAX:
|
|
XHTML and CSS:
|
|
If you are in web development you must know about HTML and chances are that you are pretty familiar with CSS as well. XHTML is a reformulation of HTML 4 as an application of XML. You can see it as XMLized HTML where we follow stricter xml rules to write html. The point is that you have been using these technologies already so I won't waste your time going in details.
|
|
DOM:
|
|
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. Document object model lets you navigate thru the content of any XHTML page using simple methods (API) provided.
|
|
XML and XSLT:
|
|
Extensible Markup Language (XML) is a simple, very flexible text format which can be used to provide structure to data. To traverse thru DOM you need to know how to construct and read any XML Document. XSLT will allow you to convert any given XML structure into another one based on the schemas defined.
|
|
XMLHttpRequest:
|
|
This object lets you talk to the server via http without the need of Page submit. This is one of the most powerful techniques being used in AJAX. Mind you, it is not something new, this object has been there for a long time but never before has it been put to such use as now within AJAX.
|
|
JavaScript:
|
|
Last but certainly not the least JavaScript. Oh that simple scripting language. Well yeah it is simple yet very powerful. People have done lot of great stuff with this simple language and now within AJAX it plays the role of "the language that brings web pages to life".
|
|
What does AJAX do?
|
|
"Well yeah all that is good but do you mind telling me what is so different about AJAX?" Ok so you asked for it: The classic web application model works like this - Most user actions on the User Interface (UI) trigger an HTTP request back to a web server. The server receives this request and does some processing and then returns an HTML page to the browser. This approach is great and everything seems to work just fine but what about the user who is waiting for the response to come back and refresh his HTML page. Did anyone care about him? What is he supposed to do while waiting for seconds, minutes (or sometimes hours, in which case he might go to sleep or maybe try to commit suicide).
|
|
So we have established that there is something wrong with classic web application model. Well so now let us see how to fix it or how AJAX attempts to fix it. Ajax introduces an intermediary 'an Ajax engine' between the user and the server. Now this engine is nothing but some Javascript code that sits on the browser and triggers off separate process to do the immediate tasks, which user has requested, without sending the entire HTML page as a request back to server. This function is performed by using XMLHttpRequest object which, being a lightweight object talks with the server and gets only the required information back. Now this information is plugged in the current HTML page by XML manipulation of the DOM (remember HTML pages can be read as an XML object and that is DOM). Result is that user gets to see the new information without his entire page getting refreshed. So now he does not get any time to take a nap, well that may cause some heartburn. There is even better news yet to come. For certain tasks where there is no need to get stuff from server our AJAX engine comes into play and takes care of these simple tasks. These tasks may include things like simple data validation, editing data in memory, and even some navigation.
|
|
Summary
|
|
AJAX provides you with ways to do things asynchronously, to change the data content on your page dynamically and to make your application as responsive and user friendly as you want it to be. It gives you tools and leaves it up to your imagination to put this raw power to use in ways that will make your web application behave and perform like a true 'user friendly' application. I believe there is a lot of potential in this technology. We have touched but the surface of this in the AJAX applications that we have seen so far.
|
|
It will not be surprising to see new and innovative usage of AJAX in near future making this a giant leap in web development.
|
