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 so far...
[…] from: ArtLung : ArtLung Rosetta: comparative anatomy for JavaScript … Bookmark on Delicious Digg this post Recommend on Facebook share via Reddit Share with Stumblers […]