ArtLung [Joe Crawford]

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.