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 & jQuery - City University WAD Module

1,152 views

Published on

Slides for session on AJAX to be delivered to students at City University on the Web Applications Development module.

  • Be the first to comment

  • Be the first to like this

AJAX & jQuery - City University WAD Module

  1. 1. Charlie Perrins Lead Developer WEB APPLICATIONS DEVELOPMENTAJAX & jQuery - Fri 18th March 2011
  2. 2. Introduction
  3. 3. Introduction• Aims• What is AJAX?• Who uses it?• Benefits• Considerations• When to use• Lab Session Overview
  4. 4. Aims flickr.com/photos/ebolasmallpox/
  5. 5. Aims
  6. 6. Aims• Understand the term AJAX
  7. 7. Aims• Understand the term AJAX• Discuss why AJAX is useful
  8. 8. Aims• Understand the term AJAX• Discuss why AJAX is useful• Share examples of current use
  9. 9. Aims• Understand the term AJAX• Discuss why AJAX is useful• Share examples of current use• Lab Session: simple implementation
  10. 10. What is AJAX? flickr.com/photos/ebolasmallpox/
  11. 11. What is AJAX?
  12. 12. What is AJAX?• Asynchronous JavaScript and XML
  13. 13. What is AJAX?• Asynchronous JavaScript and XML• Mix of technologies
  14. 14. What is AJAX?• Asynchronous JavaScript and XML• Mix of technologies• XMLHttpRequest object
  15. 15. What is AJAX?• Asynchronous JavaScript and XML• Mix of technologies• XMLHttpRequest object• DON’T need jQuery, but it makes our lives easier
  16. 16. What is AJAX?• Asynchronous JavaScript and XML• Mix of technologies• XMLHttpRequest object• DON’T need jQuery, but it makes our lives easier• Web 2.0, darling...
  17. 17. What is AJAX?• Asynchronous JavaScript and XML• Mix of technologies• XMLHttpRequest object• DON’T need jQuery, but it makes our lives easier• Web 2.0, darling...• http://en.wikipedia.org/wiki/Ajax_(programming)
  18. 18. PrinciplesHTML FILE SERVER
  19. 19. PrinciplesHTML PAGE my-script.php SERVER
  20. 20. PrinciplesHTML PAGE my-script.php SERVER HTML new-script.php BLOCK AJAX call
  21. 21. Who is using AJAX? flickr.com/photos/ebolasmallpox/
  22. 22. EVERYONE! flickr.com/photos/ebolasmallpox/
  23. 23. Real-World Examples
  24. 24. Real-World Examples• Twitter
  25. 25. Real-World Examples• Twitter• Facebook
  26. 26. Real-World Examples• Twitter• Facebook• Apple
  27. 27. Real-World Examples• Twitter• Facebook• Apple• Google
  28. 28. Real-World Examples• Twitter• Facebook• Apple• Google• ...
  29. 29. Twitter - load new posts flickr.com/photos/ebolasmallpox/
  30. 30. Facebook - chat, messages, ‘likes’ flickr.com/photos/ebolasmallpox/
  31. 31. Apple - dynamic search bar flickr.com/photos/ebolasmallpox/
  32. 32. Google Instant flickr.com/photos/ebolasmallpox/
  33. 33. What are the Benefits? flickr.com/photos/ebolasmallpox/
  34. 34. Benefits
  35. 35. Benefits• Client-side and Server-side scripting are blended
  36. 36. Benefits• Client-side and Server-side scripting are blended• Fast & responsive - don’t have to reload page for new info
  37. 37. Benefits• Client-side and Server-side scripting are blended• Fast & responsive - don’t have to reload page for new info• Saves server - not loading whole page just the specific parts that are changing
  38. 38. Benefits• Client-side and Server-side scripting are blended• Fast & responsive - don’t have to reload page for new info• Saves server - not loading whole page just the specific parts that are changing• Allows great complexity in web applications (Gmail - disable JS and see how it changes)
  39. 39. Gmail - normal flickr.com/photos/ebolasmallpox/
  40. 40. Gmail - no JS flickr.com/photos/ebolasmallpox/
  41. 41. Considerations flickr.com/photos/ebolasmallpox/
  42. 42. Some Considerations
  43. 43. Some Considerations• Reliant on JavaScript
  44. 44. Some Considerations• Reliant on JavaScript• Potential barrier for SEO
  45. 45. Some Considerations• Reliant on JavaScript• Potential barrier for SEO• URLs and the ‘Back’ button
  46. 46. Twitter - no JS
  47. 47. Facebook - no JS
  48. 48. Disabling JavaScript
  49. 49. JavaScript Reliance• What do we think of this?• Cater for the 2%?• Progressive enhancement / graceful degradation
  50. 50. SEO and AJAX
  51. 51. SEO and AJAX• Treat bots like no-js users - what content will they see?
  52. 52. SEO and AJAX• Treat bots like no-js users - what content will they see?• Is your app even indexable?
  53. 53. SEO and AJAX• Treat bots like no-js users - what content will they see?• Is your app even indexable?• Ensure you have solid IA & link structure
  54. 54. SEO and AJAX• Treat bots like no-js users - what content will they see?• Is your app even indexable?• Ensure you have solid IA & link structure• Remember ‘drop-down menus’?
  55. 55. SEO and AJAX• Treat bots like no-js users - what content will they see?• Is your app even indexable?• Ensure you have solid IA & link structure• Remember ‘drop-down menus’?• No excuses for bad HTML!
  56. 56. URLs & the ‘Back’ Button• AJAX-powered apps often not URL-hackable• Pagination - is this an issue?• Back button won’t change state
  57. 57. With great power...
  58. 58. When should we use AJAX? flickr.com/photos/ebolasmallpox/
  59. 59. When to use AJAX• Unobtrusive database input/output• APIs• Unfamiliar scripting environments
  60. 60. Other Options• Show/Hide content• JavaScript tabs• Hyperlinks!
  61. 61. Lab Session flickr.com/photos/ebolasmallpox/
  62. 62. Basic Implementation• Simple HTML link• jQuery ‘click’ event• PHP - $_POST data• $.ajax() function
  63. 63. Charlie Perrins Lead Developer WEB APPLICATIONS DEVELOPMENTAJAX & jQuery - Fri 18th March 2011

×