Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !.

"cagnetto - 1
Introduzione ad AJAX
Asynchronous Javascript And XML
(PWLS 6.9, 6.10)
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 2
Limitazioni delle applicazioni web
tradizionali

I limiti percepiti dall'utente sono

!
lentezza
lentezza nel caricamento delle pa"ine#
!
necessit$ di
ricaricare
ricaricare l'intera pa"ina ad o"ni
interazione%

&ali limiti derivano direttamente dall''&&( e dalla

modalit$ di interazione client)server classica
!
il browser *client+ invia una richiesta *'&&(+#
!
il web server riceve la richiesta ed elabora una risposta#
!
la risposta viene inviata al client che la visualizza)"estisce%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - #
,ound-trip time *,&&+
RTT il tempo richiesto per l'invio di n! richiest! d! p!rte
del client e l! rice"ione dell! rispost! (esclso il tempo di
tr!s#erimento dei d!ti).
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - $
,ich Internet Application *,IA+

.na ,ich Internet Application / un'applicazione

web che si avvicina *dal punto di vista della
0ualit$ dell'interazione+ ad un'applicazione
standard di tipo des1top%

2i cerca di spostare "li aspetti ma""iormente

interattivi sul lato client%

Adobe 3lash4 Java 3X e Microso5t 2ilverli"ht sono

esempi di piatta5orme per lo sviluppo di
applicazioni di 0uesto tipo%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - %
AJAX *6+

AJAX
AJAX si"ni7ca
A
Asynchronous
J
Javascript
A
And
X
XML%

8on / una tecnolo"ia4 ma un

modo di
modo di
utilizzare assieme una serie di
utilizzare assieme una serie di
tecniche
tecniche di pro"rammazione lato client e
lato server per ottenere applicazioni web
pi9 interattive%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - &
AJAX *:+

'&ML ;tradizionale;
!
ad o"ni azione dell<utente corrisponde una richiesta al
server4
!
che provoca la spedizione di un<intera pa"ina '&ML verso il
browser

con AJAX / possibile

aggiornare parti della pagina
aggiornare parti della pagina
senza che sia necessario ricaricarla completamente
!
=sempi
!
http))www%"oo"le%com)webhp>complete?6@hl?en
!
http))maps%"oo"le%com
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - '
AJAX *A+
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - (
AJAX *B+

Insieme di tecnolo"ie *non speci7camente server-side4

ma prevalentemente client -side+
!
XHTML
XHTML e
CSS
CSS standard#
!
Cisualizzazione e interazione dinamica tramite
D
Document
O
ObDect
M
Model#
!
2cambio dati e manipolazione basate su
XML
XML e
XSLT
XSLT#
!
,ecupero asincrono di dati tramite l<o""etto
XMLHttpRequest
XMLHttpRequest#
!
Il tutto connesso tramite
Jaascript
Jaascript
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - )
AJAX *E+
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 10
AJAX *F+

AJAX / utile per creare inter5acce ;ricche;4

che vadano oltre l'attuale modello per il
web%
!
Guindi applicazioni web e non semplici pa"ine
in5ormative%

(roblemi>
!
Accessibilit$ puH de"radare%
!
=Iplorer E%E e F implementano
XML'ttp,e0uest tramite ActiveX%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 11
Altri limiti)problemi relativi ad AJAX

AJAX non / la panacea per tutti i mali# in5atti presenta

anche 0ualche svanta""io
!
non rispetta alcune delle 5unzionalit$ tipiche di un
browser *come il tasto bac1 per la navi"azione
all<indietro4 o la possibilit$ di salvare dei boo1mar1+
!
problemi di sicurezza4
!
i browser al momento non "estiscono tutti allo
stesso modo 0uesta tecnolo"ia# 0uindi / necessario
porre attenzione a"li aspetti speci7ci dei sin"oli
browser4 rendendo cosJ pi9 complessa la
pro"rammazione%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 12
XML'ttp,e0uest attributi

onreadystatechange contiene la 5unzione che

"estisce l<evento lanciato4 ad o"ni cambiamento di stato%

readyState stato corrente dell'istanza di

XMLHttpRequest
!
0 ? non inizializzato4 1 ? aperto4 2 ? richiesta inviata4
3 ? risposta in ricezione e 4 ? risposta ricevuta%

responseText risposta del server in 5ormato strin"a

responseXML risposta del server in XML

status codice '&&( restituito dal server

!
per esempio 404 per ;8ot 3ound; e 200 per ;KL;%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 1#
XML'ttp,e0uest *alcuni+ metodi

setRequestHeader(chiave va"ore# a""iun"e uno

header alla richiesta%

open($etodo %RL async# prepara una richiesta '&&(

! $etodo &'T o ()ST *o (%T+#
! %RL relativo o assoluto#
! async true4 lo script prose"ue l<elaborazione senza aspettare# *a"se
aspetta%

send(content# invia la richiesta%

a+ort(# cancella la richiesta in atto%

get,""ResponseHeaders(# restituisce sotto 5orma di

strin"a tutti "li header '&&( ricevuti dal server%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 1$
Attributi di X'&ML correlati a
Javascript
=sempio *controlla valori immessi4 prima della spedizione+
-*or$ action./script0php/ $ethod./post/
onSu+$it./chec1(#/ 23
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 1%
=sercizio

Svilupperemo una pagina web con tre campi

di input in cui inseriremo tre numeri per i
valori di R,G,B con cui impostare il colore di
sfondo della pagina,

Il tutto asincronamente (senza ricaricare).

(NB: si pu fare tutto solo con Javascript! Ma

lesercizio pi semplice)
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 1&
2truttura

.na pa"ina web dotata di alcune 5unzioni lato client

scritte in Javascript
!
dopo avere scritto la strin"a nei campi di input4 una
5unzione invia i valori alla parte lato server e a""iorna
dinamicamente la pa"ina alla ricezione del risultato4
senza ricaricare la pa"ina completa#
!
due parti il codice X'&ML e 0uello Javascript%

.no script ('( riceve i valori R & 4 via &'T dalla

parte lato client4 costruisce la strin"a rg+(R&4# e
la invia indietro alla pa"ina web%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 1'
La parte X'&ML *colori6%php+
5
-+ody id./corpo/3 -h136o"ori R&4 in ,7ax-2h13
R8 -input type./text/ na$e./R/ id./r/ va"ue./299/ si:e./3/
on+"ur./spedisci(docu$ent0get'"e$ent4y;d(<r<#0va"uedocu$ent0get
'"e$ent4y;d(<g<#0va"uedocu$ent0get'"e$ent4y;d(<+<#0va"ue#=/23
&8 -input type./text/ na$e./&/ id./g/ va"ue./299/ si:e./3/ 23
48 -input type./text/ na$e./4/ id./+/ va"ue./299/ si:e./3/ 23
-input type./+utton/ va"ue./6a$+ia s*ondo/
onc"ic1./spedisci(docu$ent0get'"e$ent4y;d(<r<#0va"uedocu$ent0ge
t'"e$ent4y;d(<g<#0va"uedocu$ent0get'"e$ent4y;d(<+<#0va"ue#=/ 23
-p id./descri:ione/3 > -2p3
-2+ody3
-2ht$"3
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 1(
La parte Javascript)6
-ht$"3
-head3
-tit"e36o"ori R&4-2tit"e3
-script type./text27avascript/3
*unction spedisci(R&4# ?

docu$ent0get'"e$ent4y;d(/descri:ione/#0innerHTM
L . />>>attendi000>>>>/=
server . <a7axserver10php@R.< A R A <B&.< A & A
<B4.< A 4=
richiesta . neC XMLHttpRequest(#=
richiesta0onreadystatechange . updateasincrono=
richiesta0open(/&'T/ server true#=
richiesta0send(nu""#=
D
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 1)
La parte Javascript):
*unction updateasincrono(#
?
i* ((richiesta0readyState .. 4# BB
(richiesta0status .. 200## ?
esito.richiesta0responseText=
docu$ent0get'"e$ent4y;d(/corpo/#0sty"e0+ac1ground
.esito=
docu$ent0get'"e$ent4y;d(/descri:ione/#0innerHTML
.esito=
D
D
-2script3
-2head3
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 20
Lo script lato server
*aDaIserver6%php+
-@
*unction ;$postaS*ondo(Er Eg E+#
?
Erisposta . /rg+(ErEgE+#/=
return Erisposta=
D
echo ;$postaS*ondo(EF&'TG<R<HEF&'TG<&<H
EF&'TG<4<H#=
@3
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 21
Mommenti

spedisci(R&4# invia la richiesta asincrona4

!
all<url a7aserver10php4 con 0uery u"uale a R.rB&.gB4.+
!
stabilendo che la "estione della risposta verr$ 5atta dalla 5unzione
updateasincrono(#

updateasincrono(# 0uando lo stato della richiesta / 4

*?risposta ricevuta+ e l<esito / 200 *?KL+4
!
tramite NKM modi7ca il colore di s5ondo del corpo e il contenuto
dell<elemento che ha id.descri:ione

In 0uesta versione semplice4 lo script lato server si limita ad

emettere una strin"a4 che 0uindi non / necessario codi7care
in XML
!
2e dovesse restituire pi9 dati4 potremmo usare XML4 J2K84 o anche
X'&ML direttamenteO
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 22
2icurezza

2ame Kri"in (olicy

https))developer%mozilla%or")=n)2amePori"inPpolicyP5orPJava2cript

Mosa vuol dire>

!
.no script Javascript non puH accedere a
dati)risorse al di 5uori dell'ori"ine della pa"ina
in cui risiede%
!
L'ori"ine / de7nita da protocollo4 host e *se
speci7cato+ numero di porta%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 2#
.n esempio pi9 complesso

Mostruiamo un<applicazione AJAX che4 oltre a

recuperare la risposta dal web server4 invii anche
dei dati *0uery+%

La pa"ina ('( a cui sar$ indirizzata la richiesta

dovr$ tener conto della 0uery nella "enerazione
della risposta%

In particolare vo"liamo inviare al client soltanto

le ri"he di un 7le di testo *sul server+ che
conten"ano la strin"a inviata nella 0uery%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 2$
Netta"li dell<applicazione

Il 7le di testo sul server si chiamer$

"istaFco$puter0txt e conterr$ in o"ni ri"a il
nome di un computer%

La pa"ina ('( computer%php accetta in input come

parametro una strin"a che utilizza come 7ltro per
produrre in output soltanto le ri"he del 7le
"istaFco$puter0txt che la conten"ono%

La pa"ina statica ,7ax6o$puterList0ht$"

conterr$ il codice Javascript responsabile dell<inoltro
della richiesta al server web e della visualizzazione della
risposta%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 2%
Il 7le listaPcomputer%tIt
Dell Optiplex
Dell Inspiron
Dell Dimension
iMac
Sun Ultra 1
Gateway laptop
...
Gateway 800
Palm VII
Hansprin! Visor
"tari
#eowul$ %luster II
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 2&
computer.php
&'p(p
i$)*isset)+,-./U.S0123uery2455
+3uery6778
else
+3uery6+,-./U.S0123uery248
+$ilename62lista,computer.txt28

+$ 6 $open)+$ilename9 7r758
+contenuto 6 $rea)+$9 $ilesi:e)+$ilename558
$close)+$58
+computer 6 exploe)7;n79+contenuto58
+risultato6778
$or)+i608 +i&count)+computer58 +i<<5
i$)*)stripos)+computer1+i49+3uery5666$alse55
+risultato6+risultato . +computer1+i4 . 7&=r>78
ec(o +risultato8
'>
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 2'
La pa"ina statica
&(tml>
&(ea>
&title>
&?title>
&script type67text?@aAascript7>&*BB
...
??BB>&?script>
&?(ea>
&=oy>
&$orm name67mio$orm7>
Inserisci una strin!aC &input type67text7 name673uery7 si:e67107
on#lur67@aAascriptC-ecuperaDista)587>&=r>
&span i67risultato7>&?span>
&?$orm>
&?=oy>
&?(tml>
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 2(
Le 5unzioni Javascript utilizzate

In modo analo"o all<esempio precedente vi sono due

5unzioni nel codice Javascript
!
RecuperaLista(# 5unzione richiamata
dall<evento di perdita del 5ocus della casella di testo
della pa"ina *elemento -input3+# serve a "enerare
la richiesta dopo aver inizializzato un o""etto
XMLHttpRequest#
!
%pdate,sincrono(# 5unzione avente lo scopo di
attendere la risposta dal server4 a""iornando la pa"ina
con la visualizzazione del risultato%
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - 2)
RecuperaLista
*unction RecuperaLista(# ? *unction RecuperaLista(# ?
docu$ent0get'"e$ent4y;d(/risu"tato/#0innerHTML . / docu$ent0get'"e$ent4y;d(/risu"tato/#0innerHTML . /
ricerca in corso /= ricerca in corso /=
var va"ore . CindoC0docu$ent0$io*or$0query0va"ue= var va"ore . CindoC0docu$ent0$io*or$0query0va"ue=
richiesta . neC XMLHttpRequest(#= richiesta . neC XMLHttpRequest(#=
richiesta0onreadystatechange . %pdate,sincrono= richiesta0onreadystatechange . %pdate,sincrono=
richiesta0open(/&'T//co$puter0php@query./Ava"ore richiesta0open(/&'T//co$puter0php@query./Ava"ore
true#= true#=
richiesta0send(nu""#= richiesta0send(nu""#=
D D
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - #0
UpdateAsincrono
*unction %pdate,sincrono(# ? *unction %pdate,sincrono(# ?
i*((richiesta0readyState .. 4# BB (richiesta0status i*((richiesta0readyState .. 4# BB (richiesta0status
.. 200## ? .. 200## ?
var esito . richiesta0responseText= var esito . richiesta0responseText=
docu$ent0get'"e$ent4y;d(/risu"tato/#0innerHTML . docu$ent0get'"e$ent4y;d(/risu"tato/#0innerHTML .
esito= esito=
D D
D D
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - #1
Esempio di esecuzione
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - #2
In =Iplorer FQ

L<o""etto XML'ttp,e0uest / realizzato con

un ActiveX4 0uindi
i* (CindoC0XMLHttpRequest# ? 22
Mo:i""a Sa*ari 5
richiesta . neC XMLHttpRequest(#=
D e"se i* (CindoC0,ctiveX)+7ect# ? 22
;'
richiesta . neC
,ctiveX)+7ect(IMsx$"20XMLHTT(I#= 22;'J
D
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - ##
.na pa"ina di test *I+
&(tml>
&(ea>
&title>
&?title>
-script type./text27avascript/3-K>> -script type./text27avascript/3-K>>
*unction a7axLunction(# ? *unction a7axLunction(# ?
var x$"Http= var x$"Http=
var tipo4roCser./Lire*ox )pera M00A Sa*ari ;nternet 'xp"orer var tipo4roCser./Lire*ox )pera M00A Sa*ari ;nternet 'xp"orer
N00A/= N00A/=
try ? 22 Lire*ox )pera M00A Sa*ari ;nternet 'xp"orer N00 try ? 22 Lire*ox )pera M00A Sa*ari ;nternet 'xp"orer N00
x$"Http.neC XMLHttpRequest(#= x$"Http.neC XMLHttpRequest(#=
D D
catch(e# ? catch(e# ?
000 000
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - #$
Una pagina di test (II)
tipo4roCser./;nternet 'xp"orer J00A/= tipo4roCser./;nternet 'xp"orer J00A/=
try ? try ?
22 ;nternet 'xp"orer J00A 22 ;nternet 'xp"orer J00A
x$"Http.neC ,ctiveX)+7ect(/Msx$"20XMLHTT(/#= x$"Http.neC ,ctiveX)+7ect(/Msx$"20XMLHTT(/#=
D D
catch(e# ? catch(e# ?
tipo4roCser./;nternet 'xp"orer 909A/= tipo4roCser./;nternet 'xp"orer 909A/=
try ? try ?
22 ;nternet 'xp"orer 909A 22 ;nternet 'xp"orer 909A
x$"Http.neC ,ctiveX)+7ect(/Microso*t0XMLHTT(/#= x$"Http.neC ,ctiveX)+7ect(/Microso*t0XMLHTT(/#=
D D
catch(e# ? catch(e# ?
tipo4roCser./;" tuo +roCser non supporta ,O,XK/= tipo4roCser./;" tuo +roCser non supporta ,O,XK/=
D D
D D
D D
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - #%
.na pa"ina di test *III+
docu$ent0get'"e$ent4y;d(/$sg/#0innerHTML./Tipo di +roCser8 docu$ent0get'"e$ent4y;d(/$sg/#0innerHTML./Tipo di +roCser8
/Atipo4roCser= /Atipo4roCser=
D D
22>>3-2script3 22>>3-2script3
&?(ea>
&=oy>
&a (re$677avascript8a7axLunction(# 7avascript8a7axLunction(#7>0est&?a>&=r ?>
&span id./$sg/ id./$sg/>&?span>
&?=oy>
&?(tml>
L! p!$in! present!t! ci permette di veri#ic!re se il nostro
%ro&ser spport! l! tecnolo$i! '(').
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.ella Mea e !."cagnetto - #&
Nobbiamo 5are tutto da zero>

Mhiaramente no esistono numerose librerie

che implementano
!
comunicazione asincrona4
!
codi7ca)decodi7ca XML4
!
5unzioni avanzate per l<inter5accia utente

es% utilizzo avanzato del mouse *posizione4 ecc+%

=s% Roo"leRears4 XA!a"