ajax-logo

Ajax e Prototype: appunti sparsi

L’ oggetto Ajax di è una interfaccia di astrazione della richiesta xmlHttpRequest: basta usare la sua sintassi per non dover curarci del lavoro sporco (compatibilità cross-browser ecc…).

Una richiesta Ajax con Prototype è del tipo:

new Ajax.Request('/someURL', {opzioni})

in cui opzioni può contenere diversi parametri.
Ulteriori informazioni: Ajax.Request reference, Ajax options

Uno è il metodo della richiesta: GET o POST; altri sono le funzioni di callback; altri ancora sono i parametri passati con la richiesta (sia con POST che con GET).

Esempio:

new Ajax.Request('/someURL',
                  method: 'GET',
                  onSuccess: nomefunzione(xhr),
                  onFailure: nomefunzione(xhr));

Altri callback sono : unUnitialized, onLoading, onLoaded, onInteractive (deprecati tutti e 4 perchè non supportati da tutti i browser), onComplete, onException, onXXX dove XXX è il codice di risposta HTTP (i.e. 200 o 404);

I parametri passati con la richiesta si specificano in 2 modi (sia con GET che con POST):

parameters: {nome1: 'valore1', nome2: valore2, ....}

oppure

parameters: nome1='valore1'&nome2=valore2&..... ;

Ricordare: non usare GET per chiamate che alterano i dati; POST non viene messo in cache dai browser.

Serializzazione: PROTOTYPE fornisce un metodo per serializzare i dati passati da un form.
Ad esempio:

parameters: $('id_form').serialize(true);

Risponditori globali: PROTOTYPE consente di impostare dei callback globali, che rispondono sempre per gli eventi a cui sono collegati.

Ajax.Responders.register( {
        onCreate: function(...),
        onComplete: function(...)});

in cui si può notare un nuovo evento: onCreate

HTML con Ajax: PROTOTYPE fornisce un metodo per riempire un container con l’ HTML fornito da Ajax.
La sua sintassi è come quella di Request, ma al primo posto c’è un nuovo parametro: l’ id del container; indicando con un hash l’ id di due container si può modificare il container a seconda di successo o di errore:

new Ajax.Updater(
        {success: 'id_div_OK', failure: 'id_div_ERR'},
        '/someURL',
        options......);

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...