Back in 2010 I mentioned presenting on ArtLung Rosetta. Well, the thing I wanted to do back then, I have finally done, and that’s add AJAX examples for all the libraries.
So, for example, here’s loading a chunk of HTML into a certain div from a link click in the different libraries:
dojo
dojo.connect(dojo.byId('ajaxloadHtml'), 'onclick', function(e){
dojo.xhrGet({
url : "ajax/chunk.html",
handleAs : "text",
load : function(response, ioArgs) {
dojo.byId('ajaxOutput').innerHTML = response;
return;
}
});
dojo.stopEvent(e);
});
Ext Core
Ext.get('ajaxloadHtml').on('click', function(e, target){
var url = 'ajax/chunk.html';
Ext.Ajax.request({
url : url,
method: 'GET',
success: function ( result, request ) {
Ext.get('ajaxOutput').dom.innerHTML = result.responseText;
}
});
}, null, {preventDefault:true});
Glow
glow.events.addListener('#ajaxloadHtml', 'click', function(){
var url = 'ajax/chunk.html';
var opts = {
onLoad: function(data){
glow.dom.get('#ajaxOutput').html(data.text());
}
};
glow.net.get(url, opts);
return false;
});
jQuery
$('#ajaxloadHtml').bind('click', function(){
$.get('ajax/chunk.html',null, function(data){
$('#ajaxOutput').html(data);
});
return false;
});
MooTools
$('ajaxloadHtml').addEvent('click', function(e){
var url = 'ajax/chunk.html';
$('ajaxOutput').load(url);
e.stop();
});
Prototype
$('ajaxloadHtml').observe('click', function(evt){
var url = 'ajax/chunk.html';
new Ajax.Request(url, {
method: 'get',
onSuccess: function(transport) {
$('ajaxOutput').update(transport.responseText);
}
});
Event.stop(evt);
});
You can fork the project on GitHub if you are so inclined.
one comment...
[…] from: ArtLung : ArtLung Rosetta: comparative anatomy for JavaScript … Bookmark on Delicious Digg this post Recommend on Facebook share via Reddit Share with Stumblers […]