Ajax for beginners.

What is Ajax

With all the hype about "Ajax web applications", you could be forgiven for assuming Ajax is some radical new plugin, akin to Macromedia Flash. and you would therefore be under the impression that Ajax is out of bounds until you upgrade your "so last month" browser, or at least download the coveted "Ajax plugin.

Good news: You can run Ajax right now. At least, assuming you have a web browser from the past few years--IE, Firefox, Safari, or Opera. Have you seen Google Maps (http://maps.google.com/) or perhaps GMail (http://gmail.google.com/)? They're both Ajax applications. So are Zuggest (http://www.francisshanahan.com/zuggest.aspx) and the AjaxPatterns Wiki Demo (http://ajaxify.com/run/wiki).

What do they all have in common? All these applications take a great leap forth towards the richness of standard desktop applications. No longer are you forced to wait five seconds for the page to reload every time you click on something. Ajax applications change in real time. They can let you drag boxes around, they can refresh themselves with new information, they can completely re-arrange the page without clearing it. And there's no special plugin required. Ajax is just a style of design, one that milks all the features of modern browsers to produce something that feels less web and more desktop. 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.

To prevent any confusion, these things are not characterstic of Ajax:

* Proprietary: "Ajax" is perhaps one of the most common brand names in history, but in context of web design, "Ajax" is neither the name of a company nor a product. It's not even the name of a standard or committee. It's a label for a design approach involving several related technologies.

* Plugin-Based: Ajax applications do not require users to install browser plugins, or desktop software for that matter.

* Browser Specific: As long as the user is working with a relatively recent, mainstream, browser (say 2001+), the application should work roughly the same way.

Browser-specific applications somewhat defeat the purpose of Ajax.

Why So Popular?

Here's the weird thing: modern browsers have been very capable of handling Ajax applications for several years, and many people have been using these browsers. Indeed, applications like this had been around for a while in intranets, hidden from the public, and in some pockets of the public web. Yet, it's only in the past few months that these applications suddenly began to flourish. Why? The potential was already there, but the catalyst can be definitively pinpointed to a February 2005 article which coined the "Ajax" term (http://www.adaptivepath.com/publications/essays/archives/000385.php). In that article, Jesse James Garrctt chose "Ajax" to describe a new mould of dynamic web applications based on several interoperating technologies. "AJAX" itself is a geeky acronym: "Asynchronous JavaScript+CSS+DOM+XMLHttpRequest". The technologies involve: Javascript and DHTML, to let applications respond to events such as mouseclicks; DOM, to let applications manipulate the display; XMLHttpRequest, to let the browser and the server communicate without having to refresh the page.

Garrett's article was the tipping point--there was plenty of potential already, and Ajax has been growing quickly for several reasons:

* Web as a Platform: The web is no longer just about websites that expose some information; it's increasingly being used for full-blown applications. These applications demand richer styles of interaction.

* User Frustration: The standard "click-and-wait" form-based model no longer suffices. Most people are now au fait with the basics of the web and are ready for something more.

* Web 2.0 Zeitgeist: Ajax sits well in the "Web 2.0" umbrella, with many of the Web 2.0 poster-childprojects--such as flickr and technorati--incorporating Ajaxian features (having started before the "Ajax" term came about). Web 2.0 is about new ideas and the $$$ to make them happen, and Ajax is certainly creating opportunities for new breeds of applications, as well as fodder for improving existing systems. Ajax is the "web" in web 2.0.

* Multiple Access Points: Many people use more than one computer. People are using computers at home, at work, at school, in cafes. Laptops and portable hard drives offer one solution, but they are inconvenient, at risk of theft, and often not able to be plugged in. Hosting the data online is a more straightforward solution and accessing it from a rich web application is a natural fit.

* Web as the only Platform Thanks to the widespread adoption of public internet access, the so-called technology gap between countries and between socioeconomic groups is closing. Many people don't actually own a PC, but do have regular access to the web at internet cafes or schools or friends' homes. For this diverse category of user, there's no point installing applications and keeping their data locally. The web is their only platform.

* Better Infrastructure: Many homes now have broadband, and server capacities have continued to improve in the past few years. Due to frequent back-and-forth between client and server, Some Ajax applications can be hungry for both bandwidth and server capacity. Furthermore, server-side storage is cheap enough for many individuals and companies to prefer holding data online, which makes it feasible to access via a web application.

* Productive Development: For developers a web programming model can be far more productive than a the conventional GUI alternative. Developers only have to produce a single product for all platforms, they * can upgrade the application frequently rather than in "big bang" style (have you ever seen a website version number?), they can choose whatever programming language and libraries they care for.

* Browser Improvements: While the basics of Ajax have been present for several years, browser improvements in areas such as XML-processing and debugging support, as well as adherence to standards, have eased the pain for the Ajax development style.

* Security Concerns: As security concerns have heightened, companies are now quicker to lock down desktops and forbid browser plugins. Web applications hosted on a company's intranet are therefore a boon for security, and allow for tighter monitoring and access control.

* Platform Diversity: The rise of Apple, combined with the ever-present desktop Linux, means that many applications must be developed in a portable way, and choosing the web platform is one popular way to achieve portability.

* Browser Diversity: Flock, Safari, and Firefox have joined Mozilla and Opera in offering serious alternatives to Internet Explorer which can no longer be ignored by mainstream developers. Most Ajax techniques, being based on standard browser features--albeit more modem ones--can generally be applied on all the recent browsers. It's also worth noting why this information has spread through the community so quickly:

* The 'G' Factor: Several prominent Google projects have been thoroughly Ajaxian, including Google Maps and GMail. When Google talks, people listen.

* Simple Message: Ajax is a straightforward message: all you have to do is point someone at Google Maps. It's a lot easier than explaining "the long tail" or "the folksonomy":-P.

* Rapid Dissemination: Due to RSS, blogs, and podcasts, any worthy information is rapidly disseminated. For the reasons above, Ajax struck a chord in the community. Once a name was there for this desirable style of development, everyone wanted to talk about it.

Downsides of Ajax?

Ajax is a trade-off. Any developer considering its adoption should be aware of the downsides, such as:

* 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 be used in a manner that supports usability.

Core Techniques and Technologies

Ajax applications use a combination of the following techniques, all using technologies which are present in modern browsers:

* Responding to User Events with DHTML -- Ajax applications are all about responding to events in the browser, and DHTML allows actions to be triggered according to events such as a keypress.

* Dynamic Browser Behaviour with Javascript -- Javascript is used heavily to provide dynamic behaviour after the page has been initially loaded.

* Changing Display with the Document Object Model (DOM) -- Modem browsers expose the HTML document as a data structure. Using Javascript to manipulate the structure, it's possible to alter the page after it's loaded. For instance, it's possible to change text or change background colours.

* Redefining Events with DOM and Javascript -- Event listeners are also part of the DOM, so an Ajax application can respond to one event by changing what happens when another event occurs.

* Web remoting with XMLHttpRequest and Frames -- To provide a continous experience, Ajax applications talk back and forth to the server without actually submitting a form and redrawing the page. In the past, some applications used a workaround involving Frames or IFrames, but most Ajax applications are now using the XMLHttpRequest object, which is designed exactly for this purpose.

* Scheduling with setTimeout() -- Using mechanisms like Javascript's setTimeout(), Ajax applications can make actions happen periodically or at specified times.

* Message Passing with XML -- XML is popular as a format for passing messages between the client and server, as there is strong support for XML manipulation at both ends.

Lifecycle of an Ajax Application

The Ajax lifecycle is more like that of a traditional GUI than a traditional web application, with DOM 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.

Here's a typical 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 processes the event>

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

Of course, there are plenty of variants. In particular, many events are handled locally and don't actually trigger a trip to the server. Also, some Ajax applications are short-lived and the browser interaction is eventually terminated with the user submitting a form. Others remain to interact with the user as long as they are in the user's browser.

Note that the Browser Event and the Server Request occur in one thread, and the Server Response and Browser Update occur in a separate thread. This is due to the asynchronous nature of the server request. It's actually possible to configure XMLHttpRequest to make synchronous calls, but poor practice as it holds up the user.

Want to Learn More?

So you want to get started on Ajax? Here are some pointers:

* Ajax Patterns is a collection of design patterns advising on usability and technical implementation of Ajax applications.

* Ajax Links contains links to some Ajax websites and blogs you might like to subscribe to.

* Ajax Examples links to a bunch of Ajax websites already in operation.

* Ajax Frameworks summarises the frameworks supporting Ajax-style development.

http//ajaxpatterns.org.