Few years back (I am not sure exactly how many years ago), one of my friends send me an invitation for opening up a Gmail account. I wasn’t sure how another web mail account would help me, but there I went creating my Google account (the one I still have). It was as expected: just another web mail. But something was very different about it.
To start with, it took more time to load the page the first time. And it had a very interesting “loading…..” message before the page was actually loaded. But once the initial page was loaded, everything seemed very smooth. Moving from a mail message to the inbox (or vice versa) happened swiftly, the reply box opened just below the actual message, and mails were sent without even refreshing the page! That is when it struck me: the page was communicating with the server without reloading the page!
What I experienced was something very new, and I had little clue how this simple (well not exactly) thing was changing the whole web development arena. Most people call it Ajax (Asynchronous JavaScript + XML). The term (not the concept) was first brought up by Jesse James Garrett of Adaptive Path in his, now famous, article entitled, “Ajax: A New Approach to Web Applications” . Though the approach was already in use by many web developers, Garrett’s article caused the world to take notice of this wonderful concept.
So, what is Ajax? To my understanding, it is the application of already existing technology in a way that allows web pages (and web applications) to communicate with the server-side with out reloading the whole page. The wikipedia definition goes this way:
“Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is meant to increase the web page’s interactivity, speed, and usability.”
The wiki also has a very interesting history of Ajax, interested readers can check it out here .
Ok! Enough of going down the memory lane, definitions and history, let me come to the point I intended to write this blog in the first place. Most people who are some what familiar with Ajax, tend to believe that the only way to make remote calls to the server without reloads is by using the famous XMLHttpRequest object(and its similar implementations in various browsers). I lately came to know otherwise.
A few of the ways (let me know if there are any more) I came to know are:
- Hidden frames
- Iframes
- XMLHttp Object
- XML-RPC
- Java Applet/ActiveX control/Flash
Hidden Frames
This was one of the first ways of implementing Ajax like effects in webpages. This technique was used even before the Ajax term caught up. When browsers started to have Javascript and frame support, people used these two in a very clever way. One of the frames in the frameset was hidden by defining either its height or width to zero. What did this, was make this frame completely invisible to the users, and use it as a data passing mechanism. When ever new data was needed in one of the visible frames, the hidden frame was used to send a POST or GET request to the server. After receiving the requested data into the hidden frame, the data was passed into the visible frames using javascript. It gave the impression of getting new data into the page without reloading, just like Ajax.
Hidden Iframes
As the use of hidden frames became popular, browsers began to support what is known as Iframes. Basically, it allows the developers to create a frame on the fly, without the need of declaring a frameset. The iframe technique can be applied to pages not originally created as a frameset, making it much better suited to incremental addition of functionality. An iframe can even be created on-the-fly in JavaScript, allowing for simple HTML to be supplied to the browser with the enhanced Ajax functionality serving as a progressive enhancement. Because iframes can be used and accessed in the same way as regular frames, they are ideal for Ajax communication.
XMLHttp Object
This is by far the most popular way of implementing Ajax. All recent browsers has support for it.
The Microsoft way being:
var oXmlHttp = new ActiveXObject(”Microsoft.XMLHttp”);
and Mozilla supports it using:
var oXmlHttp = new XMLHttpRequest();
This is basically a DOM object that can be called from Javascript. Once initiated, it can be used to communicate over HTTP with the server. Basically it can pass anything from XML, HTML, JSON etc to and fro from the server. This is the most modern way of implementing Ajax, but not necessarily the best for all purposes.
XML-RPC
XML-RPC uses XML for encapsulating data, HTTP for its transport mechanism, and can be implemented in a wide variety of platform and software environments. XML-RPS is an open, standards-based technology that is quickly becoming the de-facto method for RPC of all kinds. The down side is that it takes a bit more know-how and work to get it up and running, requiring the installation of XML-RPC libraries on your server and in your client-side code. Not really an easy option, atleast for me.
Java Applet/ActiveX control/Flash
By embedding an ActiveX component, a Java applet, or a Flash movie into a web page, all of which are capable of making HTTP requests and interacting with client-side JavaScript code, it is possible to implement the client component of Ajax call. Not all browsers support the technology (called LiveConnect) that allows for interaction between JavaScript and such objects. In addition to those problems, using an embedded object for remote scripting requires the end-user to install additional proprietary software.
All in all, what I figured out is that there are a lot of ways of implementing Ajax for web applications. Having an idea of various techniques will have no harm. I never know when I need to use one.
Having said that, my thoughts are going back to the first Ajax I saw: Gmail. I wonder what kind of technique the Gmail site used for its Ajax implementation?
Recent Comments