AJAX%20:%20Technology%20Evaluation

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 isnt
• 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
How does AJAX work? - Diagram
Client

• 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

XHTML / CSS
DOM
Javascript Call
Javascript

XMLHttpRequest( )
XML
Server
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 integer0
  uninitialized1 loading2 loaded3
  interactive4 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
• 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.
• Macromedias 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

• AJAXs future?
• No standards / very immature
• Lots of libraries available with varying degrees
  of usability