Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ajax Presentation for the TSSG

1,965 views

Published on

A presentation I did to the TSSG on Ajax (http://paulmwatson.com/journal/2006/05/19/ajax-presentation/).

Published in: Technology, Sports
  • Be the first to comment

Ajax Presentation for the TSSG

  1. 1. Ajax TSSG Tech Session by Paul Watson (pwatson@tssg.org)
  2. 2. Ajax is not… <ul><li>A soccer football team (go Barcelona!) </li></ul><ul><li>Or a cleaning agent </li></ul>
  3. 3. Ajax is… <ul><li>Asynchronous JavaScript + XML </li></ul><ul><li>A term coined by Jesse James Garret of Adaptive Path </li></ul>Not Jesse James the outlaw
  4. 4. But <ul><li>Forget what the term stands for </li></ul>
  5. 5. Ajax Enables rich user interfaces
  6. 11. Ajax Web-sites become Web-clients
  7. 12. Before Ajax
  8. 13. Before Ajax <ul><li>One page per request </li></ul><ul><li>One URL for one page </li></ul><ul><li>The whole page updates </li></ul>
  9. 14. With Ajax
  10. 15. With Ajax <ul><li>Each action has a URL </li></ul><ul><li>Multiple requests per page </li></ul><ul><li>You control what updates </li></ul>
  11. 16. Each action has a URL <ul><li>Your web-server becomes a data provider </li></ul><ul><li>It sends snippets of text (XML, HTML, JSON etc.) </li></ul><ul><li>The client processes the data </li></ul>
  12. 17. XML <ul><li>Forget about it </li></ul><ul><li>JavaScript + XML is painful </li></ul><ul><li>XHR handles text </li></ul><ul><li>Use JSON </li></ul><ul><li>Don’t use HTML fragments </li></ul>
  13. 18. XmlHttpRequest <ul><li>The key </li></ul><ul><li>Fire off HTTP requests without refreshing the browser </li></ul><ul><li>Microsoft invented it </li></ul><ul><li>In most browsers (IE, Firefox, Opera, Safari) </li></ul><ul><li>XHR is easier to say </li></ul>
  14. 19. XmlHttpRequest
  15. 20. Not for everything <ul><li>Use Ajax wisely </li></ul><ul><li>Three paths </li></ul><ul><ul><li>Standard web-site </li></ul></ul><ul><ul><li>Ajax enhanced web-site </li></ul></ul><ul><ul><li>Ajax web-client </li></ul></ul>
  16. 21. Challenges <ul><li>Chatty clients –request caching & batching </li></ul><ul><li>Cross-browser – abstracted by libraries </li></ul><ul><li>Back and forward – not easy </li></ul><ul><li>Security – same as ever </li></ul><ul><li>Network issues – client exception handling </li></ul><ul><li>Browser bottleneck – batching & caching </li></ul><ul><li>User feedback – visual cues </li></ul><ul><li>Multiple actions – request prioritisation </li></ul><ul><li>Accessibility – not easy </li></ul>
  17. 22. Tools <ul><li>Few tools </li></ul><ul><ul><li>Notepad </li></ul></ul><ul><ul><li>Firefox </li></ul></ul><ul><ul><li>FireBug </li></ul></ul><ul><li>Many libraries </li></ul><ul><ul><li>Prototype, Atlas, Anthem, Dojo etc. </li></ul></ul>
  18. 23. Testing <ul><li>Same testing tools you use for your current web-sites </li></ul>
  19. 24. + Ajax

×