2. AJAX sta per Asynchronous Javascript and XML
Molti pensano sia un linguaggio mentre invece è una tecnica
Esiste da molti anni, ma con altro nome e con altra forma
E’ il risultato e allo stesso tempo il fautore dello sviluppo del
web nella forma che conosciamo come “Web 2.0”
Raggruppa diverse tecnologie e linguaggi per ottenere lo
scopo principale, ovvero lo sviluppo web performante
2
AJAX
3. Dal 2000 in poi, il web ha subito una evoluzione sempre più
notevole in termini di tecnologie
Le infrastrutture più capienti hanno creato i presupposti per
uno sviluppo web più accurato e più complesso
Il web ha subito una evoluzione tale che oggi, con il concetto
di web 2.0, possiamo dire che internet è diventata una vera e
propria piattaforma applicativa
3
AJAX
4. Questa crescita passa per AJAX in maniera rilevante
Il termine AJAX (Asynchronous Javascript and XML) è stato
coniato nel 2005 da Jesse James Garrett di Adaptive Path LLC
Garrett pubblicò un articolo che si chiamava “Ajax: A New
Approach to Web Applications”
Questo articolo ancora oggi è disponibile
http://www.adaptivepath.com/ideas/essays/archives/000385.php
4
AJAX
5. Garrett era dell’avviso che il divario tra le applicazioni
tradizionali in locale e quelle web stesse sempre più
diminuendo
Il modello citato era Google e l’articolo originale citava:
Google Suggest and Google Maps are two examples of a new
approach to web applications that we at Adaptive Path have
been calling Ajax.
The name is shorthand for Asynchronous JavaScript + XML,
and it represents a fundamental shift in what’s possible on
the Web. 5
AJAX
6. Da quel momento in poi la stessa rete ritenne valido il termine
AJAX per indicare qualcosa che rappresentava il contesto
evolutivo del web
Il numero di articoli e citazioni di questo termine aumentarono
in maniera esponenziale
Le applicazioni, intese sempre più come rich client applications
lato web, erano state identificate come prodotto di una
elaborazione asincrona che avesse come attori principali
Javascript e XML
In seguito, XML verrà spesso rimpiazzato con JSON
6
AJAX
7. Quando nel 1990 un certo Tim Berners-Lee ideò il WWW
inteso come ragnatela di informazioni e siti web collegati tra
loro attraverso link, non poteva immaginare questa evoluzione
Con l’evoluzione dei siti e l’introduzione di un linguaggio di
scripting lato client così potente come Javascript, il web
progredì in maniera velocissima
Le pagine web divennero ben presto pesanti, per la logica di
funzionamento che prevedeva una richiesta e una risposta 7
AJAX
8. La risposta ottenuta dal server web era completa della parte
grafica, che in pratica corrispondeva alla maggioranza del peso
dei dati ricevuti dal client
L’idea di base fu quindi quella di disaccoppiare queste parti
La parte grafica, che era la parte rilevante, andava
necessariamente staccata da quella dei dati, minoritaria
Questo fu possibile proprio grazie a Javascript, che consentiva
una capacità di azione e interazione lato client notevole
I dati venivano richiesti al server e la comunicazione avveniva
con l’ausilio di XML 8
AJAX
9. Tanti non sanno che AJAX è nato (come tecnica) moltissimi
anni fa
L’anno di riferimento era il 1996 circa
Allora si usava la tecnica del “frame nascosto” per consentire
una risposta veloce al minimo della interazione visiva tra client
e server
9
AJAX
10. Il meccanismo era basato sulla presenza di un frame che si
occupasse solo della logica di comunicazione da/verso il server
Un frame normalmente con larghezza o altezza zero e non
ridimensionabile, veniva usato come broker di informazioni
Questo consentiva, tramite un linguaggio come Javascript e
tramite il DOM, una rappresentazione più fluida e meno
pesante dal punto di vista dell’esperienza utente
10
AJAX
11. Tutto il funzionamento lato client si basa su un “linguaggio”
noto come JavaScript
Senza il suo ausilio non sarebbe stato possibile tutto questo
Ma JavaScript da solo non è sufficiente
Ha bisogno di un altro “componente” che si occupa di tutta la
parte fondamentale cioè della comunicazione lato server
Questo componente si chiama XMLHttpRequest ed è una
11
classe che è stata sviluppata ad hoc per questo modello
AJAX
12. JavaScript è IL linguaggio di scripting per il Web
La sua notorietà e la sua diffusione sono tali che ogni giorno
milioni di pagine su internet girano grazie a questo linguaggio
Questa diffusione è dovuta anche alla sua notevole semplicità
E’ pienamente funzionante in tutti i browser esistenti
JavaScript è un linguaggio di scripting lato client, nato con lo
scopo di interagire con le pagine HTML
Si posiziona normalmente all’interno delle pagine HTML
E’ un linguaggio interpretato (ovvero il browser lo interpreta
direttamente) e per questo non necessita di compilazione 12
JavaScript
13. XMLHttpRequest è il componente che si occupa del colloquio con
il server web
Si posiziona “dietro” all’interfaccia utente e svolge un ruolo
fondamentale per il funzionamento degli applicativi in AJAX
La prima versione di questo componente fu sviluppata da
Microsoft, ed era in forma di ActiveX e si chiamava XMLHttp
Venne molto impiegato per realizzare applicativi con il modello
web chiamato del “frame nascosto”
Veniva distribuito con la libreria nota con il nome di MSXML
Le potenzialità erano notevoli, e tramite JavaScript aumentavano13
JavaScript
14. Vista la potenza di XMLHttp l’interesse nelle comunità di
sviluppatori crebbero notevolmente verso questo componente
Tuttavia questi era in forma di ActiveX quindi eseguibile solo in IE
Per questo motivo gli sviluppatori del progetto open source
Mozilla decisero di realizzare un porting di XMLHttp che non fosse
in forma di ActiveX, e che quindi potesse girare in ogni browser
Questo porting consentì di realizzare una libreria nota con il nome
di XMLHttpRequest, che tramite una classe avente lo stesso
nome, consentivano di realizzare questo livello di isolamento
La realizzazione di questo porting diede vita alla vera era di AJAX14
JavaScript
15. Modello Web Tradizionale
HTML, Images, CSS, JavaScript, Data Response
Data
Data Request
HTTP Request
Database
Web Browser Web Server
Modello Web AJAX
HTML, CSS Data Transfer Data Response
User AJAX
Interface Engine
Javascript HTTP Request Data Request
Web Server Database
15
Web Browser
AJAX
16. Traffico Minimo
Non si perde tempo ogni volta a ricaricare la parte grafica
della pagina
Il caricamento dell’interfaccia utente può richiedere
qualche secondo inizialmente che viene poi ripagato dalla
velocità di esecuzione dell’applicativo web
La quantità effettiva di dati che viaggiano è molto ridotta in
quanto composta da soli dati e non da parti inutili
16
AJAX
17. Interfaccia Utente
Grazie al supporto del linguaggio JavaScript l’applicativo
web si arricchisce notevolmente rispetto al modello web
tradizionale
L’utente dispone di una serie di funzionalità molto simile
alle funzionalità di un applicativo desktop
Le parti dell’applicativo possono essere manipolate
(drag&drop, effetti grafici)
Si dispone delle funzionalità da tastiera
17
AJAX
18. Possibilità di reingegnerizzazione
Il modello di sviluppo web basato su AJAX si associa quasi
sempre al modello di sviluppo basato su servizi
Le funzionalità disponibili sull’applicativo vengono isolate
su strati disponibili per il riuso (Web Services, Servizi WCF)
Questo consente, se necessario, di modificare in parte (o
volendo anche totalmente) la parte di interfaccia utente
senza dover mettere più mano alla logica dell’applicativo
(business logic)
18
AJAX
19. Accessibilità
In base a questa architettura modulare è possibile
introdurre dei canoni di accessibilità maggiormente
aderenti agli standard
L’utenza può essere di diverso tipo e con diverse esigenze
Quindi possono esserci anche più “interfacce utente” in
base alla tipologia di utente che utilizza l’applicativo web
19
AJAX
20. Abbiamo detto che AJAX è una tecnica di sviluppo web e non un
linguaggio di sviluppo
Quindi come tale necessita dell’impiego di diverse tecnologie:
HTML/XHTML: per realizzare la struttura delle pagine
CSS: per fornire stili e formattazioni grafiche
DOM: per consentire l’accesso alle parti del documento
XML/JSON: per realizzare lo scambio dei dati
XSLT: per trasformare XML in XHTML (con l’ausilio dei CSS)
XMLHttp/XMLHttpRequest: il vero motore di AJAX
JavaScript: il linguaggio di scripting di AJAX 20
AJAX