JavaScript  »  Articoli  »  MooTools 

La componente riguardante Ajax è, al pari di quella degli effetti, lo strumento più utilizzato e discusso di un framework Javascript.

Questo perché le richieste Ajax al server sono il "pane" del Web 2.0 ed è ormai raro vederne priva un'applicazione di nuova generazione. Per questo motivo, spesso gli sviluppatori tendono a realizzare un "framework nel framework" per quanto riguarda questo aspetto specifico.

Le classi che MooTools, nella versione 1.1, ci offre per lavorare con Ajax sono le seguenti:

• XHR: è un wrapper contenente tutte le proprietà, le opzioni e i metodi di base (è simile alla classe wrapper Fx vista nell'articolo MooTools: usare gli effetti Fx , anche se XHR può essere usato come oggetto autonomo per inviare richieste);
• Ajax: è la classe principale che estende le funzionalità di XHR e permette di creare richieste avanzate "per ogni esigenza asincrona", come indicato nella documentazione sul sito ufficiale.

Prima di iniziare con il tutorial tecnico, voglio elencare le caratteristiche e i vantaggi principali del framework Ajax offerto da MooTools:

• le classi XHR e Ajax, come ogni altro componente avanzato, sfruttano la sintassi del costruttore Class, quindi l'implementazione delle opzioni e dei relativi parametri è semplice e immediata;
• sono necessari solo i componenti delle sezioni Core, Class, Native (immancabili in ogni download) più il file Element.Form per il funzionamento di XHR e Ajax;
• è possibile racchiudere tutti gli input value di un form di qualsiasi dimensione e passarlo come corpo della richiesta semplicemente chiamando la funzione $ con l'id del form;
• è possible controllare ogni fase della richiesta, impostare le intestazioni desiderate e decidere se eseguire gli eventuali script restituiti dal server.

Detto questo, passiamo ora ad analizzare nel dettaglio tutte le opzioni che XHR e Ajax ci mettono a disposizione.

I costruttori XHR e Ajax

Il costruttore XHR accetta un solo parametro che rappesenta le opzioni della richiesta. Ecco la sintassi di base:

var myxhhr = new XHR(options);

Queste opzioni sono importantissime e verranno ereditate dalla superclasse Ajax. Vediamole:

• method: è il metodo con cui inviamo la richiesta: 'post' (default) o 'get';
• async: se true la richiesta sarà asincrona (default true);
• encoding: il tipo di codifica, di default 'utf-8';
• autoCancel: se impostata a true interrompe una richiesta già partita se ne viene effettuata un'altra (default false);
• headers: un oggetto che rappresenta le intestazioni di richiesta da inviare al server (nel caso di una richiesta post lo script invia automaticamante l'intestazione Content-Type impostata a 'application/x-www-form-urlencoded');
• onRequest: funzione da eseguire quando parte la richiesta (di default è una funzione vuota, Class.Empty) ;
• onSuccess: funzione da eseguire quando la richiesta viene completata (default Class.Empty);
• onStateChange: funzione azionata quando cambia lo stato della richiesta;
• onFailure: funzione da eseguire se la richiesta fallisce.

XHR mette inoltre a disposizione le seguenti due proprietà:

• running: è settato a true se la richiesta è in corso, altrimenti false;
• response: un oggetto accessibile nell'opzione onSuccess le cui proprietà text e xml rappresentano il contenuto della risposta del server.

Prima abbiamo affermato che XHR può essere utilizzato come oggetto autonomo, per questo definisce i seguenti metodi:

• setHeader (name, value): imposta l'intestazione 'name' al valore 'value', senza sovrascrivere quelle impostate nelle opzioni;
• send (url, data): esegue la richiesta vera e propria inviando i dati 'data' all'indirizzo 'url';
• cancel: interrompe la richiesta.

Un esempio di semplice richiesta con la classe XHR è il seguente:

// invia una richiesta a mypage.php con una querystring
	var myReq = new XHR({method:'get', autoCancel:false}).send('mypage.php', 'name=Andy color=blue')
	

Altri articoli

Altre guide

Altre newsletter