Async

1,388 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,388
On SlideShare
0
From Embeds
0
Number of Embeds
178
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Async

  1. 1. Asynchronize with jQuery<br />Kevin Griffin<br />
  2. 2. Developer for Antech Systems<br />Chesapeake, VA<br />Microsoft MVP – Client App Dev<br />ASPInsider<br />Leader of Hampton Roads .NET Users Group<br />About Me<br />
  3. 3. What is AJAX?<br />Basic AJAX Implementation<br />AJAX Shortcuts<br />Global Handlers<br />Design Considerations<br />Agenda<br />
  4. 4. Buzzword<br />Asynchronous JavaScript and Xml<br />Allows us to load or post data from the server without having to do post back.<br />AJAX?<br />
  5. 5. Asynchronous <br />Don’t block the current thread<br />No defined execution time<br />Start a call, and designate a callback method for when the call returns.<br />Designing AJAX Applications<br />
  6. 6. FireBug<br />http://getfirebug.com/<br />Fiddler<br />http://www.fiddler2.com/<br />AJAX Toolkit<br />Psych!<br />Tools for an AJAX Developer<br />
  7. 7. Low level interface for making AJAX calls.<br />Prototype:<br />$.ajax(settings)<br />jQuery.ajax()<br />
  8. 8. url<br />Url that jQuery should use for making the request.<br />dataType<br />The type of data we’re expecting from the response.<br />Xml, JSON, Script, Html<br />success<br />Function to call if the AJAX call succeeds.<br />error<br />Function to call if the AJAX call fails.<br />complete<br />Function to call when the AJAX call returns. Success or Failure.<br />Basic Settings<br />
  9. 9. Demo<br />Basic use of $.ajax()<br />
  10. 10. Because developers are lazy.<br />$.get()<br />$.getJSON()<br />$.getScript()<br />$.post()<br />$.load()<br />FAILS SILENTLY!<br />Shortcuts<br />
  11. 11. Demo<br />Let’s take a shortcut<br />
  12. 12. Keep track of AJAX events globally in your applications.<br />$(element).ajaxComplete()<br />$(element).ajaxError()<br />$(element).ajaxSend()<br />$(element).ajaxStart()<br />$(element).ajaxStop()<br />$(element).ajaxSuccess()<br />Global Handlers<br />
  13. 13. Demo <br />Implementing Global Event Handlers<br />
  14. 14. Let the user know something is happening<br />Progress indicators<br />Loading dialogs<br />Handle errors gracefully<br />Either local or global handlers<br />Plan for worst case scenarios<br />Dial up, hotel wireless<br />SEO<br />Back Button<br />Design Considerations<br />
  15. 15. Demo<br />Putting It All Together<br />
  16. 16. Email: kevin@kevgriffin.com<br />Twitter: 1kevgriff<br />http://www.kevgriffin.com<br />Contact Me<br />

×