Ajax, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo web che ha rivoluzionato il web 2.0 consentendo comunicazioni più rapide e interattive senza ricaricare l'intera pagina. Introdotta nel 2005 da Jesse James Garrett, la sua evoluzione ha portato all'uso di tecnologie come JavaScript e XMLHttpRequest per migliorare l'esperienza utente. Sebbene esista da diversi anni, Ajax è stato riconosciuto ufficialmente solo con la crescita del web applicativo moderno.

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