AJAX - Enriching Web Applications
AJAX - Enriching Web Applications...................................................................................................1 Introduction......................................................................................................................................3 Users of Ajax................................................................................................................................... 5 Flickr........................................................................................................................................... 5 Google Maps............................................................................................................................... 5 Microsoft Start................................................................................................................................. 6 In depth .......................................................................................................................................... 6 Issues ...............................................................................................................................................7 Why Enriched Web Applications.................................................................................................... 7 Summary and My AJAX Example.................................................................................................. 8 Some useful links.............................................................................................................................8
Introduction
AJAX stands for Asynchronous JavaScript & XML. It isn't a new technology, it's a collection of technologies or components using there best features to bring rich enabled applications to the web platform. Web applications are typically limited by network connectively and it's thin client methodology. Introducing a buffer to hold data and user requests at the client level they can be enrich to give desktop application feel.
Illustration 2: Desktop Application: Photo organiser for MS Windows
Illustration 1: Web Application : Simple User Register Form
In a traditional web application every action has to be valid dated before proceeding to the next state. This leaves the user waiting for the server to come back with a response, synchronous model.
Introducing an additional layer at the client level allows requests to be valid dated before posting back to the server. For example checking a postal code is valid before posting to the back office. This doesn't have stop with one stage processing, a whole sets of actions could be validated and queued before posting to the back office.
Users of Ajax
A couple of big users of Ajax are Flickr, Google and Microsoft. Clearnova provides a page that shows the workings of Ajax with live examples at http://www.clearnova.com. Ajaxian website has hundreds of examples, . ckr http://www.flickr.com/ Flickr the online photo management uses combination traditional DHTML presentation and Flash for some more advanced features.
Illustration 3: Changing the title of this photo doesn't require the page to be refreshed
Illustration 4: A number of operations can be completed on this photo (Delete, Cropped, hair re-styled) with this Flash flavoured AJAX application.
Google Maps
http://maps.google.co.uk/ Google Maps is one of the many on-line map provides that makes use of Ajax.
Microsoft Start
http://www.start.com/ Only a testing area for MSN future services but shows Microsoft is keen to use the technique.
Some other examples of AJAX http://openrico.org/rico/demos.page
In depth
Ajax consists of a mixture of technologies. I've grouped them into four base components
technologies:PRESENTATION – HTML, XHTML, CSS and in some cases Flash is used to present your application AJAX ENGINE - This binds everything together DYNAMIC CONTENT - Dynamic HTML and I guess Flash can be used to update the page within the presentation component. DATA STRUCTURE -
Issues
Some one listed a couple of things that AJAX can't do or has limited scope:• • • • • • • •
Browser morphing Adding buttons, toolbars, bookmarks, icons; changing browser behaviour. Local file access Reading and writing files on the user’s hard drive. Sound Playing music and sound effects. Rich graphics Providing rich graphics, changing dynamically. (This is gradually changing with the introduction of SVG in some browsers, but it’s no match for desktop graphics.) Keyboard shortcuts Providing a full range of keyboard shortcuts while avoiding conflicts with the browser’s own keyboard shortcuts. Hardware access Input from devices such as microphones, webcams, and gamepads; output to devices like printers and portable gadgets. Extended communication Communication from the client machine to locations beyond just the base server, and in protcols other than plain old HTTP. Operating system interaction Catching events such as shutdown initiation; changing preferences; popping up alerts; reading hardware information.
Why Enriched Web Applications
Microsoft
Summary and My AJAX Example
http://www.opencastle.co.uk/ajax/
Some useful links
Basics of AJAX explained http://www.adaptivepath.com/publications/essays/archives/000385.php http://en.wikipedia.org/wiki/AJAX AJAX from developers view http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html#code5