Costruiamo le basi
Come evidenziato già più volte la base del trattamento di questi dati è sempre un unico oggetto (o funzione in dipendenza del browser utilizzato): XMLHttpRequest.
Per cui tutte avranno un sistema di inizializzazione dell’oggetto XMLHttpRequest che potrebbe essere un qualcosa del genere:
function crea_XMLHttpRequest(){
var obj = null;
if(typeof(XMLHttpRequest) === "function" ||
typeof(XMLHttpRequest) === "object"){
obj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
obj = createFromActiveX();
}
return obj;
}
Noterete subito (ma già è stato spiegato nel precedente articolo di Matteo Tinazzi: La tecnologia AJAX) che i browser di casa Microsoft trattano l’oggetto XMLHttpRequest come un oggetto ActiveX.
Il motivo per cui ho creato una funzione unica per i Browser della Microsoft, è perché in base alla versione del browser è presente un ActiveX differente. Navigando in rete ho trovato sul sito della WROX una funzione fantastica che mi consente di creare l’oggetto XMLHttpRequest in modo chiaro e semplice. Io la ho modificata un tantino così da adeguarsi meglio alle nostre esigenze:
function createFromActiveX() {
var aVersions = [ "MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp","Microsoft.XMLHttp"
];
for (var i = 0; i < aVersions.length; i++) {
try {
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
} catch (oError) {
//Do nothing
}
}
return null;
}
Almeno da ora avremo una certezza: se la chiamata alla funzione xhr() restituisce un oggetto nullo significa che l’oggetto XMLHttpRequest non è supportato dal browser che l’utente sta utilizzando quindi è necessario provvedere a gestire l’informazione secondo la classica metodologia di aggiornamento dell’intero contenuto della pagina.
Un approccio comune
Per poter rispondere in modo soddisfacente a qualsiasi approccio faremo un lavoro del genere: per tutti definiremo un metodo comune di richiesta e di ottenimento della risposta (il core dell’applicazione) e successivamente andremo a progettare per ciascun elemento l’involucro che tratta il contesto specifico:
function SendRequest(metodo, url, parametri, funzione_ritorno){
var xhr = crea_XMLHttpRequest();
if (xhr == null) return false;
xml.onreadystatechange = function{
if(xml.readyState==4 && xml.status=="200"){
var output_buffer = xml.responseText;
output_buffer = escape(output_buffer);
funzione_ritorno = funzione_ritorno.replace(
'%%BUFFER%%', '"' + output_buffer + '"');
eval(funzione_ritorno);
}
}
if(metodo=="POST"){
xml.open("POST", url, true);
xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xml.send(args);
} else {
if(parametri!='') url += '?' + parametri;
xml.open("GET", url, true);
}
ajax.setRequestHeader("connection","close");
xml.send(null);
return true;
}
Cerchiamo di capire questa funzione: Il metodo richiede 4 parametri.
- METODO prevede l’inserimento di GET o POST qualsiasi valore differente da POST verrà interpretato come GET
- URL è la url che deve essere richiamata dalla quale si dovrà ottenere poi una successiva risposta.
- PARAMETRI sarebbe la query string da passare alla pagina specificata in URL. Sia in POST che in GET la quety string dovrà essere passata nella notazione chiave1=valore1&chiave2=valore2&……
- FUNZIONE_RITORNO è la funzione che dovrà processare la richiesta che avrà avuto successo.
Nei prossimi paragrafi vederemo esempi di chiamata a tale funzione.
Una cosa importante che voglio far notare è il valore di ritorno dalla funzione: true o false.
Grazie al tale valore, quindi, possiamo progettare anche la degradabilità dello script: se non si riesce ad eseguire la richiesta perché il browser non supporta XMLHttpRequest, abbiamo la possibilità di comportarci in un determinato modo.
Un esempio potrebbe essere la chiamata sull’onclick di un link onclick = “return !SendRequest(… … )”. Cioè annulla il click sul link (non andare da nessuna parte) se la richiesta XMLHttpRequest è andata a buon fine.