Introduzione ad AJAX

Asynchronous Javascript And XML

(PWLS 6.9, 6.10)
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 1

Limitazioni delle applicazioni web

tradizionali
I limiti percepiti dall'utente sono:
lentezza nel caricamento delle pagine;
necessit di ricaricare l'intera pagina ad ogni
interazione.

Tali limiti derivano direttamente dall'HTTP e dalla

modalit di interazione client/server classica:
il browser (client) invia una richiesta (HTTP);
il web server riceve la richiesta ed elabora una risposta;
la risposta viene inviata al client che la visualizza/gestisce.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 2

Round-trip time (RTT)

RTT il tempo richiesto per l'invio di una richiesta da parte
del client e la ricezione della risposta (escluso il tempo di
trasferimento dei dati).

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 3

Rich Internet Application (RIA)

Una Rich Internet Application un'applicazione
web che si avvicina (dal punto di vista della
qualit dell'interazione) ad un'applicazione
standard di tipo desktop.
Si cerca di spostare gli aspetti maggiormente
interattivi sul lato client.
Adobe Flash, Java FX e Microsoft Silverlight sono
esempi di piattaforme per lo sviluppo di
applicazioni di questo tipo.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 4

AJAX (1)
AJAX significa Asynchronous Javascript
And XML.
Non una tecnologia, ma un modo di
utilizzare assieme una serie di
tecniche di programmazione lato client e
lato server per ottenere applicazioni web
piu interattive.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 5

AJAX (2)
HTML "tradizionale"
ad ogni azione dellutente corrisponde una richiesta al
server,
che provoca la spedizione di unintera pagina HTML verso il
browser

con AJAX possibile aggiornare parti della pagina

senza che sia necessario ricaricarla completamente
Esempi:
http://www.google.com/webhp?complete=1&hl=en
http://maps.google.com
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 6

AJAX (3)

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 7

AJAX (4)
Insieme di tecnologie (non specificamente server-side,
ma prevalentemente client -side):
XHTML e CSS standard;
Visualizzazione e interazione dinamica tramite
Document Object Model;
Scambio dati e manipolazione basate su XML e
XSLT;
XSLT
Recupero asincrono di dati tramite loggetto
XMLHttpRequest;
XMLHttpRequest
Il tutto connesso tramite Javascript
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 8

AJAX (5)

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 9

AJAX (6)
AJAX utile per creare interfacce "ricche",
che vadano oltre l'attuale modello per il
web.
Quindi applicazioni web e non semplici pagine
informative.

Problemi?
Accessibilit: pu degradare.
Explorer 5.5 e 6 implementano
XMLHttpRequest tramite ActiveX.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 10

Altri limiti/problemi relativi ad AJAX

AJAX non la panacea per tutti i mali; infatti presenta
anche qualche svantaggio:
non rispetta alcune delle funzionalit tipiche di un
browser (come il tasto back per la navigazione
allindietro, o la possibilit di salvare dei bookmark)
problemi di sicurezza,
i browser al momento non gestiscono tutti allo
stesso modo questa tecnologia; quindi necessario
porre attenzione agli aspetti specifici dei singoli
browser, rendendo cos piu complessa la
programmazione.

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 11

XMLHttpRequest: attributi
onreadystatechange: contiene la funzione che
gestisce levento lanciato, ad ogni cambiamento di stato.
readyState: stato corrente dell'istanza di
XMLHttpRequest:
0 = non inizializzato, 1 = aperto, 2 = richiesta inviata,
3 = risposta in ricezione e 4 = risposta ricevuta.

responseText: risposta del server in formato stringa

responseXML: risposta del server in XML
status: codice HTTP restituito dal server
per esempio 404 per "Not Found" e 200 per "OK".

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 12

XMLHttpRequest: (alcuni) metodi

setRequestHeader(chiave, valore): aggiunge uno
header alla richiesta.
open(metodo, URL, async): prepara una richiesta HTTP:
metodo: GET o POST (o PUT);
URL relativo o assoluto;
async: true, lo script prosegue lelaborazione senza aspettare; false
aspetta.

send(content): invia la richiesta.

abort(): cancella la richiesta in atto.
getAllResponseHeaders(): restituisce sotto forma di
stringa tutti gli header HTTP ricevuti dal server.

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 13

Attributi di XHTML correlati a

Javascript
Esempio (controlla valori immessi, prima della spedizione):
<form action="script.php" method="post"
onSubmit="check()" />

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 14

Esercizio
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.Della Mea e I.Scagnetto - 15

Struttura
Una pagina web dotata di alcune funzioni lato client
scritte in Javascript:
dopo avere scritto la stringa nei campi di input, una
funzione invia i valori alla parte lato server e aggiorna
dinamicamente la pagina alla ricezione del risultato,
senza ricaricare la pagina completa;
due parti: il codice XHTML e quello Javascript.
Uno script PHP: riceve i valori R G B via GET dalla
parte lato client, costruisce la stringa rgb(R,G,B) e
la invia indietro alla pagina web.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 16

La parte XHTML (colori1.php)

<body id="corpo"> <h1>Colori RGB in Ajax</h1>

R: <input type="text" name="R" id="r" value="255" size="3"
onblur="spedisci(document.getElementById('r').value,document.get
ElementById('g').value,document.getElementById('b').value);"/>
G: <input type="text" name="G" id="g" value="255" size="3" />
B: <input type="text" name="B" id="b" value="255" size="3" />
<input type="button" value="Cambia sfondo"
onclick="spedisci(document.getElementById('r').value,document.ge
tElementById('g').value,document.getElementById('b').value);" />
<p id="descrizione"> - </p>
</body>
</html>

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 17

La parte Javascript/1
<html>
<head>
<title>Colori RGB</title>
<script type="text/javascript">
function spedisci(R,G,B) {
document.getElementById("descrizione").innerHTM
L = "---attendi...----";
server = 'ajaxserver1.php?R=' + R + '&G=' + G +
'&B=' + B;
richiesta = new XMLHttpRequest();
richiesta.onreadystatechange = updateasincrono;
richiesta.open("GET", server, true);
richiesta.send(null);
}

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 18

La parte Javascript/2
function updateasincrono()
{
if ((richiesta.readyState == 4) &&
(richiesta.status == 200)) {
esito=richiesta.responseText;
document.getElementById("corpo").style.background
=esito;
document.getElementById("descrizione").innerHTML
=esito;
}
}
</script>
</head>
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 19

Lo script lato server

(ajaxserver1.php)
<?
function ImpostaSfondo($r, $g, $b)
{
$risposta = "rgb($r,$g,$b)";
return $risposta;
}
echo ImpostaSfondo($_GET['R'],$_GET['G'],
$_GET['B']);
?>
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 20

Commenti
spedisci(R,G,B): invia la richiesta asincrona,
allurl ajaserver1.php, con query uguale a R=r&G=g&B=b
stabilendo che la gestione della risposta verr fatta dalla funzione
updateasincrono()

updateasincrono(): quando lo stato della richiesta 4

(=risposta ricevuta) e lesito 200 (=OK),
tramite DOM modifica il colore di sfondo del corpo e il contenuto
dellelemento che ha id=descrizione

In questa versione semplice, lo script lato server si limita ad

emettere una stringa, che quindi non necessario codificare
in XML
Se dovesse restituire piu dati, potremmo usare XML, JSON, o anche
XHTML direttamente!
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 21

Sicurezza
Same Origin Policy:
https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

Cosa vuol dire?

Uno script Javascript non pu accedere a
dati/risorse al di fuori dell'origine della pagina
in cui risiede.
L'origine definita da: protocollo, host e (se
specificato) numero di porta.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 22

Un esempio piu complesso

Costruiamo unapplicazione AJAX che, oltre a
recuperare la risposta dal web server, invii anche
dei dati (query).
La pagina PHP a cui sar indirizzata la richiesta
dovr tener conto della query nella generazione
della risposta.
In particolare vogliamo inviare al client soltanto
le righe di un file di testo (sul server) che
contengano la stringa inviata nella query.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 23

Dettagli dellapplicazione
Il file di testo sul server si chiamer
lista_computer.txt e conterr in ogni riga il
nome di un computer.
La pagina PHP computer.php accetta in input come
parametro una stringa che utilizza come filtro per
produrre in output soltanto le righe del file
lista_computer.txt che la contengono.
La pagina statica AjaxComputerList.html
conterr il codice Javascript responsabile dellinoltro
della richiesta al server web e della visualizzazione della
risposta.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 24

Il file lista_computer.txt
Dell Optiplex
Dell Inspiron
Dell Dimension
iMac
Sun Ultra 1
Gateway laptop
...
Gateway 800
Palm VII
Handspring Visor
Atari
Beowulf Cluster II
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 25

computer.php
<?php
if(!isset($_REQUEST['query']))
$query="";
else
$query=$_REQUEST['query'];
$filename='lista_computer.txt';

$f = fopen($filename, "r");
$contenuto = fread($f, filesize($filename));
fclose($f);
$computer = explode("\n",$contenuto);
$risultato="";
for($i=0; $i<count($computer); $i++)
if(!(stripos($computer[$i],$query)===false))
$risultato=$risultato . $computer[$i] . "<br>";
echo $risultato;
?>

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 26

La pagina statica
<html>
<head>
<title>
</title>
<script type="text/javascript"><!-...
//--></script>
</head>
<body>
<form name="mioform">
Inserisci una stringa: <input type="text" name="query" size="10"
onBlur="javascript:RecuperaLista();"><br>
<span id="risultato"></span>
</form>
</body>
</html>

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 27

Le funzioni Javascript utilizzate

In modo analogo allesempio precedente vi sono due
funzioni nel codice Javascript:
RecuperaLista(): funzione richiamata
dallevento di perdita del focus della casella di testo
della pagina (elemento <input>); serve a generare
la richiesta dopo aver inizializzato un oggetto
XMLHttpRequest;
UpdateAsincrono(): funzione avente lo scopo di
attendere la risposta dal server, aggiornando la pagina
con la visualizzazione del risultato.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 28

RecuperaLista
function RecuperaLista() {
document.getElementById("risultato").innerHTML = "
ricerca in corso ";
var valore = window.document.mioform.query.value;
richiesta = new XMLHttpRequest();
richiesta.onreadystatechange = UpdateAsincrono;
richiesta.open("GET","computer.php?query="+valore,
true);
richiesta.send(null);
}

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 29

UpdateAsincrono
function UpdateAsincrono() {
if((richiesta.readyState == 4) && (richiesta.status
== 200)) {
var esito = richiesta.responseText;
document.getElementById("risultato").innerHTML =
esito;
}
}

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 30

Esempio di esecuzione

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 31

In Explorer 6
Loggetto XMLHttpRequest realizzato con
un ActiveX, quindi:
if (window.XMLHttpRequest) { //
Mozilla, Safari,
richiesta = new XMLHttpRequest();
} else if (window.ActiveXObject) { //
IE
richiesta = new
ActiveXObject(Msxml2.XMLHTTP); //IE6
}
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 32

Una pagina di test (I)

<html>
<head>
<title>
</title>
<script type="text/javascript"><!-function ajaxFunction() {
var xmlHttp;
var tipoBrowser="Firefox, Opera 8.0+, Safari, Internet Explorer
7.0+";
try {

// Firefox, Opera 8.0+, Safari, Internet Explorer 7.0

xmlHttp=new XMLHttpRequest();
}
catch(e) {
...
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 33

Una pagina di test (II)

tipoBrowser="Internet Explorer 6.0+";
try {
// Internet Explorer 6.0+
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
tipoBrowser="Internet Explorer 5.5+";
try {
// Internet Explorer 5.5+
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
tipoBrowser="Il tuo browser non supporta AJAX!";
}
}
}

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 34

Una pagina di test (III)

document.getElementById("msg").innerHTML="Tipo di browser:
"+tipoBrowser;
}
//--></script>
</head>
<body>
<a href="javascript:ajaxFunction()">Test</a><br
/>
javascript:ajaxFunction()
<span id="msg"></span>
id="msg"
</body>
</html>

La pagina presentata ci permette di verificare se il nostro

browser supporta la tecnologia AJAX.
Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 35

Dobbiamo fare tutto da zero?

Chiaramente no: esistono numerose librerie
che implementano:
comunicazione asincrona,
codifica/decodifica XML,
funzioni avanzate per linterfaccia utente
es.: utilizzo avanzato del mouse (posizione, ecc).

Es.: GoogleGears, XAjax

Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 36