AJAX : Technology Evaluation Bryan Jones Philip Lim Fred Lo Warren Wang
Agenda What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion
What is AJAX? - Introduction AJAX: Asynchronous Javascript And XML What it is: Web development technique Used to create more responsive, real- time web applications What it isn’t: a language standardized What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion
How does AJAX work? - Components XHTML & CSS For presentation Javascript To modify DOM To access the XMLHttpRequest API XMLHttpRequest( ) For asynchronous connection between client and server XML For information exchange between client and server What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion
Client XHTML / CSS How does AJAX work? - Diagram What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion Server Javascript XMLHttpRequest( ) XML Javascript Call DOM
How does AJAX work? - Implementation What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion So you want to get started? Libraries OpenRico (includes drag and drop management) SAJAX (pretty bare bones) Scriptalicious (lots of effects) XHttpRequest Properties onreadystatechange readyState (Object status integer: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete ) responseText responseXML status statusText
Where is AJAX used? - Examples What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion Google Google Maps Google Suggest Google Suggest Gmail Flickr Web based Outlook “Drag and drop” Shopping Cart
Where is AJAX used? - Demonstration What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion (Insert our demo here)
Why AJAX? - Benefits What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion Interactivity More rich, better look and feel Compatability Most modern browsers support full functionality Interoperability Usable with LAMP philosophy Basic skillset is common XHTML, Javascript, XML, all ubiquitous
Why AJAX? - Pitfalls What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion Responsiveness Complex Quirky Can break “back” button Can break bookmarking
Why AJAX? – Tech Comparison What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion XAML XAML Pros: Very high performance, robust, and versatile. XAML Negatives: Microsoft only technology, not available for use until Vista versions of Explorer. Macromedia’s Flash Flash Pros: Cross platform and browser support. Quick and flexible. Flash Negatives: Not respected by enterprise software developers. Java Java Pros: Very fast. Supported on any platform with Java plug-in Java Negatives: Requires java plug-in
Who has questions? – Conclusion What is AJAX? Introduction How does AJAX work? Components Diagram Implementation Where is AJAX used? Examples Demonstration Why AJAX? Benefits Pitfalls Tech Comparison Who has questions? Conclusion AJAX’s future? No standards / very immature Lots of libraries available with varying degrees of usability