ajax
TRANSCRIPT
AJAXAsynchronous Javascript and XML
Cos’è AJAX
AJAX
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
Cos’è AJAX
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
Cos’è AJAX
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
Cos’è AJAX
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.
Cos’è AJAX
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
L’idea di base
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
L’idea di base
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
All’inizio fu il frame
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
La tecnica del frame nascosto
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
I veri attori di AJAX
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
classe che è stata sviluppata ad hoc per questo modello
JavaScript
JavaScript
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
XMLHttpRequest
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 aumentavano
XMLHttpRequest
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 AJAX
Architettura
AJAX
15DatabaseWeb Server
Web Browser
User Interface
AJAX Engine
HTML, CSS
Javascript
Data Transfer
HTTP Request
Data Response
Data Request
Web ServerDatabase
Web Browser
Data Response
Data Request
HTML, Images, CSS, JavaScript, Data
HTTP Request
Modello Web Tradizionale
Modello Web AJAX
I vantaggi di AJAX
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
I vantaggi di AJAX
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
I vantaggi di AJAX
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)
I vantaggi di AJAX
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
Le tecnologie utilizzate in AJAX
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