Sunday, December 3, 2006

Ajax: Web Applications approach

What's AJAX =Asynchronous JavaScript + XML

AJAX is not a new language, but just a new way to use existing standards.With AJAX you can create better, faster, and more user friendly web applications.AJAX is based on JavaScript and HTTP requests
AJAX is not a new programming language, but simply a new technique for creating better, faster, and more interactive web applications.
AJAX uses JavaScript to send and receive data between a web browser and a web server.
The AJAX technique makes web pages more responsive by exchanging data with the web server behind the scenes, instead of reloading an entire web page each time a user makes a change.

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways,

standards-based presentation using XHTML and CSS;
dynamic display and interaction using the
Document Object Model;
data interchange and manipulation using
XML and XSLT;
asynchronous data retrieval using
XMLHttpRequest;
and
JavaScript binding everything together.


The two features that brings Ajax different from others:

  • Make requests to the server without reloading the pageParse

  • work with XML documents

Who’s Using Ajax:Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year — Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications. (For more on the technical nuts and bolts of these Ajax implementations, check out these excellent analyses of Gmail, Google Suggest, and Google Maps.) Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.At Adaptive Path, we’ve been doing our own work with Ajax over the last several months, and we’re realizing we’ve only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google’s lead in reaping the competitive advantage Ajax provides.

AJAX Is A Browser Technology
AJAX is a technology that runs in your browser. It uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
The technology makes Internet applications smaller, faster and more user friendly.
AJAX is a web browser technology independent of web server software

AJAX applications are browser and platform independent. (Cross-Platform, Cross-Browser technology).With AJAX, Internet applications can be made richer (smaller, faster, and easier to use).

Some of the characteristics of Ajax applications include:

Continuous Feel: Traditional web applications force you to submit a form, wait a few seconds, watch the page redraw, and then add some more info. Forgot to enter the area code in a phone number? Start all over again. Sometimes, you feel like you're in the middle of a traffic jam: go 20 metres, stop a minute, go 20 metres, stop a minute ... How many E-Commerce sales have been lost because the user encountered one too many error message and gave up the battle? Ajax offers a smooth ride all the way. There's no page reloads here - you're just doing stuff and the browser is responding

Real-Time Updates: As part of the continous feel, Ajax applications can update the page in real-time. Currently, news services on the web redraw the entire page at intervals, e.g. once every 15 minutes. In contrast, it's feasible for a browser running an Ajax application to poll the server every few seconds, so it's capable of updating any information directly on the parts of the page that need changing. The rest of the page is unaffected

Graphical Interaction: Flashy backdrops are abundant on the web, but the basic mode of interaction has nevertheless mimicked the 1970s-style form-based data entry systems. Ajax represents a transition into the world of GUI controls visible on present-day desktops. Thus, you will encounter animations such as fading text to tell you something's just been saved, you will be able to drag items around, you will see some static text suddenly turn into an edit field as you hover over it.

Language Neutrality :- Ajax strives to be equally usable with all the popular languages rather than be tied to one language. Past GUI attempts such as VB, Tk, and Swing tended to be married to one specific programming language. Ajax has learned from the past and rejects this notion. To help facilitate this, XML is often used as a declarative interface language.

Downsides of Ajax

Limited Capabilities:- Some Ajax applications are certainly doing things people never dreamed were possible on the web, but there are still substantial restrictions of the web platform. For example: multimedia capabilities, local data storage, real-time graphics, interaction with hardware such as printers and webcams. Support for some of these are improving in recent browsers, some can be achieved by delegating to Flash, but many are simply not possible, and if required, would rule out Ajax

Performance Concerns: Constant interaction between browser and server can make an application feel unresponsive. There are, however, quite a few well-known patterns for performance optimisation such as browser-side caching. These usually suffice, even for fast-paced applications like stock trading, but Ajax still might not work for really time-critical applications such as machine control.

Internet Access Required: The user can't access an Ajax application in the absence of a network connection.

Second Programming Language: Serious Ajax applications require some knowledge of Javascript. Many developers are discovering that Javascript is actually a more capable language than at first assumed, but there is nevertheless an imposition to use a language different to that on the server-side.

Easily Abused: As with any powerful technology, Ajax concepts can be abused by careless programmers. The patterns on this site are intended to guide developers towards more usable solutions, but the fact remains that Ajax isn't always used in a manner that supports usability.

Lifecycle of an Ajax Application

The Ajax lifecycle is more like that of a traditional GUI than a traditional web application, with DOM(document object model) objects acting like GUI widgets. The script registers event listeners on DOM objects, and manipulates the DOM in response to those events. As part of the event-processing cycle, the server may be invoked. There's actually a slight complication here in that the server calls are asynchronous, so the event-listening phase is split from the event-responding phase.

Ajax lifecycle within the browser:-

Visit: The user visits a site the usual way, i.e. by clicking on a link or typing a URL.
Initialisation:- The page initially loads. Callbacks are established to handle user input, a loop might be established to continously refresh page elements.
Event Loop:
Browser Event
An event occurs, such as a keypress.
Server Request The browser sends a request to the server.
...
Server Response A moment later, the server responds, and the response is passed into a request callback function, one that was specified when the request was issued.
Browser Update The request callback function updates the DOM, including any Javascript variables, according to the response