Elementals.js

Latest Version: 2.0 RC 3 14 March 2017

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. _.eventAdd is used to hook Window.onload in a cross-browser compatible fashion.

Code explanation

This one's pretty straight forward.

_.eventAdd(_w, 'load', function() {
	_.ajax({
		status : {
			200 : function(x) {
				_.make('pre', {
					content : x.responseText,
					last : _d.getElementById('pageWrapper')
				});
			}
		},
		request : ['get', 'ajaxTest.test']
	});
});

We call _.eventAdd to with our _w elementals.js shortcut to Window, hooking the load event with an anonynmous function. That 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:

_.eventAdd(_w, 'load', function() {
	var x = _.ajax(function(x) {
		_.make('pre', {
			content : x.responseText,
			last : _d.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.

Downloads

Advertisement