extending ajax events for all mankind
DESCRIPTION
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.TRANSCRIPT
![Page 1: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/1.jpg)
welcome
![Page 3: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/3.jpg)
what is the meaning of life?
i dunno. maybe jQuery?
or 42. something like that.
![Page 4: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/4.jpg)
so, why are we here?
I’m glad you asked.
![Page 5: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/5.jpg)
extending ajax events for all
mankind…
jQuery Conf 2009
![Page 6: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/6.jpg)
our little chat today
• what are Ajax events?
• how does jQuery handle Ajax events?
• why would I want to extend them?
• gimme some real code!o mpAjaxo flXHRproxy
![Page 7: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/7.jpg)
![Page 8: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/8.jpg)
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.
![Page 9: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/9.jpg)
how does jQuery handle Ajax events?
“a tale of two cities”– per-request (aka, “local”)
• callback functions as parameters/options to $.ajax(), $.get(), $.post(), etc
– global events• listeners bound to DOM element(s)• triggered with every Ajax call
![Page 10: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/10.jpg)
how does jQuery handle Ajax events?
per-request callbacks:– ‘beforeSend’, ‘complete’, ‘error’, ‘success’, ‘timeout’– different function signatures (parameters)– only one registered callback per event per request
![Page 11: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/11.jpg)
how does jQuery handle Ajax events?
global events:– “ajax___” where ___ is one of: ‘Complete’,’Error’,’Send’,’Start’,’Stop’,’Success’– can be bound to whatever DOM element(s) you choose; all handlers get called for each event– ‘Start’ and ‘Stop’ are special– consistent function signature– can be disabled per-request via ‘global:false’
![Page 12: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/12.jpg)
…try to take over the Ajax event.
![Page 13: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/13.jpg)
how does jQuery handle Ajax events?
so, how can we use them?
hide/show loading “spinner”
show generic error message
resubmit a request on timeout
![Page 14: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/14.jpg)
how does jQuery handle Ajax events?
hide/show loading “spinner”:
![Page 15: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/15.jpg)
how does jQuery handle Ajax events?
show generic error message:
![Page 16: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/16.jpg)
how does jQuery handle Ajax events?
resubmit a request on timeout:
![Page 17: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/17.jpg)
why would I want to extend them?
• overall goal == better code organization
• existing events not granular enough– monolithic callback functions with ‘switch’
• extend (or override) existing functionality– change callback signature– additional pre- or post-processing on requests or responses
![Page 18: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/18.jpg)
why would I want to extend them?
some extension ideas:
1. request retry on timeout
2. “application error” event handling
3. smarter response caching
4. ordered responses via request/response queue
5. solve “travelling salesman” problem
![Page 19: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/19.jpg)
gimme some real code!example: application-level success/error
![Page 20: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/20.jpg)
gimme some real code!example: application-level success/error
![Page 21: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/21.jpg)
mpAjax
multi-part Ajax *responses* -- return multiple different "parts" of data (different types, etc) in a single response.
1. return a block of HTML (without encoding/escaping it into JSON), and a separate JSON packet with data
2. return an HTML template and some JSON data separately, without any obfuscation/encoding/escaping of either
3. return some HTML, some JSON, and also some CSS, and handle all three types of data separately
4. return two or more different blocks of HTML, and need to handle each separately
![Page 22: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/22.jpg)
mpAjax
strategy:
• post-process data from a ‘success’ful Ajax request
• if multi-part format found, string parse response text, send each part to separate response handler
• otherwise, behave exactly like normal Ajax request/response
![Page 23: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/23.jpg)
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
![Page 24: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/24.jpg)
flXHRproxy
• flXHR is a javascript API wrapper that mimics native XHR object in almost every way, but behind the scenes, makes calls via an invisible flash asset (crossdomain.xml)• flXHRproxy adapts jQuery to use flXHR for fully featured cross-domain Ajax
– uses the jQuery plugin ‘XHR’ to register flXHR as a XHR clone– registers/associates specific flXHR config options with a specific target URL
![Page 25: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/25.jpg)
flXHRproxy
strategy:
• register flXHR as XHR drop-in replacement
• extend ‘success’ function signature (parameters) to include the XHR object
• tie flXHR’s ‘onerror’ event to trigger the jQuery ‘error’ events
![Page 26: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/26.jpg)
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
![Page 27: Extending Ajax Events for all mankind](https://reader036.vdocuments.us/reader036/viewer/2022081519/558d2572d8b42a2e638b459d/html5/thumbnails/27.jpg)
enjoy
http://plugins.jquery.com/project/mpAjaxhttp://test.getify.com/mpAjax
http://plugins.jquery.com/project/flXHRhttp://flxhr.flensed.com/jquery.php
rate this talk: http://speakerrate.com/talks/1408-extending-ajax-events-for-all-mankind