JUG – Ancona Italy AJAX Giovanni Baleani Developer IBS srl

Ajax: ma di cosa parliamo ?

Non parleremo di... Detersivi o squadre di calcio

Si parla di... una nuova tecnica per sviluppare applicazioni web

Definizione di “Ajax” presa da Wikipedia AJAX o Asynchronous JavaScript and XML è una tecnica per sviluppare applicazioni web interattive e dinamiche usando una combinazione di: ● HTML (o XHTML) e CSS per la parte visiva ● DOM (Document Object Model) manipolato attraverso JavaScript per mostrare dinamicamente le informazioni e interagirvi ● L'oggetto XMLHttpRequest per interscambiare e manipolare dati in modo asincrono tra il browser dell'utente e il web server

Inizio lavori Come implementare un comune caso d'uso per una interfaccia web: una scelta a 2 livelli

3 implementazioni ● Classica (jsp e servlet) ● DHTML (interamente lato client) ● Ajax (Interfaccia renderizzata da DHTML e dati forniti da una servlet)

Struttura del progetto

Implementazione classica: form.jsp

Implementazione classica: Servlet

Implementazione DHTML: form.html

Implementazione DHTML: Javascript

Implementazione Ajax: form.html

Implementazione Ajax: Javascript

Implementazione Ajax: Servlet

Applicazione web tradizionale

Applicazione web Ajax

Modelli a confronto

Considerazioni lato utente Vantaggi ● Novità della UI ● Le pagine sembrano più interattive ● Nessun bisogno di installare nuovo software Svantaggi ● Browser un po' datati non vanno ● Javascript abilitato ● I tasti “avanti” e “indietro” non funzionano ● Non si possono inviare link ad altri

Considerazioni lato server Vantaggi ● La banda viene sfruttata meglio ● Meno carico per la cpu: il carico utilizzato per l'interfaccia utente viene ripartito nei clients Svantaggi ● Se si abusa nell'utilizzo, si generano lentezze lato client e troppe richieste verso il server ● Javascript difficile da debuggare

Come iniziare ● Avvalersi di Toolkit che permettono di gestire le differenze tra i vari browser ● Studiare bene Javascript (prototype, passaggio di funzioni come parametri, eval) ● Sperimentare

Framework o Toolkit ? Toolkit ● Si integrano benissimo, poco invasivi. ● Permettono di prendere confidenza con ajax direttamente nelle nostre webapp. Framework ● Più completi ● Meglio strutturati, coprono ogni aspetto della user interface ● Permettono di ottenere codice più omogeneo

Link utili ● jQuery ( una libreria molto facile da usare e allo stesso tempo molto potente. Es. $("p.surprise").addClass("ohmy").show("slow"); ● dhtmlgoodies ( una raccolta di script ajax e dhtml. ● Prototype ( un altra libreria simile a jQuery ma con delle api meno intuitive. ● DWR ( ottimo framework per richiamare da javascript il codice java nel backend. ● GWT ( un toolkit di Google che permette di scrivere codice per la UI interamente in java, come awt.

Domande...?

JUG – Ancona Italy Grazie ! Giovanni Baleani JUG Ancona -