Chi naviga molto su Internet si sarà sicuramente accorto che molti portali di informazione e ricerca di uso comune come Google, Yahoo hanno funzioni e comportamenti molto diversi da un qualsiasi altro sito web.

ajax.gifLe pagine dei siti web realizzati con Ajax presentano infatti una interattività ed una variazione locale dell’aspetto, che i siti web, se non richiesta, non hanno, se non con l’utilizzo di elementi Flash o Java. La posta di Google GMAIL è stato una delle primissime applicazioni web ad utilizzare pesantemente la tecnologia AJAX.

Vediamo in dettaglio cosa c’è dietro a questa tecnologia

AJAX acronimo di Asynchronous Javascript And XML, sostanzialmente permette di aggiungere al sito web delle funzioni e delle variazioni trasparenti dei contenuti, che normalmente sarebbero ottenuti tramite oggetti Java/Flash oppure tramite scripting lato server (PHP/ASP).

Come si è arrivati ad AJAX

Occorre prima di tutto precisare che AJAX non è una nuova tecnologia, ma piuttosto la maturazione di un insieme di strumenti messi a disposizione dai browser già da tempo. Lo stesso acronimo AJAX (Asynchronous Javascript And XML) è stato coniato da poco più di un anno, in un blog, quindi dopo la comparsa della tecnologia stessa.

Il tipo più comune di pagina web è la pagina statica, una pagina il cui contenuto è stato scritto dall’autore una volta per tutte all’interno di un file HTML, che richiamato attraverso il browser, mostra la pagina stessa. Le pagine statiche si chiamano tali perchè una volta scritte, il loro contenuto rimane appunto statico: non cambia, se non in seguito ad una modifica del file stesso. Oggi si stanno diffondendo sempre più siti web con pagine dinamiche, in questi siti i contenuti sono aggiornati all’interno di un database, mentre le pagine dinamiche hanno il compito di prelevare in tempo reale gli ultimi contenuti inseriti e presentarli al visitatore.

In realtà le potenzialità e le caratteristiche sono molte di più, ma ciò che ci interessa delle pagine dinamiche, è che i contenuti possono cambiare senza dover riscrivere le pagine che li presentano. Scendendo più in dettaglio, ogni volta che il visitatore clicca su un collegamento di un sito dinamico, il server che ospita il sito esegue un vero e proprio programma che genera la nuova pagina da presentare al visitatore.

Le pagine dinamiche sono caratterizzate quindi da continue interazioni browser-server-browser, dove ad ogni interazione la pagina viene completamente ricompilata ed inviata al browser. Talvolta però sarebbe sufficiente aggiornare solo parte delle informazioni presenti, il che ci permetterebbe di non dover ricompilare tutto, ma soprattutto sarebbe interessante fare aggiornare la pagina non al server (e poi farsela rispedire), ma direttamente nel browser.

La caratteristica principale di AJAX è proprio questa, permette di usare il browser per richiedere nuovi contenuti e una volta ricevuti modificare in tempo reale la pagina corrente, senza doverla ricaricare e visualizzare. Vediamo come richiesta contenuti e modifica della pagina corrente vengono realizzati con AJAX.

Le operazioni eseguite dai SERVER

Per rendere più chiaro questo concetto, proviamo ad elencare le operazioni compiute dal browser e dal server nei vari casi.

Pagina statica:

  1. il browser richiede la pagina contatti.html
  2. il server riceve la richiesta e cerca il file
  3. il server invia il file al browser
  4. il browser visualizza la pagina

Pagina dinamica:

  1. il browser richiede la pagina catalogo.asp
  2. il server riceve la richiesta e cerca il file
  3. il server esegue il programma contenuto nella pagina dinamica
  4. il server preleva i contenuti richiesti dal programma
  5. il server compila pagina con i contenuti
  6. il server invia la pagina al browser
  7. il browser visualizza la pagina

con AJAX:

  1. il browser richiede la pagina elenco-prodotti.html
  2. il server riceve la richiesta e cerca il file
  3. il server invia il file al browser
  4. il browser visualizza la pagina
  5. l’utente esegue una richiesta di aggiornamento contenuti con AJAX
  6. il browser richiede i nuovi contenuti al server
  7. il server invia i contenuti
  8. il browser inserisce i contenuti nella pagina esistente senza ricaricarla

Si nota subito una differenza sostanziale: le operazioni di aggiornamento e formattazione contenuti con AJAX si spostano dal server nel browser, con una conseguente maggiore interattività.