Extending Ajax Events for all mankind
Download as PPT, PDF4 likes2,135 views
Kyle Simpson discusses extending AJAX events in jQuery, detailing their types and how they function within the library. The presentation covers local and global event handling, the importance of extending these events for better code organization, and proposes practical examples and plugins like mpajax and flxhrproxy for enhanced AJAX capabilities. Key topics include callback functions, handling multipart AJAX responses, and addressing common limitations in existing functionality.
![who am i? kyle simpson @getify [email_address] http://getify.com](https://image.slidesharecdn.com/extending-ajax-events-090913004523-phpapp02/85/Extending-Ajax-Events-for-all-mankind-2-320.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.](https://image.slidesharecdn.com/extending-ajax-events-090913004523-phpapp02/85/Extending-Ajax-Events-for-all-mankind-8-320.jpg)
Extending Ajax Events for all mankind
- 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.
- 5. extending ajax events for all mankind… jQuery Conf 2009
- 6. 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! mpAjax flXHRproxy
- 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.
- 9. 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
- 10. 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
- 11. 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’
- 12. … try to take over the Ajax event.
- 13. 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
- 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:
- 17. 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
- 18. why would I want to extend them? some extension ideas: request retry on timeout “ application error” event handling smarter response caching ordered responses via request/response queue solve “travelling salesman” problem
- 19. gimme some real code! example: application-level success/error
- 20. gimme some real code! example: application-level success/error
- 21. mpAjax multi-part Ajax *responses* -- return multiple different "parts" of data (different types, etc) in a single response. return a block of HTML (without encoding/escaping it into JSON), and a separate JSON packet with data return an HTML template and some JSON data separately, without any obfuscation/encoding/escaping of either return some HTML, some JSON, and also some CSS, and handle all three types of data separately return two or more different blocks of HTML, and need to handle each separately
- 22. 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
- 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
- 24. 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
- 25. 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
- 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