mootools

References to Documentation

1. Plugins/Tips.js#Tips
2. Native/Element.js#Element.addClass
3. Native/Element.js#Element.setHTML
4. Native/Element.js#Element.removeClass
5. Native/Element.js#Element.setProperty
6. Remote/Ajax.js#Ajax
7. Core/Core.js#$merge
8. Plugins/Group.js#Group
9. Element/Element-Event.js#Element.addEvent
10. Element/Element-Event.js#Event
11. Native/Array.js#Array.each
12. Remote/Ajax.js#Ajax.request

var url = 'http://demos.mootools.net/demos/Group/lipsum.html?antiCache=';
var id = 0;
var tips = new Tips();
 
/**
 * reqState is a custom option, onRequest/onComplete can handle
 * it like a property. Its used here to take track of the element
 * for the specific Ajax requests.
 * 
 * We define options here because it saves code and all
 * Ajax instances have the same options. We also add a Tips::build
 * to show the responseText
 */
 
var options = {
	method: 'get',
	onRequest: function(){
		this.options.reqState
			.addClass('ajax-loading')
			.setHTML('Request ...');
	},
	onComplete: function(resp){
		this.options.reqState
			.removeClass('ajax-loading')
			.setProperty('title', 'Response: :: ' + resp)
			.setHTML('Complete!');
		tips.build(this.options.reqState);
 
	}
};
 
/**
 * a for loop here would be easier, but its better that way so you can
 * see whats in xhrs: 6 Ajax instances
 * 
 * The id is appended as url-parameter to prevent caching.
 */
var xhrs = [
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options))
];
 
/**
 * The group, it has one Event that waits for all Ajax instances to finish
 * it: onComplete. When all requests are complete this onComplete is fired.
 */
var group = new Group(xhrs[0], xhrs[1], xhrs[2], xhrs[3], xhrs[4], xhrs[5]);
 
group
	.addEvent('onRequest', function() {
		$('req-state-all')
			.addClass('ajax-loading')
			.setHTML('All Requests started ...');
	}).
	addEvent('onComplete', function() {
		$('req-state-all')
			.removeClass('ajax-loading')
			.setHTML('All Completed!');
	});
 
/**
 * The last thing, the event which starts the request.
 */
$('req-start').addEvent('click', function(e) {
	new Event(e).stop();
 
	xhrs.each(function(xhr){
		xhr.url = url + $random(100, 999);
		xhr.request();
	});
});

<h3>Group waits till all Ajax requests are done.</h3>
<a id="req-start" href="#">Start Requests</a>
<dl id="req-states">
	<dt>Request #1:</dt>
	<dd id="req-state-1">-</dd>
	<dt>Request #2:</dt>
	<dd id="req-state-2">-</dd>
	<dt>Request #3:</dt>
	<dd id="req-state-3">-</dd>
	<dt>Request #4:</dt>
	<dd id="req-state-4">-</dd>
	<dt>Request #5:</dt>
	<dd id="req-state-5">-</dd>
	<dt>Request #6:</dt>
	<dd id="req-state-6">-</dd>
	<dt><strong>OVERALL:</strong></dt>
	<dd id="req-state-all">-</dd>
</dl>

#req-states dt
{
	width: 100px;
	float: left;
}
#req-states dd
{
	padding-left: 20px;
	margin-left: 20px;
}
#req-states dd.ajax-loading
{
	margin-left: 80px;
	background:	url(http://demos.mootools.net/demos/Group/spinner.gif) no-repeat 0 0;
}
 
.tool-tip {
	color: #444;
	background-color: #eee;
	width: 300px;
	z-index: 13000;
}
 
.tool-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #222;
	padding: 8px 8px 4px;
}
 
.tool-text {
	font-size: 11px;
	padding: 4px 8px 8px;
}