logo

DWRequest:MooTools 1.2 AJAX Listener &Message Display

Ačkoli je MooTools 1.2 ve své druhé beta fázi, jeho základní syntaxe a teoretické změny byly odstraněny. Knihovna JavaScript se neustále zlepšuje a stává se flexibilnější.

Kolega vedoucí zóny DZone Boyan Kostadinov napsal velmi užitečný článek podrobně popisující, jak můžete na svůj web přidat zobrazení AJAX podobné Gmailu pomocí knihovny JavaScript Prototype. Tento článek mě přivedl k zamyšlení:mohlo by být užitečné vždy zobrazit zprávu s upozorněním AJAX při každém počátečním požadavku, úspěšné události a události selhání? Možná dokonce jen pro účely ladění?

Ať už je váš důvod jakýkoli, vytvořil jsem třídu DWRequest MooTools, abych informoval uživatele nebo vývojáře o každém požadavku AJAX a následném výsledku.

Zobrazit ukázku

Kód CSS

#message	{ display:none; width:150px; text-align:center; padding:5px 8px; font-weight:bold; position:absolute; right:2%; font:12px arial; }

Kód XHTML

Následující kód je příkladem dvou odkazů XHTML, které provádějí volání AJAX. Všimněte si zprávy DIV.

<body>

	<div id="message">Performing Request...</div>
	<a href="inputs.php" class="ajax">Succeed</a><br />
	<a href="sug.php" class="ajax">Fail</a>

</body>

JavaScriptový kód MooTools

var DWRequest = new Class({
	Extends: Request,
	options: {
		onRequest: function() {
			show_ajax_message('request');
		},
		onSuccess: function() {
			show_ajax_message('success');
		},
		onFailure: function() {
			show_ajax_message('failure');
		},
		onCancel: function() {
			show_ajax_message('cancel');
		}
	}
});

//adds initial events
window.addEvent('domready',function() {

	//for every action class
	$$('.ajax').each(function(el) {

		//add an event..
		el.addEvent('click', function(e) {
			e = new Event(e).stop();

			//make ajax request
			var req = new DWRequest({
				url: el.get('href'),
				method: 'get',
				data: 'something'
			}).send();
		});
	});
});

//shows the block
function show_ajax_message(state)
{
	//set position
	$('message').setStyle('top',window.getScrollTop() + 10);

	//on request...
	if(state == 'request')
	{
		//show the box
		$('message').addClass('onrequest').setText('Performing Request...').setStyles({'background-color':'#fffea1','display':'block','opacity':'100'});
	}
	//on success
	else if(state == 'success')
	{
		//take care of box
		$('message').set('text','Request Complete!');

		//do effect
		var myMorph = new Fx.Morph('message',{'duration':1000});
		myMorph.start({'opacity': 0,'background-color': '#90ee90'});
	}
	else if(state == 'failure')
	{
		//take care of box
		$('message').set('text','Request Failed!');

		//do effect
		var myMorph = new Fx.Morph('message',{'duration':1000});
		myMorph.start({'opacity': 0,'background-color': '#ff0000'});
	}
	else if(state == 'cancel')
	{
		//take care of box
		$('message').set('text','Request Cancelled!');

		//do effect
		var myMorph = new Fx.Morph('message',{'duration':1000});
		myMorph.start({'opacity': 0,'background-color': '#fffea1'});
	}
}

Vysvětlení

  1. Jakmile je DOM připraven, vyslechne se jakýkoli odkaz s třídou ajax – po kliknutí se vytvoří instance třídy DWRequest.
  2. Rozšířil jsem třídu MooTools Request přidáním výchozích akcí pro události onRequest, onFailure, onCancel a onComplete. (Volá funkci show_ajax_message().)
  3. Funkce zobrazuje a upravuje zprávu DIV podle potřeby:změny barev, změny zpráv a umístění.
Zobrazit ukázku

Máte nějaké návrhy pro mou třídu? Prosím sdílejte!