Introduzione ad AJAX

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

HTML "tradizionale" AJAX (2) 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; Recupero asincrono di dati tramite l oggetto 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ì 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 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 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 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() javascript:ajaxfunction()">test</a><br /> <span id="msg"></span> </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