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
più 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 dell’utente corrisponde una richiesta al
server,
– che provoca la spedizione di un’intera 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 l’oggetto
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
all’indietro, 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ì più 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 l’evento 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 l’elaborazione 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
è l’esercizio 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,
– all’url 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 l’esito è 200 (=OK),
– tramite DOM modifica il colore di sfondo del corpo e il contenuto
dell’elemento 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 più 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 più complesso
• Costruiamo un’applicazione 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 dell’applicazione
• 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 dell’inoltro
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 all’esempio precedente vi sono due
funzioni nel codice Javascript:
– RecuperaLista(): funzione richiamata
dall’evento 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…
• L’oggetto 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 l’interfaccia 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
© Copyright 2024 ExpyDoc
