Asynchronous JavaScript Technology and XML: Ajax Corso di Applicazioni Telematiche A.A. 2010-11 Prof. Simon Pietro Romano Università degli Studi di Napoli Federico II Facoltà di Ingegneria
Rich Internet Applications (RIA) Applicazioni web come applicazioni desktop Spesso necessitano di software ad-hoc Adobe Flash Java Silverlight Soluzioni ibride alternative Utilizzare le funzionalità del browser stesso Programmazione client side mediante JavaScript Ajax per interazione trasparente con il server Asynchronous XML and JavaScript 2
Asynchronous JavaScript and XML (AJAX) Umbrella term per più tecnologie Presentazione standard (CSS/XHTML) Visualizzazione dinamica ed interazione (DOM) Scambio e gestione dati (XML/XSLT) Trasferimento asincrono dati (XMLHttpRequest)...e JavaScript per mettere tutto assieme Non una tecnologia in senso stretto, quindi Più che altro una tecnica di programmazione Basata su tecnologie affermate e pre-esistenti 3
Un nuovo modello 4
Cosa cambia? Un nuovo intermediario tra client e server Non più natura START-STOP (Web classico) Nuovo layer, più responsive!? Ajax Engine Scritto in JavaScript Solitamente è in un frame nascosto Compito duale Rendering dell'interfaccia Interazione col server per conto dell'utente L utente interagisce con l'engine (JavaScript) 5
Modello Sincrono vs. Asincrono 6
Vantaggi... Tecnologie standard XML/HTML per i dati È ancora HTTP Richieste di piccole dimensioni (non necessariamente l'intera pagina) Minore traffico di rete Maggiore reattività dell'interfaccia utente Ajax è basato su JavaScript Le applicazioni AJAX sono portabili Supporto praticamente in tutti i browser 7
... e svantaggi Stessa pagina, quindi niente Back/Forward I segnalibri (bookmarks) non funzionano Possibili problemi di accessibilità Lo stato va gestito a livello applicativo È JavaScript... Deve essere, quindi, abilitato nel browser Vi sono incompatibilità tra i browser ed i Sistemi Operativi Al solito, molte librerie per gestirle... Server load Richieste piccole, ma frequenti (overhead) 8
Esempi di utilizzo (1) Validazione server-side in tempo reale di una form (prima del Submit) Autocompletamento di una form Caricamento di contenuti a richiesta Conseguenza di evento Interfaccia utente sofisticata Si modifica la pagina senza ricaricarla Submit parziale di una form Manda dati solo quando serve Non c'è bisogno di fare il refresh della pagina 9
Esempi di utilizzo (2) Aggiornamento e server-push Polling per avere sempre i dati più aggiornati Mashup Contenuti provenienti da siti diversi vengono messi assieme per realizzare un'applicazione complessa Pagina web come un'applicazione Una singola pagina web progettata per somigliare ad un'applicazione desktop Instant Messaging web-based Gateway verso IRC/XMPP/... 10
Esempio di interazione 11
L'oggetto XMLHttpRequest (XHR) API DOM per mandare richieste HTTP/HTTPS in un linguaggio di scripting (JavaScript) Ajax Engine come client HTTP Opzioni per impostare metodo/parametri/header Risposta gestita dal linguaggio stesso Funzione di callback Varie versioni, problemi di compatibilità Prima di divenire standard, era una soluzione proprietaria Microsoft XMLHttpRequest vs. ActiveXObject 12
Compatibilità XHR function newxmlhttprequest() { var request = null; var browser = navigator.useragent.touppercase(); if(typeof(xmlhttprequest) == "function" typeof(xmlhttprequest) == "object") { request = new XMLHttpRequest(); } else if(window.activexobject && browserutente.indexof("msie 4") < 0) { if(browser.indexof("msie 5") < 0) { request = new ActiveXObject("Msxml2.XMLHTTP"); } else { request = new ActiveXObject("Microsoft.XMLHTTP"); } } return request; } 13
Preparare una richiesta Metodi request.open(method, url, asynchronous); Il metodo è solitamente GET o POST La url funziona come il target di una form...... ma se il metodo è GET, vanno aggiunti i parametri! Si può scegliere se aspettare o meno la risposta Con asynchronous=true (default) si usa una callback Header request.setrequestheader(name, value); Utile ad esempio se il metodo è POST Content-Type application/x-www-form-urlencoded; charset=utf-8 14
Eventi e callback Se la richiesta è asincrona, serve callback function per gestire gli eventi (come in JavaScript) onreadystatechange event listener Property readystate per lo stato corrente della richiesta readystate=0: richiesta creata, ma ancora niente open() readystate=1: open(), ma ancora niente send() readystate=2: dopo send() readystate=3: server contattato, ma ancora nessuna risposta readystate=4: risposta ottenuta e disponibile Unico valore implementato ovunque è 4 Unico stato strettamente necessario Risposta gestita qui 15
Mandare la richiesta Una volta preparata, si spedisce la richiesta request.send(content); GET: content è il payload da allegare null in caso di GET Il Content-Type va specificato prima (ad es. POST ) request.send(null); POST: request.setrequestheader('content-type', 'application/x-www-form-urlencoded'); request.send('var1=' + value1 + '&var2=' + value2); 16
Gestire la risposta La property status fornisce il codice di risposta Ad es. 200 come successo La risposta è solitamente XML request.responsexml Contiene l'oggetto XML della risposta (DOM) Navigabile con i soliti metodi JavaScript Può essere altro (testo, JSON, ecc.) request.responsetext Contiene la risposta come testo semplice Sta all'applicazione gestirlo Ad es. Iniettare il testo in HTML 17
Un'alternativa a XML: JSON JavaScript Object Notation (JSON) Serializzazione di oggetti complessi Formato di interscambio di dati Non un linguaggio di markup general purpose Concepito per essere leggero Alternativa ad XML in chiamate Ajax Molto semplice e human-readable Supporto immediato in JavaScript Parsing mediante eval() Accesso e manipolazione come oggetti classici 18
Esempio JSON Un oggetto JSON { "nome" : "Ciccio", "cognome" : "Pernacchio", "anni" : 46, "telefono": ["328/1234567","081/9876543"] } In JavaScript var JSON = {cognome: "Pippozzo"; telefono: ["339/5656565","02/1357924"]} var dati = eval("(" + JSON + ")"); alert('nome: '+dati.cognome+' Cellulare: '+dati.telefono[1]); 19
Il problema delle due connessioni HTTP/1.1 di default prevede al massimo due connessioni verso lo stesso server In RFC 2616 è obbligatorio per i browser Erano 4 in HTTP/1.0 (ma niente pipelining...) Molto è cambiato da allora (1999!) Multi-tab browsing, Mashup, Comet,..., Ajax! I browser permettono di cambiare quel valore...... ma le applicazioni Ajax non possono fidarsi! Necessario gestire questo limite in modo opportuno Farsi bastare le due connessioni Mettere contenuto su host diversi 20
Librerie Ajax Come per JavaScript, varie librerie Problemi di compatibilità Semplificazione richieste/risposte Gestione a grana fine degli eventi... Librerie e framework JQuery (http://jquery.com) Script.aculo.us (http://script.aculo.us/) GWT (http://code.google.com/webtoolkit/) 21
Ajax in jquery Intera suite di funzionalità Ajax Wrapper per preparare e mandare richieste.ajax(),.get(),.post(),... Vari handler per gestire eventi diversi.ajaxstart(),.ajaxerror(),.ajaxsuccess(),... Differenziazione tra eventi locali e globali.ajaxcomplete() vs.complete() Possibile iniettare direttamente risposta in HTML.load() Chaining di chiamate su oggetti jquery Supporto nativo JSON 22
Google Web Toolkit (GWT) Intero framework per applicazioni Ajax Open source Applicazioni scritte in Java API che mascherano funzionalità complesse Manipolazioni DOM Gestione XHR Internazionalizzazione Il compilatore si occupa del resto JavaScript ad-hoc, ottimizzato e cross platform Formattazione messaggi di scambio (RPC) 23
Domande? 24