1. Asynchronize with jQuery Kevin Griffin

2. Developer for Antech Systems Chesapeake, VA Microsoft MVP – Client App Dev ASPInsider Leader of Hampton Roads .NET Users Group About Me

3. What is AJAX? Basic AJAX Implementation AJAX Shortcuts Global Handlers Design Considerations Agenda

4. Buzzword Asynchronous JavaScript and Xml Allows us to load or post data from the server without having to do post back. AJAX?

5. Asynchronous Don’t block the current thread No defined execution time Start a call, and designate a callback method for when the call returns. Designing AJAX Applications

6. FireBug http://getfirebug.com/ Fiddler http://www.fiddler2.com/ AJAX Toolkit Psych! Tools for an AJAX Developer

7. Low level interface for making AJAX calls. Prototype: $.ajax(settings) jQuery.ajax()

8. url Url that jQuery should use for making the request. dataType The type of data we’re expecting from the response. Xml, JSON, Script, Html success Function to call if the AJAX call succeeds. error Function to call if the AJAX call fails. complete Function to call when the AJAX call returns. Success or Failure. Basic Settings

9. Demo Basic use of $.ajax()

10. Because developers are lazy. $.get() $.getJSON() $.getScript() $.post() $.load() FAILS SILENTLY! Shortcuts

11. Demo Let’s take a shortcut

12. Keep track of AJAX events globally in your applications. $(element).ajaxComplete() $(element).ajaxError() $(element).ajaxSend() $(element).ajaxStart() $(element).ajaxStop() $(element).ajaxSuccess() Global Handlers

13. Demo Implementing Global Event Handlers

14. Let the user know something is happening Progress indicators Loading dialogs Handle errors gracefully Either local or global handlers Plan for worst case scenarios Dial up, hotel wireless SEO Back Button Design Considerations

15. Demo Putting It All Together

16. Email: kevin@kevgriffin.com Twitter: 1kevgriff http://www.kevgriffin.com Contact Me