Presented 9/12/2009 at jQuery Conf 2009. Like any good Javascript framework would, jQuery includes Ajax functionality into its core. In particular, though, jQuery has some interesting ways it approaches event handling with Ajax responses. We’re going to dive into this Ajax event mechanism, and see what fun we can have with extending it. This talk will first review the various Ajax events and some common ways they are used. Then, we’ll investigate jQuery source code and see how each is accomplished. Armed with this knowledge, we’ll talk about some scenarios where you might want to extend these events with extra functionality, or even add your own custom Ajax events. To move from the theoretical into the concrete, we will discuss two jQuery Ajax plugins I released, mpAjax and flXHRproxy, and look at how each needed in its own way to hook into the Ajax event mechanism and extend it.

1. welcome

2. who am i? kyle simpson @getify [email_address] http://getify.com

3. what is the meaning of life? i dunno. maybe jQuery? or 42. something like that.

4. so, why are we here? I’m glad you asked.

8. what are Ajax events? events specifically triggered when Ajax requests happen. duh. $([‘Complete’,’Error’,’Send’,’Start’,’Stop’,’Success’]).each(function() { console.log(‘ajax’ + this); }); technically, an event is a signal to jQuery to call one or more registered callback functions to let them know something happened. blah, blah, blah.

12. … try to take over the Ajax event.

14. how does jQuery handle Ajax events? hide/show loading “spinner”:

15. how does jQuery handle Ajax events? show generic error message:

16. how does jQuery handle Ajax events? resubmit a request on timeout:

19. gimme some real code! example: application-level success/error

20. gimme some real code! example: application-level success/error

23. mpAjax mpAjax jQuery plugin: http://plugins.jquery.com/project/mpAjax code: http://plugins.jquery.com/files/jquery.mpAjax.js_6.txt demo: http://test.getify.com/mpAjax

26. flXHRproxy flXHR: http://flxhr.flensed.com flXHRproxy jQuery plugin: http://plugins.jquery.com/search/node/fxhr code: http://plugins.jquery.com/files/jquery.flXHRproxy.js_3.txt demo: http://flxhr.flensed.com/code/tests/flxhr-7e.html

27. enjoy http://plugins.jquery.com/project/mpAjax http://test.getify.com/mpAjax http://plugins.jquery.com/project/flXHR http://flxhr.flensed.com/jquery.php rate this talk: http://speakerrate.com/talks/1408-extending-ajax-events-for-all-mankind