Perché Ajax è importante, oggi
25 gennaio 2006
Iacopo Sassarini, Tommaso Torti

© 2006 Quinary SpA
Contenuti
• Alcune applicazioni interessanti
• Che cosa è Ajax
• Perché oggi?
• Il “core Ajax”
• I principali problemi delle applicazioni Ajax
• Alcuni scenari di utilizzo di Ajax
• Coffee break
• Ajax Patterns (una selezione)
• Toolkits e Frameworks
• Ajax Security
• Strumenti per lo sviluppo
• Evoluzioni della tecnologia Ajax
• Cosa offre Quinary, oggi: AjaxScope
• Sviluppare con DWR

© 2006 Quinary SpA
Alcune applicazioni interessanti
• WebMail: GMail
• Mappe: Google Maps, Mapquest
• Search Engines: Google Suggest, Yahoo Instant Search
• RSS Aggregators: Google RSS Reader
• Photo sharing: Flickr
• Desktops virtuali: Netvibes, Google IG, Windows Live, Protopage
• Condivisione documenti: Writely
• Ajax APIs: Salesforce Ajax Toolkit, Google Maps APIs

© 2006 Quinary SpA
Che cosa è Ajax

© 2006 Quinary SpA
Cos’è Ajax
• Acronimo “Asynchronous Javascript and XML”
• Non identifica propriamente una nuova tecnologia, ma piuttosto un tecnica di
utilizzo un insieme di tecnologie consolidate (XHTML, CSS, Javascript, XML)
per la creazione in interfacce web di nuova generazione, ricche, dinamiche,
usabili.
• E’ oggi una delle possibili risposte tecnologiche all’esigenza di superare o
semplicemente arricchire il paradigma document-request su cui è fondato il
“Web 1.0”.

© 2006 Quinary SpA
Alternative ad Ajax
• XUL: linguaggio di markup per la definizione di GUI dinamiche. E’ parte del
progetto Mozilla. Attualmente è compatibile solo con i browser della famiglia
Mozilla
• XAML: è parte integrante del progetto Avalon (UI di prossima generazione
Microsoft). E’ una tecnologia proprietaria Microsoft.
• SVG: linguaggio per descrivere grafica vettoriale ed ambedding di grafica
raster. Interoperabile con Javascript. W3C recommendation. Richiede skills
piuttosto difficili da reperire e le attuali implementazioni non sono
completamente mature
• Java Applets
• Macromedia Flash Applets

© 2006 Quinary SpA
Ajax ed alternative: tabella comparativa
XUL XAML SVG Flash Applets Ajax
Desktop-like UI * * * * * *
Platform Independance * * *
Vendor Independance *
Skill Set Transferrance * *
http://www.ajaxinfo.com/

© 2006 Quinary SpA
Ajax Client Model
• Superamento dell’ impostazione document-request alla base del Web 1.0
• Completo disaccoppiamento tra rendering e scambio di dati
• Possibilità di interazioni multiple ed asincrone con il server all’interno
della medesima pagina
• I browsers si evolvono da rendering engine a piattaforme che
implementano API standard per il deploy di applicazioni complesse ed
altamente interattive
• Mozilla Firefox è oggi il prototipo dei browsers di nuova generazione

© 2006 Quinary SpA
Server
Web/App Server
Backend services
Browser
HTML Page
Form
Server
Web/App Server
Backend services
Browser
HTML Page
Ajax Engine
Formsubmit
Loadnuovapagina
GUIevent
Datarequest
GUIupdate
response

© 2006 Quinary SpA
Tecnologie
• XHTML: struttura GUI
• CSS: presentation, stili
• Javascript: logica applicativa client-side
• Javascript DOM binding: accesso in lettura-scrittura al document
model della pagina
• XMLHttpRequest, IFrame, Applet, Flash: bridge tra client e server
• Servizi server side (Java, PHP, ASP,…): business logic e storage
• XML, JSON: dati e trasporto

© 2006 Quinary SpA
XMLHttpRequest IFrame Applet …
Remoting Toolkit – Client Side
DWR, JSON-RPC, dojo.bind, BackBase…
GUI Toolkit
Dojo, BackBase, Scriptaculous, SmartClient,…
Javascript
DOMbinding
Remoting Toolkit – Server Side
Java PHP ASP Ruby …
Trasporto HTTP(S)

© 2006 Quinary SpA
Perché oggi?

© 2006 Quinary SpA
• Applet Java e LiveConnect API
• Una applet java nascosta gestisce l’interfaccia HTTP con le componenti
server, espone i propri metodi pubblici e comunica col Javascript engine
tramite LiveConnect
• Event handlers Javascript (es. onclick) intercettano azioni dell’utente e
chiamano funzioni Javascript sul client, che a loro volta invocano metodi
sulla applet
• L’ applet invoca metodi remoti sul server
• Il server ritorna codice Javascript che aggiorna lo stato della pagina
• L’ applet invoca l’ eval() del codice Javascript:
<APPLET ... MAYSCRIPT>
JSObject.getWindow(this).eval(jsCode);

© 2006 Quinary SpA
HTML
Javascript Client Logic
Applet
LiveConnect Java-Javascript bridge
Server Components
Browser
pagetransitions
HTMLpages
in-pageactions
Javascriptcode

© 2006 Quinary SpA
• Impossibile sviluppare applicazioni cross-browser a causa della scadente
implementazione DHTML sui browser Netscape.
• Non completa gestione degli aspetti di GUI perché le tecnologie DHTML e
CSS non erano ancora del tutto mature/complete
• Problemi di freezing e bugs con alcune versioni della JVM Microsoft
• Scarsa confidenza nella possibilità di realizzare applicazioni realmente
affidabili e durevoli nel tempo
Però….
• Eresia: MSIE 4.0 era un browser all’avanguardia e per di più documentato
in modo eccellente

© 2006 Quinary SpA
• 1998: CSS Level 2 W3C recommendation
• 2000: XHTML W3C recommendation
• 2000: ECMA-262 Edition 4 (es. regular expressions, try/catch…)
• 2000: DOM Level 2 ed ECMAScript binding W3 recommendation
• 2000: XMLHttpRequest implementato in MSIE5
• 2002: Mozilla 1.0
• 2002: Phoenix browser (precursore di Firefox)
• 2003: Inizio della fine del dominio MSIE ?
• 2004: Firefox 1.0
• 2004: “Altri” (Opera, Safari) conquistano quote significative di utenti
• Febbraio 2005: J.J. Garrett pubblica “Ajax: A new approach to web
applications”

© 2006 Quinary SpA

© 2006 Quinary SpA
Conseguenze
• Il 2003 segna un’inversione di tendenza: MSIE comincia a perdere utenti a
vantaggio dei browsers Mozilla
• Altri players entrano in gioco
Conseguenze:
• Chi realizza applicazioni web deve far riferimento al comune denominatore di
tecnologie standard per massimizzare la compatibilità
• Chi fa i browser è costretto ad implementare gli standard in modo robusto se
vuole avere diffusione del proprio prodotto
• Oggi non capita quasi più di andare sul sito e doverlo visualizzare per forza con
MSIE, ma solo un anno fa….

© 2006 Quinary SpA
Il “core” Ajax

© 2006 Quinary SpA
XMLHttpRequest IFrame Applet …
Remoting Toolkit – Client Side
DWR, JSON-RPC, dojo.bind, BackBase…
GUI Toolkit
Dojo, BackBase, Scriptaculous, SmartClient…
Javascript
DOMBinding
Remoting Toolkit – Server Side
Java PHP ASP Ruby …
Trasporto HTTP(S)

© 2006 Quinary SpA
Il “core” Ajax.

© 2006 Quinary SpA
Ajax Core: Javascript
Javascript ha una pessima reputazione…
• Implementazioni bacate nei browsers
• Codice scritto male, duplicato, mischiato all’HTML
• Usato principalmente per “web hacking”
• Usato da “non programmatori”
• Mancanza di tools per sviluppo, debug, test
Però …
• E’ un linguaggio estremamente potente ed estendibile
• Supporta Object Orientation tramite prototyping
• Il codice può essere strutturato e reso manutenibile
• Esistono librerie, componenti riutilizzabili, frameworks
• Stanno cominciando ad essere strumenti di sviluppo

© 2006 Quinary SpA
Il “core” Ajax

© 2006 Quinary SpA
• XMLHttpRequest è un HTTP UserAgent Javascript. Supporta i
metodi standard HTTP ed il protocollo HTTPS.
• L’introduzione di questo oggetto nelle librerie Javascript dei
browsers ha contribuito al consolidamento del modello del client
Ajax
• Ha reso più strutturato credibile l’intero approccio fornendo
fondamenta documentate, quasi cross-browser

© 2006 Quinary SpA
XMLHttpRequest non è un oggetto standard
• Introdotto in MSIE 5.0 come componente ActiveX
• Implementato a partire da Mozilla 1.0, Safari 1.2, Opera 8.0
• Non esiste alcuno standard che ne definisce il comportamento, è divenuto
uno standard di fatto.
• DOM Level 3 (raccomandazione W3C 2004) include funzionalità simili (load/
save) ed è probabilmente destinato a sostituire a lungo termine l’utilizzo di
XMLHttpRequest
• “La maggior parte delle pagine ben progettate che usano XMLHTTP sono
destinate a nascondere le implementazioni dell'oggetto XMLHttpRequest
incapsulando la sua invocazione con una funzione Javascript” (Wikipedia)

© 2006 Quinary SpA
• Occorre scrivere codice che tenga conto delle diverse implementazioni nei
browsers
function createXMLHttpRequest(){
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch (e) {}
try {return new ActiveXObject("Microsoft.XMLHTTP");}
catch (e) {}
try {return new XMLHttpRequest();}
catch(e) {}
return null;
}
...
var client = createXMLHttpRequest();

© 2006 Quinary SpA
Usare XMLHttpRequest in modo sincrono
• XMLHttpRequest può essere utilizzato in modo sincrono
• L’esecuzione rimane bloccata sulla chiamata send(null) fino a quando
l’intero stream di risposta è stato letto
• Si tratta di un utilizzo di scarsa utilità in applicazioni reali
var client = createXMLHttpRequest();
client.open(“GET”, “data.xml”, false);
client.send(null);
var serverResponse = client.responseText;
Modalità sincrona

© 2006 Quinary SpA
var client = createXMLHttpRequest();
client.open(“GET”, “data.xml”, true);
client.onreadystatechange = clientChanged;
client.send(null);
function clientChanged(){
if (client.readyState == 0){}
…
}
• L’utilizzo asincrono richiede la registrazione di una funzione di callback
• La funzione di callback viene chiamata ad ogni cambio di stato dell’oggetto

© 2006 Quinary SpA
UNINITIALIZED
(0)
LOADING
(1)
LOADED
(2)
INTERACTIVE
(3)
COMPLETED
(4)
send()
HTTP Status
received
First chunk of data
received
Next chunk of data
received
Last chunk of data
received
Last chunk of data
received

© 2006 Quinary SpA
XMLHttpRequest: metodi
Metodo Descrizione
open("method", "URL"[, asyncFlag[,"userName"[,
"password"]]])
Inizializza la richiesta.
asynchFlag controlla il
carattere asincrono o meno;
username/password sono
usati per la basic
authentication.
send(content) Invia la richiesta (content =
POST data)
abort() Interrompe la richiesta
getAllResponseHeaders() Restituisce una mappa degli
headers
getResponseHeader("header") Restituisce uno specifico
header
setRequestHeader("label", "value") Imposta header della
request

© 2006 Quinary SpA
XMLHttpRequest: proprietà principali
Proprietà Descrizione
onReadyStateChange Imposta la funzione di callback
readyState Ritorna lo stato:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
responseText Contenuto della response, plain text
responseXML DOM XML della response
status Valore numerico della stato HTTP
statusText Descrizione dello stato HTTP

© 2006 Quinary SpA
• Generazione di contenuti parziali
server side
• Inserimento del contenuto negli
elementi della pagina tramite
innerHTML
• Il server ritorna codice Javascript
• Il client effettua un eval() del
codice restituito
Ritornare dati Ritornare HTML Ritornare Javascript
interfacciare direttamente
webservices
Il client Javascript usa
responseXML per accedere ai
dati (DOM/E4X)
JSON

© 2006 Quinary SpA
Il “core” Ajax

© 2006 Quinary SpA
• Il Document Object Model è una interfaccia platform-independent e
language-independent per consentire ai programmi di accedere e modificare
contenuti, struttura, stili di documenti XML
• DOM fornisce un insieme di oggetti standard per rappresentare documenti
HTML ed XML, ed un modello con cui questi oggetti possono essere
acceduti e combinati tra loro
• Per Javascript DOM binding si intende l’effettiva implementazione
dell’interfaccia DOM nell’engine Javascript implementato nei browsers
• Si tratta di una standardizzazione del DHTML

© 2006 Quinary SpA
• DOM Level 1 (Core): definisce le funzionalità di base per la navigazione e
l’alterazione della struttura e del contenuto di documenti XML ed HTML
• DOM Level 2: definisce l’object model per gli stylesheets e funzionalità per
manipolare le informazioni di stile legate ad un documento. Definisce inoltre
un event model e fornisce supporto per namespaces XML
• DOM Level 3 (draft): definisce le interfacce per load-save, validazione,
formattazione del contenuto, estensione dell’event model con la definizione
di event groups.
• I browsers di ultima generazione sono compatibili con il DOM Level 2

© 2006 Quinary SpA
• Definisce un generico sistema di eventi che consente la registrazione di
event handlers, descrive il flusso di eventi secondo una struttura gerarchica,
fornisce informazioni contestuali rispetto a ciascun evento
• Definisce un sottoinsieme comune tra i vari event systems indipendenti
introdotti nei browsers della generazione DOM Level 0, al fine di garantire la
massima compatibilità degli scripts

© 2006 Quinary SpA
• UI Events: eventi relativi alla user interface. Sono generati in seguito
all’interazione per mezzo di un dispositivo esterno (tastiera, mouse…)
• UI Logical Events: sono eventi di alto livello, indipendenti dal dispositivo, ad
esempio cambio del focus, modifica di una selezione ecc.
• Mutation Events: causati da una qualsiasi azione che cambia la struttura del
documento
• Capturing: processo per mezzo del quale un evento viene gestito da uno
degli ancestors prima che venga gestito dal target effettivo
• Bubbling: processo per mezzo del quale un evento viene propagato agli
ancestors dopo essere stato gestito dal target
• Cancelable: indica la possibilità di cancellare le azioni di default in seguito
all’handling dell’evento stesso

© 2006 Quinary SpA
Netscape ed Explorer avevano una
gestione opposta del meccanismo di
cattura degli eventi (IE intercettava nella
fase di “bubble”, Netscape in “capture”)
Il flusso DOM definisce un meccanismo
generico di propagazione degli eventi
attraverso la gerarchia dei containers della
GUI
Un evento può essere intercettato da
qualunque componente coinvolto sia nella
fase di “capture”, sia nella fase di “bubble”

© 2006 Quinary SpA
I principali problemi delle applicazioni Ajax

© 2006 Quinary SpA
• Circa il 10% degli utenti della rete ha il browser con Javascript disabilitato
http://www.w3schools.com/browsers/browsers_stats.asp

© 2006 Quinary SpA
Unload accidentale poco controllabile
• Un click sbagliato sul bottone di chiusura del browser, di reload della pagina,
dei bottoni di navigazione provoca l’unload della pagina e la perdita del
contesto
• L’evento di unload non è cancellabile.
• Su alcuni browser l’evento può essere intercettato ed è possibile chiedere
conferma per il salvataggio dei dati (ma non per l’annullamento della
chiusura della pagina)
• Opera non consente di intercettare l’evento di unload sulla chiusura della
finestra o sui tasti Back/Forward.
• IE e Mozilla supportano l’evento onbeforeunload e la relativa visualizzazione
di un dialog box OK/Cancel per confermare la chiusura della pagina. Questo
comportamento tuttavia non è definito in alcuno standard

© 2006 Quinary SpA
Bottoni Back/Forward
• I bottoni Back/Forward possono perdere significato in una applicazione Ajax,
dove si hanno stati di una singola GUI in luogo di diversi documenti
• Alcuni frameworks e librerie consentono di gestire un mapping con
funzionalità simili ad Undo/Redo, es. DOJO, BackBase, RSH (Really Simple
History)
• Non esiste tuttavia soluzione generale al problema, la gestione dei tasti B/F
deve essere progettata di volta in volta
• Non è un problema esclusivamente Ajax, e non sempre è necessariamente
un problema critico. Anche nei siti “normali” capita abbastanza spesso di
avere comportamenti non prevedibili facendo Back…

© 2006 Quinary SpA
Bookmarking
• La funzionalità di bookmarking della URL può dare risultati non predicibili, a
meno di non essere in grado di associare URL diverse a stati diversi e,
successivamente, ricostruire lo stato completo a partire dalla URL
• Anche in questo caso non è un problema esclusivamente Ajax
• DOJO, RSH (Real Simple History) ed altre librerie forniscono API per
associare informazioni di stato ad URL diverse usando la hash-part della
URL
• Per il salvataggio dello stato si possono usare anche meccanismi di local
storage (descritti in seguito)
• In ogni caso la gestione del bookmarking è onerosa e delicata sia a livello di
progettazione sia a livello di sviluppo

© 2006 Quinary SpA
Alcuni scenari di utilizzo di Ajax

© 2006 Quinary SpA
• Ajax consente l’integrazione ed aggregazione di servizi direttamente a
livello del client, demandando parte del meccanismo di integrazione al
browser.
• Può essere utile per alleggerire in parte l’erogazione di servizi da parte del
server.
• Ciascun servizio aggregato lato client mantiene le proprie logiche di
aggiornamento senza impattare il resto della pagina
• Possibili applicazioni: client side portlets e personalizzazione, aggregatori
RSS, dashboards, integrazione di contenuti locali con servizi esterni
(mappe, traduzioni, motori di ricerca)

© 2006 Quinary SpA
• Integrazione client side tra Google Maps ed un servizio di geocodifica degli
indirizzi italiani: esempio.
Browser
Server
GeocodificaMappe
Server
Browser
GeocodificaMappe
Web application “classica” Versione Ajax

© 2006 Quinary SpA
Nuove forme di erogazione di pubblicità
• E’ un caso particolare dell’integrazione di servizi client side, dove uno
dei servizi è un AD server.
• L’erogazione di pubblicità può essere virtualmente innescata da una
qualsiasi azione che l’utente effettua sulla GUI
• Links e contenuti pubblicitari possono essere visualizzati in seguito a:
• mouse over su qualsiasi nodo del DOM
• selezione o click su una parte di contenuto
• contenuti parziali inseriti in forms
• movimento del mouse all’interno di una mappa
• ecc …

© 2006 Quinary SpA
GUI per data entry
• Applicazioni che richiedono data entry complesso ed estremamente
strutturato (es. ERP) possono beneficiare di GUI Ajax
• I dati inseriti possono essere validati (server-side!) con il livello di
granularità più adatto alle varie situazioni senza fare submit completo
delle forms
• Le UI possono essere rese “keyboard-driven”
• Esistono frameworks (es. BackBase) che includono widgets (tabelle,
liste, tree views, ecc.) con funzionalità sofisticate e ne facilitano il
binding con i dati server side

© 2006 Quinary SpA
Feedbacks sulla user experience
• E’ possibile raccogliere ed inviare al server ogni tipo di informazione su
come gli utenti utilizzano l’applicazione
• Si possono raccogliere statistiche su quali elementi della pagina gli utenti si
soffermano maggiormente (es. tempi di permanenza del mouse su
particolari regioni del contenuto, clicks, selezioni di parole o frasi, ecc)
• Si possono raccogliere informazioni su particolari configurazioni dei
browsers (script, banner, popup blocking…) ed intraprendere azioni ad hoc
• Si possono misurare accuratamente i tempi di permanenza su ciascuna
pagina e di download dei contenuti

© 2006 Quinary SpA
Coffee Break

© 2006 Quinary SpA
Ajax Patterns

© 2006 Quinary SpA
• Lo sviluppo Ajax ripropone una serie di problemi ben noti a livello di
architettura, sviluppo, gestione delle risorse in un contesto tecnologico
sostanzialmente nuovo
• L’obiettivo è quello di fornire linee guida per la soluzione di problemi ricorrenti in
un determinato contesto tecnologico
• Il sito http://ajaxpatterns.org raccoglie una collezione molto estesa di patterns
Ajax
• Qui viene analizzata solo una piccola selezione di patterns particolarmente
significativi.

© 2006 Quinary SpA
Ajax Patterns – On-demand Javascript
• DOM-Based
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "upload.js";
head.appendChild(script)
• XMLHttpRequest-Based
script = xmlHttpRequestDownload('script.js');
eval(script)

© 2006 Quinary SpA
Ajax Patterns – Tasks scheduling
// one time action
function expireTimer() {
alert(“Timeout expired!”);
}
expiryTimer = setTimeout(expireTimer, 5000);
// repeated actions
function repeatedAction() {
alert(“Interval expired!”);
}
expiryInterval = setInterval(repeatedAction, 5000);
• Esempio: salvare periodicamente versioni drafts dei contenuti in modo da
limitare i danni in caso di unload accidentale (es. autosave drafts GMail e
Writely)

© 2006 Quinary SpA
Ajax Patterns – Browser side XSLT
• Ci sono frameworks open-source e cross browser per fare questo lavoro
• Google AjaXSLT (http://goog-ajaxslt.sourceforge.net/)
• Sarissa (http://sarissa.sourceforge.net/)
// Sarissa
var xsltProc = new XSLTProcessor();
xsltProc.importStylesheet(xsltDoc);
var htmlDoc = xsltProc.transformToDocument(xml);
var htmlString = Sarissa.serialize(htmlDoc);
document.getElementById(“aNode”).innerHTML = htmlString;

© 2006 Quinary SpA
Ajax Patterns – Ottimizzazione performance
• Client-side caching
• Guesstimate: invece che accedere a dati in tempo reale fare stime significative
(es. GMail storage counter)
• Submission buffering: mantenere i dati temporanei in un buffer ed inviarli al
server ad intervalli di tempo stabiliti (es. Google Suggest)
• Multistage download: suddividere i contenuti da downloadare in più parti
indipendenti in modo da poter visualizzare immediatamente i primi dati che
arrivano (es. Google Maps).
• Predictive Fetch: anticipare possibili azioni dell’utente ed interagire col server in
anticipo per recuperare i dati necessari (es. Google Maps).

© 2006 Quinary SpA
Ajax Patterns – Cross domain proxy
Browser
Application
Server
External
Service
/remote/service1/?id=1 /getData.jsp?id=1
/getData.jsp?id=1

© 2006 Quinary SpA
Ajax Patterns: Richer Plugin
• Applet Java
• Flash (esempio: Flickr Organizer)
• Accesso a files locali, storage locale
• Multimedia e grafica
• Accesso a risorse hardware (stampante, joystick)
• Interazioni con OS

© 2006 Quinary SpA
Ajax Patterns: Local Storage
• Cookies: sono la tecnica teoricamente più standard ma è una soluzione
altamente inefficiente e limitata (massimo 4K di dati per cookie)
• IE5 supporta una API per fare storage locale dello stato. La soluzione è
proprietaria e ha limiti di dimensione (64K)
• AMASS (Ajax Massive Storage System): è un sistema implementato in
Flash. Sotto i 100K non necessita autorizzazione di security. Funziona
serializzando oggetti Javascript (ma non oggetti nativi)
• Embedded SQL DB: alla ApacheCon 2005 è stato presentato un prototipo
che utilizza Derby (erede di Cloudscape, ora parte del progetto Apache)
come DB embedded in una applet Java salvare dati localmente in una
applicazione Ajax

© 2006 Quinary SpA
Ajax Toolkits e Frameworks

© 2006 Quinary SpA
XMLHttpRequest IFrame Applet …
Remoting Toolkit – Client Side
DWR, JSON-RPC, dojo.bind, BackBase…
GUI Toolkit
Dojo, BackBase, Scriptaculous, SmartClient…
Javascript
DOMbinding
Remoting Toolkit – Server Side
Java PHP ASP Ruby …
Trasporto HTTP(S)

© 2006 Quinary SpA
• API di alto livello e cross-browser per la gestione dei componenti standard
della GUI HTML e dei relativi stili ed effetti visuali
• Includono emulazioni dei controlli tipici delle applicazioni desktop (tabbed
panes, sliders, spinners, finestre MDI, etc.)
• Offrono implementazioni del Drag&Drop
• Forniscono librerie di widgets con comportamenti complessi (image
slideshows, rich text editors, etc.)
• Possono consentire lo sviluppo di widgets customizzati estendendo le
librerie di widgets standard
• Possono definire una diversa interfaccia sull’event system

© 2006 Quinary SpA
• Libreria di effetti visuali e widgets (liste ordinabili, sliders) basata su
Prototype
• Fornisce una implementazione di Drag&Drop
• Semplice anche per generare effetti ed animazioni complesse
• E’ attivamente supportata e sviluppata
• http://script.aculo.us/
Prototype
• Libreria Javascript general-purpose che fornisce anche una astrazione Ajax
cross browser
• E’ building block usato da diverse librerie GUI
• http://prototype.conio.net/

© 2006 Quinary SpA
<head>
<script src="/javascripts/prototype.js" type="text/javascript“/>
<script src="/javascripts/scriptaculous.js" type="text/javascript“/>
<script type="text/javascript" language="javascript">
// <![CDATA[
new Effect.Appear('element_id');
// ]]>
</script>
</head>
<html>
. . .
<div onclick="new Effect.SwitchOff(this)">
Click here if you've seen enough.
</div>
</html>
• Esempi di effetti

© 2006 Quinary SpA
• Potente sistema di packages, consente di downloadare lato
client on demand solo le librerie necessarie
• Widgets predefiniti customizzabili ed estendibili (es.
RichTextEditor, Image Slideshow)
• Event system generico, potente e “non intrusivo” nell’HTML
• Widget prototyping consente di definire componenti GUI
riutilizzabili a partire dagli widgets standard
• Compressione del codice per minimizzare il tempo di download
• Open Source
• http://dojotoolkit.org/

© 2006 Quinary SpA
<head>
<script src=“dojo.js" type="text/javascript“/>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.Editor");
</script>
</head>
<html>
<!-- Creazione editor DOJO -->
<div class=“dojo-Editor”>
<h1>Section title</h1>
<ul>
<li>item1</i>
<li>item2</i>
<ul>
</div>
</html>
• Esempi

© 2006 Quinary SpA
• BackBase definisce un livello di astrazione sopra l’XHTML.
• Le GUI sono definite in modo dichiarativo in BXML (BackBase XML)
• Lato client il BackBase Presentation Content interpreta il BXML e genera la
GUI in XHTML
• Include una libreria di controlli estesa e di alta qualità grafica
• Fornisce componenti server-side (remotizzazione)
• Molto potente ma anche esigente in termini di risorse ed in termini di
compatibilità browsers
• E’ un prodotto commerciale con licenza basata su numero di CPU server
• Esiste una edizione community gratuita
• Esempi
• http://www.backbase.com/

© 2006 Quinary SpA
XMLHttpRequest IFrame Applet …
Remoting Toolkit – Client Side
DWR, JSON-RPC, dojo bind, BackBase…
GUI Toolkit
Dojo, BackBase, Scriptaculous, SmartClient…
Javascript
DOMbinding
Remoting Toolkit – Server Side
Java PHP ASP Ruby …
Trasporto HTTP(S)

© 2006 Quinary SpA
Remoting Toolkits
• Forniscono API di alto livello e cross-browser per invocare chiamate remote
via Javascript
• Nascondono l’implementazione di basso livello (XMLHttpRequest, IFrame
ecc…)
• Possono fornire servizi di marshalling/unmarshalling tra dati e strutture sia
lato browser sia lato server, con conseguente gestione del mapping tra data
types client e server
• Possono fornire servizi di proxying e remote method invocation
• Implementano meccanismi di ottimizzazione (caching, queueing, batch
processing)

© 2006 Quinary SpA
DWR (Direct Web Remoting)
• Consente di creare in modo trasparente proxy Javascript di oggetti server
side (Java)
• Comprende sia una libreria client che una libreria server
• Richiede che la parte server sia Java. La componente server è una Servet
• Il mapping tra oggetti client ed oggetti server è definito in modo dichiarativo
in un descrittore XML (dwr.xml)
• Ogni chiamata ad un metodo sul proxy invoca una corrispondente chiamata
remota.
• Implementa un meccanismo di chiamata multipla in batch per ottimizzare
l’utilizzo delle risorse
• Consente di gestire lo scoping degli oggetti lato server (pagina, sessione)
• Include un utile strumento per il debug
• http://getahead.ltd.uk/dwr/

© 2006 Quinary SpA
• JSON (Javascript Object Notation) è un formato per lo scambio di
dati, alternativo all’XML e molto più leggero da processare da parte
dei comuni linguaggi di programmazione
• Non richiede parsing Javascript ad hoc (JSON è un sottoinsieme
dell’ECMA 262)
[{
“name”: “Dion Almaer”,
“age” : 12,
“pets”: [“sandy”, “fluffy”]
},
{
“name”: “Ben Galbraith”,
“age” : 11,
}]

© 2006 Quinary SpA
• JSON-RPC definisce una specifica di interazione equivalente ad XML-RPC
• Utilizza JSON come trasporto
• Esistono implementazioni nei principali linguaggi. (per Java esiste JSON-
RPC-Java)
POST /JSON-RPC HTTP/1.1
User-Agent: Mozilla/4.0
Content-Type: text/plain
Content-length: 59
{
“method”: “examples.getStateName”,
“params”: [ 41 ]
}

© 2006 Quinary SpA
• Marshalling/unmarshalling di:
• Tipi primitivi (int, long, short, byte, boolean, char, float, double)
• Numbers (Float, Integer, etc...), Strings, Char and Byte arrays
• Java Beans (in generale ogni Object con getters e setters)
• Arrays di tipi primitivi, Strings, Numbers, Collections and Java Beans
• Exceptions (ma non viene conservato il tipo di eccezione)
• Collezioni concrete ed astratte:
• List, ArrayList, LinkedList, Vector
• Map, HashMap, TreeMap, LinkedHashMap
• Set, HashSet, TreeSet, LinkedHashSet
• Dictionary, Hashtable
• Combinazioni arbitrarie di questi tipi

© 2006 Quinary SpA
• E’ un sottoinsieme del framework DOJO
• E’ una generica API asincrona per effettuare chiamate remote
che incapsula diversi layers di trasporto (IFrames,
XMLHttpRequest,..)
• L’API accetta un singolo oggetto Javascript che descrive la
configurazione della chiamata (URL, headers, funzioni di
callback, condizioni di errore)
• Funzionalità per intercettare il click del bottone Back/Forward ed
invocare azioni ad-hoc
• http://dojotoolkit.org/

© 2006 Quinary SpA
dojo.io.bind, un esempio
var sampleFormNode = document.getElementById("formToSubmit");
dojo.io.bind({
formNode: sampleFormNode
url: "http://foo.bar.com/processForm.cgi",
load: function(type, evaldObj){
// hide the form when we hear back that it submitted
// successfully
sampleFormNode.style.display = "none"; },
backButton: function(){
// ...and then when the user hits
// "back", re-show the form
sampleFormNode.style.display = ""; },
forwardButton: function(){
// and if they hit "forward" before making
//another request, this happens:
sampleFormNode.style.display = "none";},
}
);
• Esempio di submit di una form (sampleFormNode) e meccanismo di gestione
dei bottoni Back/Forward

© 2006 Quinary SpA
Ajax Security

© 2006 Quinary SpA
• Il codice Javascript è eseguito all’interno di una sandbox che impedisce
l’apertura di connessioni verso hosts diversi da quello di origine (analoga alla
policy della sandbox delle JVM nei browsers)
• IFrames possono essere istruiti programmaticamente in Javascript per
caricare dati da hosts diversi, ma la sandbox impedisce che contenuti di
IFrames di hosts diversi possano essere acceduti/alterati via Javascript
Private
network
Browser
Public
internet
XMLHttpRequest.open(“GET”, “http://192.168.0.1”)

© 2006 Quinary SpA
URL Note
http://www.mysite.com/script1.js
http://www.mysite.com/script2.js
OK
http://www.mysite.com:8080/
script1.js
http://www.mysite.com/script2.js
KO Il numero di porta non coincide
https://www.mysite.com/script1.js
http://www.mysite.com/script2.js
KO Protocollo differente
http://www.mysite.com/script1.js
http://192.168.0.1/script2.js
KO Anche se gli IP coincidono…
http://www1.mysite.com/script1.js
http://www2.mysite.com/script2.js
dipende
…
OK se entrambi gli script
troncano il dominio:
document.domain=“mysite.com”;

© 2006 Quinary SpA
• Proxy locale del servizio remoto (discusso nei patterns)
oppure:
• Interazione con il security manager del browser
• Internet Explorer: chiede conferma durante la prima connessione verso la
risorsa remota. Le successive connessioni sono effettuate senza conferma
• Mozilla: è necessario scrivere codice che interagisca con l’oggetto
netscape.security.PrivilegeManager, che tuttavia per default non è esposto
al Javascript (occorre impostare a true il valore della variabile di
configurazione signed.applets.codebase_principal_support)
Oppure ancora:
• Codice client signed, che tuttavia è un’opzione disponibile solo per i
browsers Mozilla

© 2006 Quinary SpA
• Non esiste attualmente alcuna API standardizzata per
interfacciare il security model del browser
• I principali browsers hanno comportamenti estremamente diversi
quando si tratta di accedere a risorse esterne alla sandbox
• La soluzione migliore al momento appare quella del proxying
locale
• Nota: usando le funzionalità di proxying di Apache è possibile
mappare URL locali su servizi remoti in modo molto semplice
ProxyPass /remote/ http://remoteserver.com/

© 2006 Quinary SpA
• Ajax supporta HTTPS (XMLHttpRequest ed IFrames supportano url
“https://”)
…ma c’è un problema…
• La sandbox del browser non consente cross-content e cross-scripting tra
risorse HTTP ed HTTPS
• Quindi anche se HTTPS è richiesto solo per poche transazioni, molte risorse
devono essere scaricate con lo stesso protocollo
• HTTPS richiede encription “on the fly” ed è oneroso in termini di risorse,
dovrebbe essere usato solo ove strettamente necessario
• Esempio: pagina di login di GMail.

© 2006 Quinary SpA
• Può essere una alternativa all’HTTPS in situazioni quali la autenticazione
tramite password
• Esistono librerie Javascript che implementano generatori MD5 (JavaScript
MD5)
1. Client: Richiesta al server di una chiave pubblica random
2. Client: Concatenazione password+chiave pubblica
3. Client: calcolo MD5
4. Client: submit
5. Server: Concatenazione password memorizzata+chiave pubblica
6. Server: calcolo MD5
7. Server: verifica che i digests coincidano
• Questa soluzione ha comunque il problema che la password deve essere
memorizzata in chiaro lato server, quindi deve essere passata in chiaro o in
HTTPS in fase di registrazione

© 2006 Quinary SpA
Strumenti di sviluppo

© 2006 Quinary SpA
IDE ed editors che supportano code completion, ed utilities per Javascript
• JSEclipse Eclipse plugin
• JetBrains Intellij IDEA
Librerie per il logging client side
• Lumberjack (logging + console Javascript)
• Log4js (API simile a Log4j)
Debuggers
• Venkman (estensione di Firefox)
• Microsoft Script Debugger/Microsoft Script Editor
Unit Testing
• Selenium
• JSUnit (port di JUnit in JavaScript)

© 2006 Quinary SpA
• Mozilla Firefox è uno strumento insostituibile per lo sviluppo di applicazioni Ajax
• Esistono numerose estensioni di Firefox realizzate per il supportare lo sviluppo
ed il troubleshooting
• WebDeveloper: validazioni HTML, CSS, Javascript, informazioni su headers e
cookies, ogni tipo di hacking sulla struttura del documento.
• DOM Inspector: visualizzazione struttura del DOM e ricerche XPath
• Selenium Recorder: consente di registrare azioni sulla GUI e di salvarle in
uno script Selenium per il successivo utilizzo in una suite di tests automatici
• ExecuteJs: console per l’esecuzione di codice Javascript nel contesto della
pagina visualizzata
• Venkman: Javascript debugger

© 2006 Quinary SpA
Evoluzioni della tecnologia Ajax

© 2006 Quinary SpA
ECMAScript for XML (E4X)
• Estensione del linguaggio per supportare nativamente l’XML
• Notevole semplificazione rispetto all’API DOM
• Implementato su Firefox 1.5
var order=<order>
<customer>
<firstname>John</firstname>
<lastname>Doe</lastname>
</customer>
<item>
. . .
</item>
</order>
var x = 3;
var fullname =
order.customer firstname + ‘ ‘ +
order.customer.lastname;
Var total = order.item.price *
order.item.quantity;
Creazione DOM: Attraversamento DOM tree:

© 2006 Quinary SpA
• Opera Platform: è un application framework per
lo sviluppo di applicazioni per dispositivi mobili
basata sul Opera Browser
• Opera Application Player: versione estesa del
browser Opera mobile che supporta Ajax ed
abilita le applicazioni Web ad utilizzare funzioni
native dei telefoni (es. messaging, calendar, livelli
batteria e segnale, fotocamera ecc…).
• Application Framework: fornisce utilities ed
elementi GUI predefiniti per facilitare lo sviluppo
di applicazioni

© 2006 Quinary SpA
Cosa offre Quinary, oggi.
AJAXSCOPE
AJAX enrichment program: “ripulisci” il tuo sito con Ajax.
• analisi del vostro sito e identificazione di una sezione o di un servizio
migliorabile con Ajax
• valutazione sulle opportunità di miglioramento ottenibili con Ajax
• supporto tecnologico (scouting e design architetturale)
• deliverable
• proof of concept di applicazione di Ajax alla sezione o al servizio identificato
• piano di intervento per la migrazione ad Ajax
• costo: 5.000 €
• durata: 2/3 settimane

© 2006 Quinary SpA
Contacts
Milan Office - Via Pietrasanta 14
(20141) Milano – Italia
Telefono: + 39 (02) 3090 1500
Rome Office – Via Ercolano Salvi 18
(00143) Roma – Italia
Telefono: + 39 (06) 4340 11
www.quinary.com
info@quinary.com
Informativa Privacy ai sensi del D.Lgs. 196/03.
Quinary SpA, quale Titolare del trattamento dei dati personali, la informa che i
suoi dati verranno trattati nel pieno rispetto del D.Lgs. 196/03.
Il testo completo dell’Informativa ed i riferimenti ai Responsabili sono visionabili
alla sezione Privacy del website: www.quinary.com.

© 2006 Quinary SpA
Approfondimenti

© 2006 Quinary SpA
• Un Object Constructor è una normale funzione Javascript
• Istanze sono create per mezzo dell’operatore new.
• Proprietà assegnate a this sono pubbliche
• Variabili di chiarate con var sono private
function Cat(name){
var priv = “I am a private variable”;
this.name = name;
this.talk = function(){
alert(this.name + " say meeow!");
}
}
cat1 = new Cat("felix");
cat1.talk(); //alerts "felix says meeow!“
cat2 = new Cat("ginger");
cat2.talk() //alerts "ginger says meeow!"

© 2006 Quinary SpA
• In genere i metodi si definiscono via prototyping e non tramite inner function
• L’inner function viene duplicata su ogni nuova istanza quindi occupa memoria
function Cat(name){
this.name = name;
this.talk = function(){
alert(this.name + " say meeow!");
}
}
Cat.prototype.changeName = function(name){
this.name = name;
}
firstCat = new Cat(“Felix");
firstCat.changeName("Bill");
firstCat.talk() //alerts "Bill says meeow!"

© 2006 Quinary SpA
• E’ possibile usare il prototyping per estendere ed arricchire gli oggetti predefiniti
(solo quelli istanziabili via new).
• Esempio: alcuni browsers non supportano shift() ed unshift() per gli arrays….
if(!Array.prototype.shift){
Array.prototype.shift = function(){
firstElement = this[0];
this.reverse();
this.length = Math.max(this.length-1,0);
this.reverse();
return firstElement;
}
}
if(!Array.prototype.unshift){
...
}

© 2006 Quinary SpA
• Javascript supporta ereditarietà per mezzo del prototyping diversamente
dall’usuale ereditarietà basata sul concetto di classe
function Base(){
this.override = function(){alert(“Base::override”);}
this.baseFunction = function(){“Base::baseFunction”}
}
function Derive(){
this.override = function(){alert(“Derive::override”)};
}
Derive.prototype = new Base();
d.override(); // Alerts “Base::baseFunction”
d.baseFunction(); // Alerts “Derive::override”

© 2006 Quinary SpA
• In Javascript ciascun oggetto è rappresentabile come un array associativo
• Gli operatori typeof ed instanceof consentono di determinare a runtime il tipo di un
oggetto
function Cat(name){
this.name = name;
this.talk = function(){
alert(this.name + " say meeow!");
}
}
theCat = new Cat(“miao");
alert(theCat[‘name’]); // miao
alert(typeof theCat[‘talk’]); // function
alert(theCat instanceof Cat); // true