Ajax

Per rendere l'idea di cosa è Ajax, facciamo un esempio pratico. Navigando in un Sito web, vogliamo visualizzare la pagina "contatti", quindi clicckiamo sul link "contatti". A questo punto il browser invierà la richiesta della pagina "contatti" al sever che, ricevuta la richiesta, la elabora e spedisce la pagina al client il quale, ricevuta la nuova pagina, ricarica tutto il contenuto della pagina a video e mostra la pagina "contatti". Ma riflettendo, noi abbiamo richiesto la pagina contatti, ma quando riceviamo la risposta dal server, ci viene spedita la pagina nel suo insieme: menù di navigazione, immagini, codici javascript per gestirle e poi... anche la parte che riguarda i contatti. Non sarebbe molto più rapido lasciare così come sono il menù (che è sempre quello), le immagini (che sono sempre quelle), ecc. e caricare solo la parte della pagina che si riferisce ai contatti? Decisamente si, sarebbe molto più veloce!
Bene, Ajax serve esattamente a questo! Tramite Ajax noi siamo in grado di richiedere al server solo un pezzo della pagina e, una volta giunta la risposta dal server, ricaricare nel client solo la parte della pagina richiesta. Nel nostro caso, quindi, ricaricheremo solo il riquadro "contatti". Questo velocizza di moltissimo la navigazione.

Ajax non è un linguaggio di programmazione!
AJAX è l'acronimo di Asynchronous JavaScript And XML, ovvero "asincronia tra Javascript ed XML". In realtà come già detto, non si tratta di un nuovo linguaggio ma la capacità di Javascript nell'aggiornare parte di una pagina HTML senza che questa venga caricata nuovamente, attraverso una richieste tramite il "protocollo HTTP". Per effettuare una richiesta HTTP al server utilizzando JavaScript, si utilizza un'istanza di una classe che fornisce detta funzionalità. Tale classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava XMLHTTP. Successivamente Mozilla, Safari e altri browser hanno implementato la classe XMLHttpRequest, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft.
La richiesta può essere inviata sotto forma di variabili di tipo GET o di tipo POST come per l'invio dei Form. La richiesta è asincrona, il che significa che non bisogna necessariamente attendere che sia stata ultimata per effettuare altre operazioni. AJAX non lavora sulle pagine, ma sui dati. Il server restituisce i dati processati, e solo la parte relativa a questi dati sarà cambiata (per fare questo usa Javascipt). Quindi non dovendo ogni volta inviare e ricevere intere pagine dal server, le applicazioni che usano la tecnologia AJAX risultano molto veloci.

Ajax

Tipologie di interazioni AJAX

Semplici

modifica del valore dell’attributo innerHTML di un elemento della pagina

accesso ai contenuti di uno span, di un p, ecc…
possibile assegnare non solo testo semplice, ma altro HTML !

uso del DOM per aggiungere, popolare, o modificare elementi
getElementById() (non compatibile con le vecchie versioni di Explorer)
getElementsByTagName()

... un trucco per i diversi Browser (usare librerie di terze parti come jquery o funzioni ad hoc):

// from http://javascript.html.it/guide/leggi/95/guida-ajax/ 
function myGetElementById(idElemento) { 
 
   // elemento da restituire 
   var elemento;  

   // se esiste il metodo getElementById questo if sarà  
   // diverso da false, null o undefined  
   // e sarà quindi considerato valido, come un true 
   if ( document.getElementById )  
      elemento = document.getElementById(idElemento);  


   // altrimenti è necessario usare un vecchio sistema 
   else  
      elemento = document.all[idElemento];  


   // restituzione elemento 
   return elemento;  
}

Avanzate

invocazione di logica per l’elaborazione e la restituzione di contenuti server-side (necessaria programmazione lato server!)
metodi del DOM per la creazione avanzata di contenuti strutturati, innestati, dinamici
metodi del DOM per la creazione, gestione e manipolazione di dati XML
gestioni di intervalli di tempo multipli o incrociati attraverso l'uso dei metodi Javascript setIntervall() o setTimeout()

Invio delle Richieste

Ottenere l’oggetto XMLHttpRequest

Funzionalità da estrarre con funzioni ad hoc per ottenere cross-browser compatibility

Alcuni browser lo supportano come oggetto nativo (Firefox 1+, Opera 7+, Safari, Internet Explorer 7):
var xhr = new XMLHttpRequest();
Versioni precedenti di Internet Explorer lo supportano come oggetto ActiveX, solo dalla versione 4 e in modi differenti a seconda della versioni:
var xhr = new ActiveXObject(“Microsoft.XmlHttp”)
var xhr = new ActiveXObject(“MSXML4.XmlHttp”)
var xhr = new ActiveXObject(“MSXML3.XmlHttp”)
var xhr = new ActiveXObject(“MSXML2.XmlHttp”)
var xhr = new ActiveXObject(“MSXML.XmlHttp”)
Esistono poi browser che non lo supportano affatto: è buona norma controllare e prevedere comportamenti non AJAX in loro presenza!

...controllo del supporto !

  // ad esempio invocata in corrispondenza dell'evento onload
myAjaxApp = function() {
   var xhr = myGetXMLHttpRequest();
   if ( xhr ) { /* applicazione in versione AJAX */ }
   else { /* versione non AJAX o avviso all’utente */ }
}

// Controllo supporto Browser per richiamare l'oggetto XmlHttpRequest
function myGetXmlHttpRequest() {
   var xhr = false;
   var activeXoptions = new Array( "Microsoft.XmlHttp", 
                "MSXML4.XmlHttp","MSXML3.XmlHttp", "MSXML2.XmlHttp", "MSXML.XmlHttp" );
   // prima come oggetto nativo
   try { xhr = new XMLHttpRequest(); }
   catch (e) { }
   // poi come oggetto activeX dal più al meno recente
   if ( ! xhr ) {
      var created = false;
      for ( var i = 0 ; i < activeXoptions.length && !created ; i++ ) {
         try {
             xhr = new ActiveXObject( activeXoptions[i] );
             created = true;
         }
         catch (e) { }
     }
  }
  return xhr;
}

Lettura delle Risposte

Proprietà di XMLHttpRequest

Stato e risultati della richiesta vengono memorizzati dall’interprete Javascript all’interno dell’oggetto XmlHttpRequest durante la sua esecuzione.
Lista dei parametri comunemente supportati dai vari browser:

readyState

onreadystatechange

status

responseText

responseXML

Proprietà readyState

Variabile di tipo intero, con valori che vanno da 0 a 4.

0 : uninitialized - l'oggetto XMLHttpRequest esiste, ma non è stato richiamato alcun metodo per inizializzare una comunicazione.
1 : open - è stato precedentemente invocato il metodo open(), ma il metodo send() non ha ancora effettuato l'invio dati.
2 : sent - il metodo send() è stato eseguito ed ha effettuato la richiesta.
3 : receiving - i dati in risposta cominciano ad essere letti.
4 : loaded - l'operazione è stata completata.

Accessibile in sola lettura: rappresenta in ogni istante lo stato della richiesta

Attenzione:

nello stato 3 (che può essere assunto più volte…) si possono già leggere alcuni header restituiti dal server o parte della risposta
questo ordine non è sempre identico e non è sfruttabile allo stesso modo su tutti i browser
se la richiesta fallisce readyState potrebbe non assumere mai il valore 3
l'unico stato supportato da tutti i browser è il 4: a prescindere dalla riuscita dell'operazione, le operazioni sono terminate e lo stato non cambierà più.

Proprietà onreadystatechange

L'esecuzione del codice non si blocca sulla send() in attesa dei risultati.
Occorre registrare una funzione che sia richiamata dal sistema:

come? in maniera asincrona rispetto al resto del programma.
perché? al momento della disponibilità di risultati (anche parziali!).
quando? a sua volta segnalata dal cambio di stato della richiesta.

xhr.onreadystatechange = function() { /* callback */ }

Proprietà status

Valore intero corrispondente al codice HTTP dell’esito della richiesta.

200: caso di successo (l’unico in base al quale i dati ricevuti in risposta devono essere ritenuti corretti e significativi).
possibili altri valori (in particolare 403, 404, 500, …).

Una descrizione testuale del codice HTTP restituito dal server…

è contenuta nel parametro statusText (supportato in quasi tutti i browser tranne alcune versioni di Opera).

if ( xhr.status != 200 ) alert( xhr.statusText );

può essere ottenuta creando e utilizzando un apposito oggetto di mappe codici-descrizione.

if ( xhr.status != 200 ) alert( httpCodes[xhr.status] );

Proprietà responseText e responseXML

Contengono i dati restituiti dal server.

responseText: dato di tipo stringa, disponibile solo ad interazione ultimata (readystate == 4).

permette di ricevere qualsiasi informazione dal server.
la rappresentazione testuale del body della risposta gli viene comunque assegnata se la comunicazione termina con successo.

responseXML: lo stesso dato, convertito in documento XML (se possibile) ai fini della navigazione via Javascript.

potrebbe essere null qualora i dati restituiti non siano un documento XML ben formato (es: trasmissione di dati non XML, dati XML corrottisi durante la trasmissione, ecc).

Metodi getResponseHeader( ) e getAllResponseHeaders( )

Lettura degli header HTTP che descrivono la risposta del server..

utilizzabili solo nella funzione di callback
e comunque, anche al suo interno.

da non invocare immediatamente dopo l'invio dei dati in maniera asincrona (send, readystate == 2).
utilizzabili per leggere parte degli header fin dall’inizio della ricezione della risposta (readystate == 3)

utilità limitata (es: ottimizzazione, ecc..)

in grado di accedere con certezza all’elenco completo degli header solo a richiesta conclusa (readystate == 4).

La funzione di "callback" (1)

Legge lo stato di avanzamento della richiesta

readystate)

Verificare il successo o fallimento della richiesta

status)

Ha accesso agli header di risposta rilasciati dal server (parziali se readystate == 3), completi se readystate == 4))

getAllResponseHeaders())
getResponseHeader( header_name ))

Può leggere il contenuto della risposta (se e solo se readystate == 4)

responseText)
responseXML)

La funzione di "callback" (2)

Assegnata all'attributo onreadystatechange di XMLHttpRequest

var xhr = // .. etc etc

var textHolder = new Object();
textHolder.testo = “La risposta del server è: ”;

xhr.onreadystatechange = function() {
   if ( xhr.readyState == 4 && xhr.status == 200 ) {
      /* anche se la funzione è assegnata a una proprietà di xhr,
       * dal suo interno non è possibile riferirsi a xhr con this
       * perché la funzione sarà richiamata in modo asincrono dall’interprete */    
      // alert ( textHolder.testo + this.responseText );
      alert ( textHolder.testo + xhr.responseText );
  }
};

Richiamata AD OGNI VARIAZIONE del parametro readyState

su alcuni browser lo stato 3 può essere assunto più volte in caso di ricezione di una risposta molto lunga in successivi trunk.

Chiusura della funzione di "callback"

È costituita dalla funzione stessa e dall'insieme di tutte le variabili a cui essa può accedere (scope)

se definita in linea, può riferire le variabili dello scopo in cui si trova

var xhr = // .. etc etc
var textHolder = new Object();
...
xhr.onreadystatechange = function() {
     if ( xhr.readyState == 4 ) /* ...omissis */
       alert( textHolder.testo ); /* ...omissis */

se definita come funzione esterna può accettare parametri formali e riferirne i valori attuali al proprio interno mediante i loro nomi

function myPopup( oggettoAjax, contenitoreDiTesto ) {
   if ( oggettoAjax.readyState == 4 )/* ...omissis */
       alert( contenitoreDiTesto.testo ); /* ...omissis */
}
...
var xhr = // .. etc etc
var textHolder = new Object();
...

/* TUTTAVIA VA UTILIZZATA NECESSARIAMENTE COSI’ !!! */
xhr.onreadystatechange = function() { myPopup(xhr,textHolder); }

/* NON È INVECE POSSIBILE QUESTO TIPO DI ASSEGNAMENTO !!! */
xhr.onreadystatechange = myPopup(xhr,textHolder);

... esempi tratti da http://www-db.disi.unibo.it

Guida Ajax

La tecnologia del Web 2.0