AJAX Basics and Directions

HomeTutorialsReviewsWeblog
Feature: AJAX - Asynchronous JavaScript and XML Directions
Motivation: Lots of this is predicated on the notion that the Web is standardizing
Extra:See our quick AJAX book reviews and link resources

Think of AJAX as the second coming out party for JavaScript and DHTML. Second coming out party ? JavaScript is at least 10 years old and DHTML is not much further behind. What is going on ? What is going on is that Microsoft, through its dominant Web browser market share has effectively halted all progress on DHTML and standards based web development for 5-7 years. The means was simple. All DHTML development projects were halted at 1 Microsoft Way. All feature and function updates to IE, including meeting promises to fully implement W3C standards, were halted for 5-6 years. In effect all new and promising technology for the Web were put on hold because IE has had 90%++ market share so Redmond could act as a gatekeeper on all client-side browser technology.
And as gatekeeper, Microsoft has said no no no to everything: SVG, SMIL, XForms, JavaScript 2.0 and E4X, CSS 2.1 and 3.0, JPEG2000, DOM 3.0 + Rationalization and many other Web technologies. See details onMicrosoft‘s belligerence against the Web here.
What has changed are two things. Firefox, Safari, Opera and other browsers makers have now far exceeded Microsoft IE not only in speed, functionality and features; but also in their implementation of common Web Standards. The latter means that in JavaScripting, now Web developers only have to check for one source of non-conformance - Microsoft, instead of 3 or 4 as in the past. The combined result has been that Firefox and company are taking significant market share from from IE - our website sees IE at about 78% share down from 94% share a year and half ago, in Summer 2004.
The other change has been that some savvy ISVs like Google, Flickr, Yahoo, andothers have used advanced DHTML to deliver Web Applications that have:
1)GUI look, feel and usability equal to desktop PCs;
2)Significantly reduced response time as full page refreshes are eliminated;
3)Simplified overall Web client+server coding versus ASP, JSP, JSF, etc;
4)No requirements for plugins like competing RIA technologies(Flash, Java);
5)Used and produced code that is cross browser, cross platform and often open source.
The key to AJAX and its advanced DHTML is to load enough JavaScript on a web page so that it can manage most if not all the events that occur there. This takes shape in using some of the following methods:
1)use JavaScripts for validations and redirection within forms using ‘on events‘;
2)use pre built JavaScript GUI components like menus, calendars, calculators, tabs and grids;
3)use CSV or XML staging or caches for data interactions including possible offline tasks;
4)use XMLHTTP or XML-RPC or SOAP for hotspot or partial page refreshes and asynch ops;
5)use iFrames and CSS div-Windows as portals for multiple landing spots on a page.
It is these techniques and others like it that are at the core of JavaScript programming methods now known as AJAX-Asynchchronous JavaScript and XML. Think of AJAX as starting to release the full potential of JavaScript on the Web.
AJAX Liftoff
But as well, AJAX has achieved liftoff because there has been a proliferation of applications which have demonstrated the feasibility of using AJAX effectively:
ajaxim - is an AJAX front end to Instant messaging that works on a variety of browsers
BackPackit - an Web based personal information manager - shades of Borland‘s desktop...
Boggle - the word game, caution - very addictive!
Flickr Viewer - there are already good add-ons like this toAJAX-powered Flickr
FormAssembly - watch beta of SaaS-Software as a Service in Web Forms evolve
FormBuilder - is in beta as the form building application from FormAssembly, nifty
GoogleMail - a simple, but effective demonstration of AJAX effectiveness
GoogleMaptoLAMP - demos use of Google Map API in mapping location data, very good
Graphic Function Plots - says it all, very well done
Kiko - personal and/or public calendar and scheduling on the Web
Meebo - another IM client in AJAX
ObjectGraph - has a superior AJAX-powered online dictionary + thesaurus
Periodic Table - periodic table of the elements AJAX-ized
Protopage - supplies a personalized home portal with movablle, customizable portlets
RemembertheMilk - is free to-do list software as a service with nifty features
Sproutliner - set up your own single table database with great ease
TuDu - is also a todo list with the ability to share across the web with other users, nice
Turbo DBAdmin - yes, full database administration and viewing in AJAX, very nice
Writely - is collaborative document creation like Word - uses MS.NET with AJAX techniques
Zimbra - client+server email system with calendar, contacts, schedule, etc
Zuggest - is another demo of ASP.NET plus AJAX accessing Amazon in novel ways
The AJAX Patterns List - not enough samples, check this list out
This is just a sprinkling of the AJAX applications that are beginning to show up from a variety of vendors that are angling for a piece of the SaaS-Software as a Service action.
SalesForce.com has shown with its timely features and AJAX based service how potent this market place can be. So Microsoft, already seeing the Google/Sun writing on the wall, is set to launch Microsoft Office Live some time in 2006. The details are a bit wanting but it appears there will be some stand-alone plus add-on services that will work in conjunction with desktop Office. But the basic technology will be "born again" AJAX and DHTML at 1 Microsoft Way.
In sum, when Microsoft moves this quickly on AJAX products and tools like Live, Office Live, Atlas, and Visual Studio Web Express - there must be something to such a competitivekneejerk. And of course the reality is that AJAX offerings like Zimbra, Writely, Meebo, Kiko, TuDu do put its Office cashcow in some jeopardy. But AJAX is much more than a stalking horse for Office. AJAX representsa failure of Redmond‘s quiet, but comprehensive stall, do-nothing-but-proprietary, stagnate and pollute the Web campaign. Why ? Because look to the left at the diagram for Microsoft‘s Smart Client - what do we see?
Thin Clients = Web pages have been assigned Poor user experience, Network dependency, Complex to develop as their chief weaknesses by Redmond. But AJAX changes all that. Network dependency remains but the latency and response time have improved immeasurably. Poor user experience also goes by the wayside because response time has improved and Web components, already strong, get even better with asynchronous links to data on servers as good as any desktop app. Complex to develop also is reduced. Sure the client side does become more complex but the server side coding is greatly simplified - net effect, less complex total package. So what is left as the Cons against AJAX ?
Cons Against AJAX
At the last user conference I attended from an extremely large Northwest US software vendor, one of the recurring questions raised about a new battery of tools went as follows:
"I have so many silver bullets in the gut, please tell me the practical limitations and trade-offs associated with Team Studio ... Analytic Services...Workflow Orchestration".
Developers wanted the candy coating removed and a realistic list of the trade-offs exposed.And why not for AJAX too ? So here is our list:
1)Against the 6A‘s AJAX does well on Anytime, Anyone Authorized, but falters on:
a)Anywhere - must be able to connect to the Net , local apps are possible but are very rare
b)Any device - here is a mixed bag with Opera, WAP and Avante providing work arounds
c)Any format - can‘t compete for sheer speed with video,3D, images on desktop
d)Any mode - offline, online or mixed - this may turnaround to be a Pro.
2)Maintain Web usability features:
a)back button compatibility - solutions are being worked on but they add significant code
b)bookmarking can return unexpected results - again solutions are in works
c)start-up time for complex clients can be slow as very large JavaScripts load up
d)search engines may miss significant dynamic AJAX content - the cure may be worse
3)JavaScript performance issues
a)JS is an interpreted language taking performance hit vis a vis compiled client code
b)AJAX uses XML heavily, already verbose, and E4X and performance boosts have stalled
c)local data operations are restricted to inefficient text or XML
4)AJAX presents security and intellectual property exposures
a)JavaScript, XML are downloaded in easily pilfered text format-but are only GUI view of app
b)Injection of malaware scripting is possible at several points in system including a bad
Javascript code fragment. Unlike Java, JavaScript engines do not enforce trust tests
c)AJAX provides client-side attack engine with more ports of entry into a Server - any lax
security provisions on servers will be exploited
5)The technology is immature - there is no IDE or set of best practices
a)AJAX still has limited capabilities to interact with printers, local storage, & other devices
b)there is a huge outpouring of toolkits and frameworks - sense making needed
c)the need for two or likely more programming languages to create a Web app will also
present problems to teams already needing to know HTML, XML, SQL, etc.
It is important to note that competing presentation layer technologies such as Flash, Java, Vista/WPF/.NET and others encounter many of these same problems including immaturity(Vista, some new J2ME approaches). And in fact, this is proof once more that technology for the presentation layer of development is up for grabs - again.As development has proceeded up the complexity curve from simple timesharing to complex n-tier, heterogeneous platforms with dynamic demand - the requirements for the presentation layer have changed too and in the process have opened up the battle for primary technology and methods.
This is what AJAX is all about. A technology held in check has broken out on the scene. because server side solutions to the client - even advanced ASP.NET or JSF-Java Server Faces handling client events on the server - these have proved wanting and so RIA‘s like AJAX have prospered. More importantly, AJAX appears to be confirmation that Web as client+server has become the center of development (see Web 2.0) - and it is distinctly integration and interoperability oriented. One of the chief attractions of developing in AJAX is that the app is then immediately cross-browser and cross platform capable with all the advantages that accrue to the Web.
Now some have argued that AJAX is the foundation of Web 2.0 (see Web 2.0 ZeitGeist here).
But rather just as there are many competing AJAX frameworks (see just below)and approaches, there are also anumber of solutions to the best n-tier/8A‘s/RIA approach. The whole IT industry is in a turmoil over how to implement the smeared n-tier, Service based architectures. This is especially true given given contradictory demands - online and simple, offline and rich, online and able to respond to unpredictable changes in demand. So just as the broader RIA-Rich Internet Application market is roiling with competing technologies including AJAX, the same is happening within the AJAX community itself. As you can see here andin the AJAX tools overview there is a broad range of competing AJAX technologies. Do not expect the issue to be settled within the next year or two as described in the commentaries like the one below.
An Enlightened Overview
One of the clear ideas coming out of this basic overview is that AJAX is a presentation layer technology that is rapidly evolving as developers adjust not only to shifting demand but also rapid technical developments. In addition, Firefox, Opera, and the other browser vendors less Microsoft, have converged so quickly on full implementations of DOM, CSS, and key parts of JavaScript, that it is much easier to resolve the scripting differences between IE in coding in AJAX.
At the same time it is becoming obvious that quite different paths to implement AJAX‘s richer interfaces and faster response time are being pursued. So it should be no surprise to see the divergent approaches being taken by the different developers. It is interesting, that Brent Ashley , developer of the RSLite & JSRS AJAX libraries, describes this well on his site in summarizing some of the conclusions reached at the O‘Reilly + Adaptive Path AJAX Summit in San Francisco in May of 2005. Brent really underlines this current AJAX trend:
"I came up with an architectural diagram shown to the left which, while open to refinement, describes for discussion purposes the layers of communication in a rich internet application, and it forms the basis of this newly arranged WebDev favourite. The toolkits that are currently available and being developed provide different ranges of coverage of the model, allowing you to:
have the toolkit do it all from top to bottom (e.g.Ruby on Rails) provide your own back end and have the middle and front end taken care of for you (e.g.JackBe, which has an incredible toolset) use a component based framework likeDojo, where you can plug in different transport (iframe, XMLHTTP, script injection) or encoding layers (XML,JSON, delimited text) make browser-based RPC calls withSAJAX and do the UI part yourself intertwine HTML/CSS andFlash, use Flash for behind the scenes transport and advanced presentation (did you know that there areopen source Actionscript compilers now? Flash sure ain‘t any more what you think it was)
These are vastly different approaches, but we agreed that they are all forms of AJAX - using sub-page information transfer to support a rich interface that allows developers to be freed from some of the constraints of conventional stateless http page-refreshing web design and to be able to better collaborate with user-experience focused UI designers to make applications that are intuitive and responsive."
This extended quote captures some of the richness that has been brought to JavaScript thru AJAX methods. Suddenlyall those JavaScript components and coding is of prime interest again. Suddenly, Microsoft has gotten DHTML religion of a sorts again. But not too much, as the "new" IE7 browsers still straggles way behind the other browsers not only in richness of features but also in support of W3C standards. For example, Mozilla is now supporting SVG and JavaScript E4X right in the browser. Opera and Mozilla are pledged to deliver some XForms/Forms joint development. And all of the other browsers easily beat IE7‘s latest beta for conformance to basic W3C standards - HTML, CSS, JavaScript, DOM, XML.
But perhaps the most interesting trend coming out of AJAX is the huge innovation that is coming from the Open Source communities. This again puts the lie to the contention made by Microsoft‘s Bill Gates, SAP‘s CEO and others that one can‘t look for major innovation from Open Source. According to the Open Source nay-sayers, only proprietary software developers can deliver sustained innovation. But as in the case of XML, a sizable portion of the innovation in AJAX has come from Open Source contributors. As computing and software mature, and as the move is to large and sometimes viciously monopolistic vendors, Open Source provides a outlet for innovation and creativity that would otherwise be left on the kill table of predatory pricing. So AJAX succeeds because unmet demand in the marketplace has found new outlets. And as we have just seen in our liftoff list of new AJAX applications, there is much to be seen as Software as a Service takes a new turn for the better.
TopNotch Books and Web Resources:
AJAX Matters - news and reviews website on all things AJAX
AJAX Patterns - is all the resources and links going into a book AJAX Design Patterns
SoftwareassheWrote - Blog ofMike Mahemoff which looks at AJAX development and patterns
Opensourcery‘s AJAX Books and Links page - lots of AJAX resources here
Top of Page  Home  Tutorials Click here for AJAX sample =>
Your browser doesnt support (or has disabled) iFrames.

_xyz