1. AJAX : Technology Evaluation Bryan Jones Philip Lim Fred Lo Warren Wang

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

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

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

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

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

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

8. 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)

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

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

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

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