Guida Ajax: Gestire richieste asincrone

Ajax (Asynchronous JavaScript and XML) è uno degli strumenti più interessanti nel web 2.0. Ma di cosa si tratta e a cosa serve? Per capirlo rinfreschiamoci la memoria sul concetto di HTTP.

Hypertext Transfer Protocol è il protocollo di trasferimento principale del Worl Wide Web. Ad esempio quando immettiamo un indirizzo nel browser per visualizzare una pagina, tale richiesta viene inviata al server tramite HTTP. I due interlocutori messi in comunicazione da HTTP sono il client (browser) e il server.

Questa comunicazione avviene in maniera visibile all’utente, con la pagina che rimane vuota fino a quando gli elementi non vengono caricati. Tutto questo accade ogni volta che inviamo un modulo, navighiamo tra una pagina e l’altra, durante ogni operazione compiuta con il browser.

Ajax permette di svolgere tutti questi processi in modalità silenziosa, un’esecuzione che si svolge silenziosamente in background. Usando Ajax sarà possibile cliccare su un collegamento o inviare un modulo senza caricare nuovamente la pagina. Ajax compierà l’operazione in maniera asincrona attraverso l’oggetto XMLHttpRequest (XHR), il suo componente principale. XHR è un set di API che può essere utilizzato da diversi linguaggi di programmazione come VBScript, JScript e JavaScript per trasferire XML, JSON o altra tipologia di dati al server attraverso HTTP.

XHR viene supportato da tutti i browser recenti e da un’ampia gamma di piattaforme, come Windows, Linux e Mac. Tuttavia si riscontra che per poter funzionare correttamente in alcuni browser è necessario modificare le impostazioni di sicurezza.

Non è possibile utilizzare XHR finché non viene creata un’istanza di questo oggetto, ossia una chiamata ad un metodo noto come costruttore dell’oggetto, una pratica di routine in JavaScript, tuttavia nel caso specifico è necessaria una leggera modifica a questa procedura, per meglio soddisfare le caratteristiche dei vari browser.

Microsoft ha introdotto per prima XMLHTTPRequest, precisamente in Internet Explorer 5, denominandolo come oggetto Active X. Si tratta di una tecnica propria di IE, che consente l’inserimento di oggetti attivi nelle pagine web. Per creare l’oggetto XMLHTTPRequest, Internet Explorer adopera il suo analizzatore XML incorporato, MSXML.

La maggior parte degli altri sviluppatori ha seguito l’esempio, sviluppando un oggetto equivalente, ma implementato come oggetto nativo del browser. Quindi, non conoscendo la natura del browser che andrà a utilizzare l’applicazione Ajax, è necessario creare uno script che generi in maniera valida l’istanza dell’oggetto XMLHTTPRequest, indipendentemente dal browser utilizzato. Vi propongo due soluzioni, la prima basata sulla Object detection, la seconda consiste in uno script che prova uno dopo l’altro i vari metodi di creazione di un’istanza dell’oggetto, finché l’operazione non andrà a buon fine.

Metodo 1

function getXMLHTTPRequest() {
 var request = false;
 if (window.XMLHttpRequest) {
  request = new XMLHttpRequest();
 } else {
  if (window.ActiveXObject) {
   try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (err1) {
    try {
     request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err2) {
     alert("Sei antico Aggiorna il tuo browser");
     return false;
    }
   }
  }
 }
 return request;
}

Metodo 2

function getXMLHTTPRequest() {
 var request = false;
 try {
  request = new XMLHttpRequest();
 } catch (e) {
  try {
   request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e) {
    alert("Sei antico");
    return false;
   }
  }
 }
 return request;
}

Inviare la richiesta

Ora che abbiamo visto come creare un’istanza per l’oggetto XMLHTTPRequest. analizziamo le sue proprietà utili per generare e inviare una richiesta al server.

Diamo un’occhiata ai metodi e alle proprietà di cui l’oggetto XHR dispone. La tabella riassuntiva di seguito fornisce un elenco di tali caratteristiche.

Proprietà Descrizione
readyState Intero che mostra lo stato della richiesta:
0 = non inizialittata
1 = in caricamento
2 = caricata
3 = interattiva
4 = completata
onreadystatechange Stabilisce quale gestore di eventi verrà chiamato quando la proprietà readyState cambia valore
responseText I dati restituiti dal server sotto forma di stinga di testo
responseXML I dati restituiri dal server espressi come oggetto document
status Codice di stato HTTP restituito dal server
statusText Reason phrase HTTP restituita dal server
abort() Arresta la richiesta
geatAllResponseHeaders() Restituisce tutti gli headers come stringa
getResponseHeader(n) Restituisce il valore dell’header n come stringa
open(‘metodo’, ‘url’, ‘true o false’) Specifica il metodo HTTP (GET o POST), l’url di destinazione e se la richiesta deve essere gestita in modo asincrono. Omettendo l’ultimo parametro l’opzione è settata come true di default
send(content) Invia la richiesta
setRequestsHeader(‘etichetta’, ‘valore’) Imposta una coppia etichetta/valore e la assegna all’header da inviare con la richiesta

Il metodo open()

Il metodo open() prepara l’oggetto XHR in modo che possa comunicare con il server. Questo metodo ha bisogno almeno di due argomenti obbligatori:

  • Metodo di richiesta HTTP che si intende utilizzare, GET o POST
  • URL di destinazione della richiesta. Se si utilizza un metodo GET, l’url deve essere codificato nel metodo appropriato con il giusto parametro e il relativo valore

Facoltativo è il terzo parametro, una variabile booleana per dichiarare se la richiesta deve avvenire in maniera asincrona. Se il parametro viene omesso, si suppone che l’argomento sia impostato sul valore predefinito true, e le richieste verranno gestite in modo asincrono.

request.open("GET", "url.php?mode=n");

Il metodo send()

Dopo aver preparato l’oggetto XHR con il metodo open() sarà possibile inviare la richiesta attraverso il metodo send(). La funzione send() accetta un solo argomento, ossia il contenuto della richiesta.

Se la richiesta inviata è di tipo GET, le informazioni necessarie del contenuto verranno codificate nell’url di destinazione, quindi sarà sufficiente chiamare il metodo send() sfruttando l’argomento null :

request.send(null);

Se si è utilizzata una richiesta di tipo POST, il contenuto andrà codificato attraverso la proprietà setRequestsHeader(‘n1’, ‘n2’) come nell’esempio successivo :

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send('name1='+value1+'&name2;='+value2);

Inviamo la richiesta

Adesso siamo pronti per inviare la richiesta al server, abbiamo creato l’istanza dell’oggetto XMLHTTPRequest e appreso la tecnica base per comunicare con il server.

Il listato successivo rappresenta il codice per mettere in pratica quanto esposto fino ad ora:

function callAjax()
{
 request = getXMLHTTPRequest();
 request.open('POST', 'index.php');
 request.onreadystatechange = rispostaAjax;
 request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 request.send('name='+document.mail.name.value+'&adress;='+document.mail.adress.value);
}

Alla riga 5 notiamo la proprietà onreadystatechange alla quale abbiamo associato il metodo rispostaAjax. In questo modo abbiamo preparato l’evento da eseguire quando il server fornirà la risposta.

Gestire la risposta del server

Nella sezione precedente abbiamo visto come inviare una richiesta asincrona al server, ora impareremo come gestire i dati restituiti e mostrarli nel documento.

Nell’esempio proposto utilizzeremo la funzione responseText dell’oggetto XHR, che restituisce una stringa di testo. Situazione abbastanza limitativa rispetto a responseXML che restituisce un documento XML sul quale è possibile agire in maniera totale attraverso le funzioni relative al DOM

Ma andiamo per gradi, scriviamo la funzione rispostaAjax() per visualizzare i dati restituiti dal server. La funzione sarà richiamata quattro volte, per ogni cambio di stato dell’oggetto XHR, ma come abbiamo visto nella tabella, per poter gestire con successo la risposta del server, il valore di readyState deve essere 4.

Iniziamo a strutturare il metodo di risposta, cominciando appunto dalla gestione del valore di readyState

function rispostaAjax()
{
 if(request.readyState == 4)
 {
  //recuperiamo la risposta
  //facciamo qualcosa con la risposta
 }
}

Fin qui non credo ci siano problemi a comprendere il meccanismo. Andiamo avanti e creiamo un nuovo documento Html molto semplice con la seguente struttura:

<!DOCTYPE html>
<html>
<head>
  <title>chiamata ajax</title>
  <script type="text/javascript" src="ajax.js"></script>
  <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
<body onload="callAjax()">
  <div id="mostra_risposta"></div>
  </body>
  </html>

Nel documento abbiamo incluso il file ajax.js che conterrà lo script per inviare e gestire la risposta del server

Abbiamo associato al tag body il gestore di eventi onload che richiama la funzione callAjax, di modo che al caricamento della pagina sia inviata la richiesta al server. Infine abbiamo creato un div nel quale visualizzeremo la risposta del server.

Adesso andiamo a creare il documento PHP da interrogare, che abbiamo specificato nel parametro del metodo open:

request.open('GET', 'index.php');

Strutturate il file index.php come meglio credete, si tratta solo di un esempio, una semplice dichiarazione di output sarà sufficiente:

echo "ciao, sono la risposta del server";

Bene, adesso abbiamo strutturato i due file che vanno messi in comunicazione dall’oggetto XHR, adesso torniamo nel vivo del tutorial. Come dobbiamo istruire lo script una volta che la richiesta è stata completata ?
Semplice, useremo la proprietà JavaScript innerHTML per inserire la stringa di testo restituita dal server all’interno del div che abbiamo creato nel nostro documento html:

document.getElementById("mostra_risposta").innerHTML = request.responseText;

Al fine di evitare messaggi di errore sgradevoli, anche in questo caso useremo le dichiarazioni try e catch. Così facendo la funzione rispostaAjax() si presenterà in questo modo :

function rispostaAjax() {
 myDiv = document.getElementById("mostra_risposta");
 if (request.readyState == 4) {
  try {
   response = request.responseText;
   myDiv.innerHTML = response;
  } catch (e) {
   alert("Qualcosa è andato storto");
  }
 }
}

Finito, abbiamo imparato come inviare e gestire una richiesta asincrona al server. Ma tutto questo è abbastanza inutile, visto che possiamo contare su jQuery e sul suo modulo Ajax. Nella pagina successiva vedremo come utilizzarlo e ci renderemo conto di quanto sia tutto più facile.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *