AJAX Technology Evaluation Bryan Jones Philip Lim Fred

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

Agenda l. What ¡ Introduction l. How work? ¡ ¡ ¡ is AJAX? does AJAX Components Diagram Implementation l. Where used? ¡ ¡ Examples Demonstration l. Why ¡ ¡ ¡ is AJAX? Benefits Pitfalls Tech Comparison l. Who has questions?

What is AJAX? - Introduction l. What ¡ Introduction l. How work? ¡ ¡ ¡ is AJAX? l. Where ¡ ¡ l What it is: ¡ is AJAX ¡ Examples Demonstration l. Why ¡ AJAX: Asynchronous Javascript And XML does AJAX Components Diagram Implementation used? l AJAX? Benefits Pitfalls Tech Comparison l. Who Web development technique Used to create more responsive, realtime web applications has questions? l What it isn’t: ¡ ¡ a language standardized

How does AJAX work? - Components l. What ¡ is AJAX? Introduction l XHTML & CSS ¡ For presentation l. How does AJAX work? ¡ Components ¡ Diagram ¡ Implementation l. Where used? ¡ ¡ l ¡ ¡ is AJAX Examples Demonstration Javascript l XMLHttp. Request( ) ¡ l. Why ¡ ¡ ¡ AJAX? Benefits Pitfalls Tech Comparison l. Who has questions? ¡ Conclusion l To modify DOM To access the XMLHttp. Request API For asynchronous connection between client and server XML ¡ For information exchange between client and server

How does AJAX work? - Diagram l. What ¡ is AJAX? Client Introduction XHTML / CSS l. How does AJAX work? ¡ Components ¡ Diagram ¡ Implementation l. Where used? ¡ ¡ ¡ AJAX? Benefits Pitfalls Tech Comparison l. Who has questions? ¡ DOM is AJAX Examples Demonstration l. Why Javascript Call Conclusion Javascript XMLHttp. Request( ) XML Server

How does AJAX work? - Implementation l. What ¡ is AJAX? work? ¡ Components ¡ Diagram ¡ Implementation l. Where used? ¡ ¡ ¡ l Libraries is AJAX ¡ ¡ ¡ l ¡ ¡ AJAX? Benefits Pitfalls Tech Comparison ¡ ¡ l. Who has questions? ¡ Conclusion Open. Rico (includes drag and drop management) SAJAX (pretty bare bones) Scriptalicious (lots of effects) XHttp. Request Properties Examples Demonstration l. Why ¡ So you want to get started? Introduction l. How does AJAX ¡ l onreadystatechange ready. State (Object status integer: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete ) response. Text response. XML status. Text

Where is AJAX used? - Examples l. What ¡ Introduction l. How work? ¡ ¡ ¡ is AJAX? used? ¡ Examples Demonstration l. Why ¡ ¡ Components Diagram Implementation is AJAX ¡ Google Maps Google Suggest Gmail l Flickr l Web based Outlook l “Drag and drop” Shopping Cart AJAX? Benefits Pitfalls Tech Comparison l. Who Google ¡ does AJAX l. Where ¡ l has questions?

Where is AJAX used? Demonstration l. What ¡ Introduction l. How work? ¡ ¡ ¡ is AJAX? does AJAX Components Diagram Implementation l. Where used? ¡ ¡ Examples Demonstration l. Why ¡ ¡ ¡ is AJAX? Benefits Pitfalls Tech Comparison l. Who has questions? l (Insert our demo here)

Why AJAX? - Benefits l. What ¡ Introduction l. How work? ¡ ¡ ¡ is AJAX? l. Where ¡ ¡ ¡ l has questions? Most modern browsers support full functionality Interoperability ¡ l More rich, better look and feel Compatability ¡ AJAX? Benefits Pitfalls Tech Comparison l. Who l is AJAX Examples Demonstration l. Why Interactivity ¡ does AJAX Components Diagram Implementation used? l Usable with LAMP philosophy Basic skillset is common ¡ XHTML, Javascript, XML, all ubiquitous

Why AJAX? - Pitfalls l. What ¡ Introduction l. How work? ¡ ¡ ¡ is AJAX? l. Where ¡ ¡ ¡ is AJAX? Benefits Pitfalls Tech Comparison l. Who l Complex l Quirky ¡ Examples Demonstration l. Why Responsiveness does AJAX Components Diagram Implementation used? l has questions? ¡ Can break “back” button Can break bookmarking

Why AJAX? – Tech Comparison l. What ¡ Introduction l. How work? ¡ ¡ ¡ is AJAX? Components Diagram Implementation ¡ ¡ l Examples Demonstration ¡ AJAX? Benefits Pitfalls Tech Comparison l. Who has questions? l 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 ¡ l. Why ¡ ¡ is AJAX used? ¡ XAML ¡ does AJAX l. Where ¡ l 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 l. What ¡ Introduction l. How work? ¡ ¡ ¡ is AJAX? l. Where ¡ ¡ ¡ is AJAX Examples Demonstration l. Why AJAX? Benefits Pitfalls Tech Comparison l. Who AJAX’s future? l No standards / very immature l Lots of libraries available with varying degrees of usability does AJAX Components Diagram Implementation used? l has questions?