AJAX e altre applicazioni di Javascript Luca Fabbri 1
Definizione di AJAX? AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo per creare applicazioni web interattive. 2
Perché arrivare ad AJAX Le applicazione web hanno per anni sofferto di staticità. L'aggiornamento della pagina visualizzata necessita sempre di una nuova comunicazione col server (invio di un form, pressione di un link). 3
Perché arrivare ad AJAX L'uso di Javascript per la modifica dinamica del DOM della pagina visualizzata ha portato grossi benefici (Dinamic HTML) ma queste modifiche devono avvenire lato client per la natura intrinseca di Javascript. La comunicazione col server per poter inviare informazioni è stata a lungo soggetta agli stessi limiti già citati. 4
Javascript e il DOM La manipolazione del DOM (Document Object Model) da parte dei browser è ben lontana da uno standard. Tutti i browser hanno però il supporto Javascript per manipolare il documento visualizzato. 5
Javascript e il DOM <html> <body> <p class= main-p id= paragrafo-1 > Ciao mondo </p> <p class= main-p > Questo è HTML </p> </body> </html> Ottenere un modo tramite il suo id: document.getelementbyid( paragrafo-1 ) Ottenere il testo (o l'html) interno ad un elemento: document.getelementbyid( paragrafo-1 ).innerhtml innerhtml è un attributo di lettura/scrittura 6
Javascript e il DOM Manipolazione dei nodi del DOM del documento. document.createelement(...) document.createtextnode(...) document.getelementsbyclassname(...) Manipolazione di un nodo (anche document) node.childnodes node.firstchild node.lastchild node.nextsibling Purtroppo manca uno standard sicuro 7
Storia di AJAX Inizialmente implementato da Microsoft come oggetto ActiveX. Successivamente da molti altri browser in altre forme (incompatibilità di forma). Il nome AJAX si presenta per la prima volta nel 2005 in un articolo di Jesse James Garrett (che diventa famoso per quel motivo!). 8
Che cos'è AJAX? Tutti i browser più recenti sono in grado in un modo o nell'altro di eseguire speciali connessioni con il server (XMLHttpRequest). Possono eseguire richieste di tramite protocollo HTTP per ottenere una risposta in formato XML. L'uso di FORM e elementi INPUT non è più necessario per inviare dati! 9
Che cos'è AJAX? Questo XML può essere letto e manipolato con gli stessi mezzi che Javascript mette a disposizione del il documento corrente. Se l'xml ritornato è in formato (X)HTML può essere facilmente integrato con il codice HTML della pagina che ha scatenato la chiamata. 10
Come si presenta AJAX? Esempio 11
Problemi... Accessibilità!!! Sicurezza (...possiamo connetterci dove vogliamo?) 12
Problemi... C'è una parziale mancanza di uno standard unico, o dove questo è presente non è ben rispettato. Scrivere codice Javascript cross-browser può essere impegnativo. Scrivere codice Javascript cross-browser in presenza di chiamate AJAX e manipolazione del DOM può essere ulteriormente difficile... 13
Problemi... E' però possibile riuscire nell'intento gestendo tutte le possibili eccezioni e problemi dei vari browser... ma la soluzione spesso migliore è ricorrere a framework. 14
I framework Javascript Librerie che si occupano di incapsulare funzionalità, per estendere ulteriormente le potenzialità di Javascript. Molte (cosa ancor più importante) si occupano di fornire le funzionalità in modo indipendente dalla piattaforma. 15
I framework Javascript Alcune famose librerie: prototype.js script.aculo.us Mochikit Dojo JQuery 16
jquery The Write Less, Do More, JavaScript Library 17
JQuery: introduzione jquery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jquery is designed to change the way that you write JavaScript. 18
JQuery: introduzione Le potenzialità della libreria sono praticamente tutte esprimibili con l'istanziazione di un particolare tipo di oggetto jquery, tramite la funzione $. Segue lo standard degli oggetti Javascript. E' ottimamente documentata. E' altamente estendibile. 19
JQuery: introduzione Gli oggetti di tipo jquery incapsulano uno o più nodi del DOM e permettono di agire contemporaneamente su tutti i nodi che rappresentano tramite metodi (cross browser) dell'oggetto stesso. Senza jquery: document.getelementbyid(... ).innerhtml Con jquery: $(... ).html() 20
JQuery: introduzione Ognuna di queste operazioni ritorna a sua volta un oggetto jquery permettendo così operazioni a cascata (sintassi estremamente concisa e leggibile). 21
JQuery: basi di utilizzo La creazione di oggetti jquery avviene con l'esplicito passaggio di un elemento del DOM al costruttore, oppure con del codice HTML in formato stringa o con un selettore CSS. 22
JQuery: basi di utilizzo Esempio $(node) $( <ul><li>elemento uno della lista</li></ul> ) $( #blockid p.testo img ) Uso a cascata $( #blockid p.testo img ).addclass( img-class ).hide() 23
JQuery: basi di utilizzo Esempi 24
JQuery: da esplorare... Il repository dei plugin Il sito dedicato a jquery UI 25
Mappe di Google Le mappe di Google (googlemaps) sono un'applicazione rilasciata a libero utilizzo. Semplicemente includendo un sorgente javascript fornito (ma ben oscurato...) è possibile implementare nelle proprie pagine gran parte delle funzionalità dell'omonimo servizio maps.google.com 26
Mappe di Google E' necessario registrare (liberamente e in modo anonimo) una chiave da associare all'host utilizzato. Questo anche per utilizzi locali... http://localhost:8080/... http://code.google.com/apis/maps/signup.html 27
Mappe di Google Esempi online http://code.google.com/apis/maps/documentation/examples/ 28
Link http://it.wikipedia.org/wiki/ajax http://www.howtocreate.co.uk/tutorials/javascript/domstructure http://jquery.com/ http://ui.jquery.com/ http://www.getfirebug.com/ http://code.google.com/apis/maps/documentation/examples/map-markers.html 29