Tuesday, April 15th, 2008
Dojo XHR Plugins; How do you want your XHR today?
Category: Dojo, XmlHttpRequest
If you look at dojo.xhrGet you will see "Acceptable values are: text (default), json, json-comment-optional, json-comment-filtered, javascript, xml", but:
What you may not know is that the handleAs parameter is merely a way of specifying what plugin to use. Knowing where these plugins are, how they work, and how they can be adapted to suit your project will allow you to make repetitive tasks easy and less error-prone.
He starts by piggybacking on the json style callback, and adds a hook so when you do a query, if there are updated objects out there, they come back in the JSON so you can deal with them without having an extra remote call:
-
-
dojo._contentHandlers.json = (function(old){
-
return function(xhr){
-
var json = old(xhr);
-
if(json.updated){
-
processUpdatedObjects(json.updated);
-
delete json.updated;
-
}
-
return json;
-
}
-
})(dojo._contentHandlers.json);
-
Next, Neil goes on to write a system that auto updates nodes:
-
-
dojo.xhrGet({
-
url: "node-updates.php",
-
handleAs: "node-update-server"
-
});
-
-
dojo.xhrGet({
-
url: "node-content.php?node=sidebar",
-
node: "sidebar",
-
handleAs: "node-update"
-
});
-
which is as easy as:
-
-
dojo.mixin(dojo._contentHandlers, {
-
"node-update-server": function(xhr){
-
var json = dojo._contentHandlers.json(xhr);
-
dojo.forEach(json.updates, function(update){
-
var node = dojo.byId(update.id);
-
if(node){
-
node.innerHTML = update.html;
-
}
-
});
-
},
-
"node-update": function(xhr){
-
var node = dojo.byId(xhr.args.node);
-
if(node){
-
node.innerHTML = dojo._contentHandlers.text(xhr);
-
}
-
}
-
});
-
In conclusion:
Dojo makes it incredibly easy to change the way that your Ajax calls work. You can change the format of JSON your server returns without having to change any of your callbacks, you can change the handleAs type for a single function to change the data given to your callback, you can get rid of callbacks altogether and use the arguments to your xhr call determine what should be done with your results.
Related Content:
I think all these “plugin” things from jQuery and Dojo are overrated. All you’re really doing is extending an object’s prototype with your own methods. Nothing particularly architecturally elite about it as it’s a by-design behavior in the JavaScript language itself.
Also, this example with Dojo is far from “pluggable”. All you’re doing is hijacking an existing method. Anyone can inject their own functionality by hijacking existing methods. Moreover, you’re modifying the private variables of an object (private by convention, at least) which is a big no-no in programming integrity.
Jordan:
this *isn’t* extending an object prototype, it’s extending the registry for content handlers. Yes, one example hijacks an existing handler, but the dojo.mixin() based example adds completely new handlers to the registry. Maybe it’s not big magic, but it’s certainly useful and as your app grows and your needs grow outside of the pre-ordained “sweet spot” of a toolkit, it’s great to know that your toolkit of choice has provided public, documented, places for extensions which can help you build up your tools while you build out your own app code.
Regards