JavaScript  »  Guide  »  Guida MooTools 

Le richieste asincrone rappresentano il "cuore" delle applicazioni Web 2.0. A questo proposito MooTools ci fornisce una gerarchia di classi e funzionalità per creare le nostre richieste asincrone al server e personalizzarle in ogni loro aspetto tramite i costruttori Request, Request.HTML e Request.JSON.

In questa lezione vedremo come contattare il server per gestire responsi di codice HTML utilizzando la classe Request.HTML. Essa estende la superclasse Request, che fornisce metodi ed opzioni molto utili, tra cui troviamo:

• gli eventi onRequest, onSuccess, onCancel, onFailure e onException;
• i metodi setHeader e getHeader per lavorare con le intestazioni di richiesta/risposta;
• le opzioni url, method, data, async, encoding, autoCancel, header, isSuccess per personalizzare l'andamento e le tipologie della nostra richiesta;
• il metodo send per l'inoltro della richiesta ed il metodo cancel per l'annullamento.

Cosi come la rispettiva superclasse, Request.HTML accetta come unico parametro un oggetto rappresentante le opzioni della richiesta.

Richieste get e richieste post

Come sappiamo, esitono diverse modalità per contattare il server. Le più importanti ed utilizzate sono le richieste HTTP get e post. La superclasse Request fornisce appunto i metodi get e post (shortcuts del metodo send), usati per interrogare il server con la metodologia desiderata. Essi accettano argomenti dinamici che possono essere rappresentati dall'url in formato stringa da contattare, dalla querystring oppure da un oggetto formato dalle accoppiate "key/value" che costituiscono la nostra serie di parametri. Vediamo degli esempi di richieste in modalità get e post:

	// creiamo l'istanza della nostra richiesta
	var req = new Request.HTML();
	
	// contattiamo la pagina 'server.php' con una richiesta 'get'
	req.get('server.php');
	
	// creiamo una nuova istanza e contattiamo il server in modalità 'get' passando una querystring
	// l'url contattato assumerà la seguente forma: 'another_server.php?name=Jack&city=NewYork'
	var req2 = new Request.HTML({url: 'another_server.php'}).get({'name': 'Jack', 'city': 'NewYork'});
	
	// creiamo una nuova richiesta in modalità 'post' utilizzando la stessa istanza
	req2.post('name=Jack&city=NewYork');
	

Un'altra interessante possibilità è quella di passare come argomento un riferimento ad un elemento di tipo 'form'. MooTools elaborerà internamente la querystring interrogando tutti i suoi elementi figli:

	// passiamo il riferimento al form 'the-form-id' e creiamo una richiesta 'post'
	var req3 = new Request.HTML({url:'server_3.php'}).post($('the-form-id'));
	

In questa efficace modalità non dovremo creare la nostra querystring in modo manuale.

Esempio di richiesta complessa

Ora che abbiamo imparato come contattare il server tramite la classe Request.HTML, vediamo un esempio più complesso, dove vengono impostati gli eventi ed ulteriori parametri per gestire al meglio la nostra richiesta:

	var text = $('text');
	var req = new Request.HTML({
		url: 'server.php',		// l'url da contattare
		update: text,			// l'elemento che verrà aggiornato al completamento della richiesta
		evalScripts: false,		// gli script contenuti nel responso non verranno azionati
		onRequest: function() {
			text.set('html', 'Request is running...');
		},
		onComplete: function(tree, elements, html, js) {
			text.set('html', html);
		},
		onFailure: function() {
			text.set('html', 'The Request has failed...');
		}
	});
	
	// azioniamo la richiesta passando qualche parametro
	req.post({'name': 'Jack', 'city': 'NewYork'});
	

Qui è possibile visualizzare questo esempio pratico ed azionare la richiesta cliccando sul pulsante 'Start request'.

Element.load

Come di consueto, anche per la classe Request.HTML abbiamo a disposizone un'estensione dell'Hash Element.Properties che permette di utilizzare un metodo shortcut della classe Element: load. Esso aziona la richiesta ed imposta l'elemento sulla quale viene applicato come il 'contenitore' per i risultati. Accetta come unico argomento l'url da contattare:

	// settiamo le opzioni dell'istanza di Request.HTML
	$('req').set('load', {method: 'post'});
	
	// azioniamo la richiesta
	$('req').load('server4.php');
	

Altri articoli

Altre guide

Altre newsletter