Elementals.js

Ajax simple Demo

View the Demo live here

This demo uses elementals.js _.ajax method to load a static test file, and the _.make method to create a PRE tag to place the result into at the end of the document's width-wrapping element. _.Event.add is used to hook Window.onload in a cross-browser compatible fashion.

Code explanation

This one's pretty straight forward.

_.Event.add(window, 'load', function() {
	_.ajax({
		status : {
			200 : function(x) {
				_.make('pre', {
					content : x.responseText,
					last : document.getElementById('pageWrapper')
				});
			}
		},
		request : ['get', 'ajaxTest.test'],
		mimeType : 'text/plain'
	});
});

We call _.Event.add to hook an "onload" event onto Window. The function just calls _.ajax passing our construction object.

First we create a status object containing our readyState 4 Stats 200 handler, which simple uses _.make to create a PRE tag, plugging in our content and appending that new tag as the last element of DIV#pageWrapper.

Then our request array gets passed the same values as you would pass to any XMLHttpRequest object's open() method. As request is present in the object we're passing to _.ajax, the send() method will be called automatically for us.

The same action could also be performed thusly:

_.event.add(window, 'load', function() {
	var x = _.ajax(function(x) {
		_.make('pre', {
			content : x.responseText,
			last : document.getElementById('pageWrapper')
		});
	});
	x.open('get', 'ajaxTest.test');
	x.send();
});

I simply used the full object construction method to familiarize you with it in preparation for the more advanced AJAX with onprogress demo.