Async

Asynchronize with jQuery
Kevin 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

Demo
Basic use of $.ajax()

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

Demo
Let’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

Demo
Implementing 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

Demo
Putting It All Together

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

Async

by Kevin Griffin on Aug 09, 2010

Accessibility

Upload Details

Usage Rights

1 Embed 149

Statistics

Async — Presentation Transcript