async
TRANSCRIPT
Asynchronize with jQueryKevin Griffin
Developer for Antech Systems Chesapeake, VA
Microsoft MVP – Client App Dev ASPInsider Leader of Hampton Roads .NET Users Group
About Me
What is AJAX? Basic AJAX Implementation AJAX Shortcuts Global Handlers Design Considerations
Agenda
Buzzword Asynchronous JavaScript and Xml
Allows us to load or post data from the server without having to do post back.
AJAX?
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
FireBug◦ http://getfirebug.com/
Fiddler◦ http://www.fiddler2.com/
AJAX Toolkit◦ Psych!
Tools for an AJAX Developer
Low level interface for making AJAX calls.
Prototype:◦ $.ajax(settings)
jQuery.ajax()
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
DemoBasic use of $.ajax()
Because developers are lazy.
$.get() $.getJSON() $.getScript() $.post() $.load()
FAILS SILENTLY!
Shortcuts
DemoLet’s take a shortcut
Keep track of AJAX events globally in your applications.
$(element).ajaxComplete() $(element).ajaxError() $(element).ajaxSend() $(element).ajaxStart() $(element).ajaxStop() $(element).ajaxSuccess()
Global Handlers
DemoImplementing Global Event Handlers
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
DemoPutting It All Together
