O Ajax tornou-se uma grande parte da web moderna e isso, no futuro previsível, não vai mudar. MooTools faz com que trabalhar com Ajax seja tão simples que até um novato em programação pode ter páginas dinâmicas a funcionar num ápice.

1º Passo: O XHTML

<p>
	<a href="/exemplo_basico.php" id="alerta-ajax">Clica Aqui</a> para receber uma mensagem especial dum script PHP através do alert do JavaScript.
</p>
<p>
	<a href="/exemplo_basico.php" id="-subsitui-ajax">Clica Aqui</a> para preencher o elemento abaixo com a mensagem especial.
</p>
<div id="mensagem-especial">
	A Mensagem especial vai aparecer aqui.
</div>

Aqui, definimos dois links e uma caixa de mensagem. Ambos os links vão accionar chamadas Ajax, mas há uma diferença na forma como o resultado é manipulado. O primeiro irá conter a resposta e mostra o output da resposta numa caixa de alerta do javascript. O segundo link faz uma chamada Ajax, mas retorna o resultado na caixa de mensagem.

2º Passo: O PHP

echo 'Olá Mundo!';

Há muito pouco PHP envolvido. Neste caso, não existe “programação” real – apenas um simples echo.

3º Passo: O MooTools

window.addEvent('domready', function() {
	$('alerta-ajax').addEvent('click', function(evento) {
		//Prevenir que a página mude
		evento.stop();
		//Faz a chamada Ajax
		var pedido = new Request({
			method: 'get',
			url: $('alerta-ajax').get('href'),
			data: { 'do' : '1' },
			onRequest: function() { alert('Pedido efectuado, por favor aguarde...'); },
			onComplete: function(resposta) { alert('Resposta: ' + resposta); }
		}).send();
	});

	/* Substituir Ajax no elemento de texto */
	$('substitui-ajax').addEvent('click', function(evento) {
		//Prevenir que a página mude
		evento.stop();
		//Faz a chamada ajax, substitui o texto
		var pedido = new Request.HTML({
			method: 'get',
			url: $('substitui-ajax').get('href'),
			data: { 'do' : '1' },
			onRequest: function() { alert('Pedido efectuado, por favor aguarde...'); },
			update: $('mensagem-especial'),
			onComplete: function(resposta) { alert('Pedido completado com sucesso.'); $('mensagem-especial').setStyle('background','##FF8C00');
			}
		}).send();
	});
});

Para criar um pedido Ajax, é necessário criar uma instância da classe Request. Temos que fornecer o nosso pedido com o método (GET ou POST), a URL para ping, informações opcionais, e event handlers opcionais para o onRequest e onComplete.

No primeiro bloco, aceitamos a resposta no onComplete e lançamos o alerta. O segundo bloco usa a classe Request.HTML em vez da classe Request. A classe Request.HTML deve-se usar quando pretendemos substituir um elemento especificado innerHTML com a resposta do pedido Ajax.

(Nenhum voto por enquanto)

 Loading ...