Articoli / Javascript
Guida AJAX - le basi
Author: Tafaz
Visits: 3258
Date: 23.05.2006
Questa differenza è dovuta alle solite incompatibiltà tra browsers, ma fortunatamente, una volta istanziato, i metodi di questo oggetto sono uguali e sono sei:
abort() blocca la richiesta corrente.
getAllResponseHeaders() restituisce tutti gli header in formato stringa.
getResponseHeader("etichetta") restituisce un particolare header.
open("metodo","URL"[,"Flag Sincronia"[,"nome utente"[,"passwrod"]]]) assegna all'oggetto l'URL da aprire, il metodo di invio dei dati (GET o POST), il Flag di sincronia che poi andremo a spiegare, uno username ed una password.
Gli attributi racchiusi tra parentesi quadre sono opzionali. send("contenuto") invia la richiesta impostata con open e il parametro opzionale "contenuto" passerà i dati POST in formato stringa.
setRequestHeader("etichetta", "valore") imposta un header definito da "etichetta" ad un valore.
Oltre a questi metodi l'oggetto ha anche sei proprietà:
onreadystatechange è il gestore di eventi che viene richiamato ad ogni cambio di stato della chiamata http
readyState indica i 5 stati del caricamento e va da 0 (non inizializzato) a 4 (caricamento completato)
responseText questa proprietà, dopo il completo caricamento, contiene una versione testuale della risposta del server
responseXML un oggetto di tipo DOM XML contenente i dati ritornati dal server
status il codice numerico ritornato dal server (200 OK, 404 Non trovato, 403 Non autorizzato ecc)
statusText la descrizione testuale del codice numerico ritornato da status
Ora che abbiamo fatto una carrellata generale sull'argomento perchè non provarne subito il funzionamento? Innanzitutto inizializziamo subito l'oggetto in questione:
con il sistema di try e catch evitiamo di generare errori che bloccano lo script e creiamo l'istanza in base al tipo di oggetto supportato dal browser. Ora andiamo a scrivere una funzione che ci permetta di effettuare le chiamate ad un'altra pagina e che ci permetta di decidere se inviare i dati a queste usando il meodo $_GET o il metodo $_POST.
Se analizziamo questa funzione noteremo che il funzionamento non è poi così complicato, infatti alla prima riga andiamo a richiamare la funzione che fa l'inizializzazione e ne salviamo il valore ritornato nella variabile xml e alla riga successiva andiamo a verificare che l'inizializzazione sia andata a buon fine, e quindi che la variabile xml sia diversa da false.
Il passo successivo è quello di assegnare una funzione al gestore dell'evento di cambio stato, in modo che ad ogni cambiamento della proprietà readyState questa venga richiamata.
Il codice che ci permette di fare questo è xml.onreadystatechange = parseResponse; che assegna la funzione parseResponse.
Perchè abbiamo dovuto assegnare una funzione al gestore del cambio stato dell'oggetto? La risposta è semplice ma non ovvia e viene chiarita meglio nelle righe di codice succesive.
Sia per il metodo POST che per quello GET la prima operazione da eseguire è di impostare attraverso il metodo open i tre parametri principali per poter inviare una richiesta ad un'altra pagina e sono il metodo di invio dati (POST/GET), il nome del file della pagina da chiamare e il flag di sincronia.
Proprio quest'ultimo indica se il tipo di chiamata sarà sincrono (valore false) o asincrono (valore true), analizziamo le differenza tra i due tipi di chiamata.
La chiamata sincrona in poche parole "blocca" l'esecuzione dello script fino a che la pagina chiamata non è stata completamente caricata il che ci semplificherebbe la vita in quanto non sarebbè più necessario assegnare una funzione al gestore onreadystatechange in quanto dopo aver chiamato il metodo send subito dopo potremmo inserire il codice che interpreta la risposta, ma se la chiamata per qualche motivo tarda nel caricare i dati o ahimè si interrompe il collegamento al server ci ritorveremmo con il browser completamente bloccato, cosa che è meglio evitare.
La chiamata asincrona invece (ed è questa che andremo ad usare), invia la richiesta alla pagina e poi prosegue con il resto dello script senza più attendere nessuna risposta, infatti a gestire le risposte abbiamo delegato la funzione parseResponse.
Author: Tafaz
Visits: 3258
Date: 23.05.2006
Questa differenza è dovuta alle solite incompatibiltà tra browsers, ma fortunatamente, una volta istanziato, i metodi di questo oggetto sono uguali e sono sei:
abort() blocca la richiesta corrente.
getAllResponseHeaders() restituisce tutti gli header in formato stringa.
getResponseHeader("etichetta") restituisce un particolare header.
open("metodo","URL"[,"Flag Sincronia"[,"nome utente"[,"passwrod"]]]) assegna all'oggetto l'URL da aprire, il metodo di invio dei dati (GET o POST), il Flag di sincronia che poi andremo a spiegare, uno username ed una password.
Gli attributi racchiusi tra parentesi quadre sono opzionali. send("contenuto") invia la richiesta impostata con open e il parametro opzionale "contenuto" passerà i dati POST in formato stringa.
setRequestHeader("etichetta", "valore") imposta un header definito da "etichetta" ad un valore.
Oltre a questi metodi l'oggetto ha anche sei proprietà:
onreadystatechange è il gestore di eventi che viene richiamato ad ogni cambio di stato della chiamata http
readyState indica i 5 stati del caricamento e va da 0 (non inizializzato) a 4 (caricamento completato)
responseText questa proprietà, dopo il completo caricamento, contiene una versione testuale della risposta del server
responseXML un oggetto di tipo DOM XML contenente i dati ritornati dal server
status il codice numerico ritornato dal server (200 OK, 404 Non trovato, 403 Non autorizzato ecc)
statusText la descrizione testuale del codice numerico ritornato da status
Ora che abbiamo fatto una carrellata generale sull'argomento perchè non provarne subito il funzionamento? Innanzitutto inizializziamo subito l'oggetto in questione:
function initXml(){
try {
x = eval("new ActiveXObject('Microsoft.XMLHTTP');");
return x;
} catch(e){
try{
x = eval("new XMLHttpRequest();");
return x;
} catch(e){
alert("Questo browser non supporta AJAX");
x = false;
return x;
}
}
}
try {
x = eval("new ActiveXObject('Microsoft.XMLHTTP');");
return x;
} catch(e){
try{
x = eval("new XMLHttpRequest();");
return x;
} catch(e){
alert("Questo browser non supporta AJAX");
x = false;
return x;
}
}
}
con il sistema di try e catch evitiamo di generare errori che bloccano lo script e creiamo l'istanza in base al tipo di oggetto supportato dal browser. Ora andiamo a scrivere una funzione che ci permetta di effettuare le chiamate ad un'altra pagina e che ci permetta di decidere se inviare i dati a queste usando il meodo $_GET o il metodo $_POST.
function getResult(file,metodo){
xml = initXml();
if(xml!=false){
xml.onreadystatechange = parseResponse;
if(metodo=="p"){
args = file.split("?")[1];
file = file.split("?")[0];
xml.open("POST", file, true);
xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xml.send(args);
} else {
xml.open("GET", file, true);
xml.send(null);
}
}
}
xml = initXml();
if(xml!=false){
xml.onreadystatechange = parseResponse;
if(metodo=="p"){
args = file.split("?")[1];
file = file.split("?")[0];
xml.open("POST", file, true);
xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xml.send(args);
} else {
xml.open("GET", file, true);
xml.send(null);
}
}
}
Se analizziamo questa funzione noteremo che il funzionamento non è poi così complicato, infatti alla prima riga andiamo a richiamare la funzione che fa l'inizializzazione e ne salviamo il valore ritornato nella variabile xml e alla riga successiva andiamo a verificare che l'inizializzazione sia andata a buon fine, e quindi che la variabile xml sia diversa da false.
Il passo successivo è quello di assegnare una funzione al gestore dell'evento di cambio stato, in modo che ad ogni cambiamento della proprietà readyState questa venga richiamata.
Il codice che ci permette di fare questo è xml.onreadystatechange = parseResponse; che assegna la funzione parseResponse.
Perchè abbiamo dovuto assegnare una funzione al gestore del cambio stato dell'oggetto? La risposta è semplice ma non ovvia e viene chiarita meglio nelle righe di codice succesive.
Sia per il metodo POST che per quello GET la prima operazione da eseguire è di impostare attraverso il metodo open i tre parametri principali per poter inviare una richiesta ad un'altra pagina e sono il metodo di invio dati (POST/GET), il nome del file della pagina da chiamare e il flag di sincronia.
Proprio quest'ultimo indica se il tipo di chiamata sarà sincrono (valore false) o asincrono (valore true), analizziamo le differenza tra i due tipi di chiamata.
La chiamata sincrona in poche parole "blocca" l'esecuzione dello script fino a che la pagina chiamata non è stata completamente caricata il che ci semplificherebbe la vita in quanto non sarebbè più necessario assegnare una funzione al gestore onreadystatechange in quanto dopo aver chiamato il metodo send subito dopo potremmo inserire il codice che interpreta la risposta, ma se la chiamata per qualche motivo tarda nel caricare i dati o ahimè si interrompe il collegamento al server ci ritorveremmo con il browser completamente bloccato, cosa che è meglio evitare.
La chiamata asincrona invece (ed è questa che andremo ad usare), invia la richiesta alla pagina e poi prosegue con il resto dello script senza più attendere nessuna risposta, infatti a gestire le risposte abbiamo delegato la funzione parseResponse.
Se vuoi discutere con noi su questo articolo o comunque vuoi porci delle domande usa il nostro Forum
