Introduzione ad AJAX - Uniudivan.scagnetto/lato_server/AJAX.pdfComplementi di Tecnologie Web A.A....

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

Introduzione ad AJAX

Asynchronous Javascript And XML

(PWLS 6.9, 6.10)


Limitazioni delle applicazioni web “tradizionali”

• I limiti percepiti dall'utente sono:– lentezzalentezza nel caricamento delle pagine;

– necessità di ricaricarericaricare 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.


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).


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.


AJAX (1)

• AJAXAJAX significa AAsynchronous JJavascript AAnd XXML.

• Non è una tecnologia, ma un modo di modo di utilizzare assieme una serie di utilizzare assieme una serie di tecnichetecniche di programmazione lato client e lato server per ottenere applicazioni web piu interattive.


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 paginaaggiornare parti della pagina senza che sia necessario ricaricarla completamente– Esempi:– http://www.google.com/webhp?complete=1&hl=en– http://maps.google.com

http://www.google.com/webhp?complete=1&hl=en

http://maps.google.com/


AJAX (3)


AJAX (4)• Insieme di tecnologie (non specificamente server-side,

ma prevalentemente client -side):– XHTMLXHTML e CSSCSS standard;– Visualizzazione e interazione dinamica tramite

DDocument OObject MModel;– Scambio dati e manipolazione basate su XMLXML e

XSLTXSLT;– Recupero asincrono di dati tramite l’oggetto

XMLHttpRequestXMLHttpRequest;– Il tutto connesso tramite JavascriptJavascript


AJAX (5)


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.


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ì piu complessa la programmazione.


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".


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.


Attributi di XHTML correlati a Javascript

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


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)


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.


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.getElementById('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.getElementById('g').value,document.getElementById('b').value);" />

<p id="descrizione"> - </p></body> </html>


La parte Javascript/1<html><head><title>Colori RGB</title> <script type="text/javascript">function spedisci(R,G,B) { document.getElementById("descrizione").innerHTML = "---attendi...----";

server = 'ajaxserver1.php?R=' + R + '&G=' + G + '&B=' + B;

richiesta = new XMLHttpRequest(); richiesta.onreadystatechange = updateasincrono; richiesta.open("GET", server, true); richiesta.send(null);}


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>


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']);?>


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 piu dati, potremmo usare XML, JSON, o anche

XHTML direttamente!


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.

https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript


Un esempio piu 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.


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.


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


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;

?>

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>


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.


RecuperaLista

function RecuperaLista() {function RecuperaLista() {

document.getElementById("risultato").innerHTML = " document.getElementById("risultato").innerHTML = " ricerca in corso ";ricerca in corso ";

var valore = window.document.mioform.query.value;var valore = window.document.mioform.query.value;

richiesta = new XMLHttpRequest();richiesta = new XMLHttpRequest();

richiesta.onreadystatechange = UpdateAsincrono;richiesta.onreadystatechange = UpdateAsincrono;

richiesta.open("GET","computer.php?query="+valore, richiesta.open("GET","computer.php?query="+valore, true);true);

richiesta.send(null);richiesta.send(null);

}}


UpdateAsincrono

function UpdateAsincrono() {function UpdateAsincrono() {

if((richiesta.readyState == 4) && (richiesta.status if((richiesta.readyState == 4) && (richiesta.status == 200)) {== 200)) {

var esito = richiesta.responseText;var esito = richiesta.responseText;

document.getElementById("risultato").innerHTML = document.getElementById("risultato").innerHTML = esito;esito;

}}

}}


Esempio di esecuzione


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

}

Una pagina di test (I)

<html>

<head>

<title>

</title>

<script type="text/javascript"><!--<script type="text/javascript"><!--

function ajaxFunction() {function ajaxFunction() {

var xmlHttp;var xmlHttp;

var tipoBrowser="Firefox, Opera 8.0+, Safari, Internet Explorer var tipoBrowser="Firefox, Opera 8.0+, Safari, Internet Explorer 7.0+";7.0+";

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

xmlHttp=new XMLHttpRequest();xmlHttp=new XMLHttpRequest();

}}

catch(e) {catch(e) {

......


Una pagina di test (II)

tipoBrowser="Internet Explorer 6.0+";tipoBrowser="Internet Explorer 6.0+";

try {try {

// Internet Explorer 6.0+// Internet Explorer 6.0+

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}}


tipoBrowser="Internet Explorer 5.5+";tipoBrowser="Internet Explorer 5.5+";

try {try {

// Internet Explorer 5.5+// Internet Explorer 5.5+

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}}


tipoBrowser="Il tuo browser non supporta AJAX!";tipoBrowser="Il tuo browser non supporta AJAX!";

}}

}}

}}


Una pagina di test (III)

document.getElementById("msg").innerHTML="Tipo di browser: document.getElementById("msg").innerHTML="Tipo di browser: "+tipoBrowser;"+tipoBrowser;

}}

//--></script>//--></script>

</head>

<body>

<a href="javascript:ajaxFunction()javascript:ajaxFunction()">Test</a><br />

<span id="msg"id="msg"></span>

</body>

</html>

La pagina presentata ci permette di verificare se il nostro browser supporta la tecnologia AJAX.


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

Introduzione ad AJAX - Uniudivan.scagnetto/lato_server/AJAX.pdfComplementi di Tecnologie Web A.A....

Documents

Transcript of Introduzione ad AJAX - Uniudivan.scagnetto/lato_server/AJAX.pdfComplementi di Tecnologie Web A.A....