Guida a XMLHttpRequest

Cos'è XMLHttpRequest?

XMLHttpRequest è un oggetto introdotto da Microsoft come activeX, poi implementata dagli sviluppatori della Mozilla Foundation come oggetto nativo in Mozilla 1.0.

Questo oggetto consente di trasformare una pagina web, solitamente resa interattiva da form o da collegamenti, ad effettuare richieste o passaggi di dati al server, senza dover cambiare pagina. L'esempio più popolare (nonché quello che mi ha fatto conoscere l'oggetto in questione), è Google Suggest.

Come funziona?

Tralasciamo la storia per vedere nel pratico come funziona, analizzando l'esempio pubblicato nell'area test.

L'esempio in questione è composto da 5 files. Uno generale contenente la pagina da visualizzare, il file javascript che gestisce l'XMLHttpRequest e altri 3 file per la gestione delle azioni; ovvero l'inserimento, la cancellazione e la visualizzazione dei record. Ma vediamolo nel dettaglio.

La pagina principale

Tralascio le intestazioni della pagina HTML, che do per scontate. Ovviamente procediamo a richiamare il file javascript che gestisce l'XMLHttpRequest
Anche qui non c'è niente di strano, lo richiamiamo come un qualsiasi file javascript esterno:

<script type="text/javascript" src="js/xml.js"></script>

All'interno del "body" abbiamo inserito un div vuoto, che sarà il contenitore dei risultati, popolato dinamicamente tramite javascript:

<div id="elenco"></div>

Passiamo ad analizzare il form.
Qui l'unica particolarità sta nel campo "action", nel quale non è impostata una pagina web, ma un richiamo ad una funzione javascript:

<form id="form" name="form" method="post" action="javascript:liveReqDoReq();">

Lo stesso richiamo è stato impostato sul link "salva" inserito al posto del bottone di "submit".
Come hai potuto vedere, fin qui non c'è nulla di complicato.

Il file JavaScript

Passiamo ora ad analizzare il file che gestisce l'XMLHttpRequest.

Per prima cosa occorre dichiarare alcune variabili che ci torneranno utili in seguito, nel nostro esempio abbiamo "resultElencoId" che è l'id di riferimento del div che conterrà i risultati; "processURI_view" che non è nient'altro che il nome del file php che effettua la richiesta dell'elenco dei dati; "isIE" dichiarata come variabile booleana e che vedremo tra poco.

var resultElencoId = 'elenco';
var processURI_view = 'pesca.php';
var isIE = false;

Se l'oggetto è nativo (quindi non è Internet Explorer), creiamo un nuovo oggetto chiamato "liveElencoObj".

// se !IE inizializiamo il servizio
if (window.XMLHttpRequest) {
   liveElencoObj = new XMLHttpRequest();
}

Creiamo una funzione che lanci una seconda funzione al caricamento dello script.
Tramite la funzione appena creata, richiamiamo "liveReqInit".

function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
      window.onload = func;
   } else {
      window.onload = function() {
         oldonload();
         func();
      }
   }
}
addLoadEvent(liveReqInit);

E qui entriamo nel vivo dello script. Questa funzione controlla se il browser utilizzato è Internet Explorer e se la condizione è vera, imposta la relativa variabile. Dopodichè viene richiamata la funzione "liveElenco" che ora andiamo ad analizzare.

function liveReqInit() {
   if ((navigator.userAgent.indexOf("Safari") <= 0) || (navigator.product != "Gecko")) {
      isIE = true;
   }

   // carichiamo l'elenco
   liveElenco();
}

Vediamo ora la funzione "liveElenco": questa funzione è quella che richiama il nostro file php che si occupa della selezione dei dati.
Per prima cosa controlliamo se liveElencoObj esiste e se lo stato dell'oggetto è minore di 4 (Gli stati sono: 0 = non inizializzato, 1 = caricamento in corso, 2 = caricato , 3 = interattivo, 4 = completato). Se la condizione è vera, annuliamo le richieste attive.

function liveElenco() {
   if (liveElencoObj && liveElencoObj.readyState < 4) {
      liveElencoObj.abort();
   }

In Internet Explorer l'oggetto XMLHttpRequest è un controllo activeX, quindi se questa funzionalità esiste, creiamo un nuovo oggetto. Ora che sicuramente abbiamo un oggetto XMLHttpRequest valido, andiamo a gestire gli eventi.

if (window.ActiveXObject) {
      liveElencoObj = new ActiveXObject("Microsoft.XMLHTTP");
   }

"onreadystatechange" è il richiamo alla funzione di gestione del risultato, in questo caso il risultato viene gestito tramite la funzione "liveElencoChange".

liveElencoObj.onreadystatechange = liveElencoChange;

"open()" invece è la chiamata al file remoto ed accetta i seguenti parametri: open("method", "URL"[, modalitaAsincrona[, "username"[, "password"]]])

liveElencoObj.open("GET", processURI_view);

"send()" invece è il vero e proprio invio della richiesta ed accetta come parametro una stringa contente della variabili (Di solito il paramentro è impostato per le richieste in post, mentre in get viene passato il valore "null").

liveElencoObj.send(null);
}

Passiamo ora ad analizzare la funzione che gestisce il risultato.

function liveElencoChange() {
   if (liveElencoObj.readyState == 4) {
      document.getElementById(resultElencoId).innerHTML = liveElencoObj.responseText;
   }
}

Se lo stato dell'operazione è uguale a 4 (copletato) allora andiamo a sostituire il risultato "responseText" al contenuto del nostro div vuoto.

La pagina PHP

La pagina PHP, che può essere ovviamente realizzata in qualsiasi altro linguaggio, non fa altro che eseguire una query e restituisce il risultato sottoforma di testo.

Particolarità

Una cosa abbastanza fastidiosa quando si è alle prime armi, è il trasferimento di dati via POST.
Per facilitarvi il compito, vi allego un piccolo esempio:

liveReq.onreadystatechange = liveReqProcessReqChange;
liveReq.open("POST", processURI, 0);
liveReqLast = "testo="+document.getElementById(searchFieldId).value;
liveReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
liveReq.send(liveReqLast);

Come potete vedere, la differenza sta in una riga aggiuntiva con l'impostazione dell'header e nella creazione di una variabile da passare come parametro nel metodo "send". Insomma, nulla di complicato, dopo che si ha capito come fare!