AJAX e altre applicazioni di Javascript - Luca Fabbri
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
AJAX e altre applicazioni di Javascript
Luca Fabbri
1Definizione di AJAX?
AJAX, acronimo di Asynchronous JavaScript
and XML, è una tecnica di sviluppo per creare
applicazioni web interattive.
2Perché 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).
3Perché 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.
4Javascript 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.
5Javascript e il DOM
Ciao mondo
Questo è 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
6Javascript 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”
7Storia 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!).
8Che 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!
9Che 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.
10Come si presenta AJAX?
Esempio
11Problemi...
Accessibilità!!!
Sicurezza (...possiamo connetterci dove vogliamo?)
12Problemi...
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...
13Problemi...
E' però possibile riuscire nell'intento gestendo
tutte le possibili eccezioni e problemi dei vari
browser... ma la soluzione spesso migliore è
ricorrere a framework.
14I 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.
15I framework Javascript
● Alcune famose librerie:
● prototype.js
● script.aculo.us
● Mochikit
● Dojo
● JQuery
16jQuery
The Write Less, Do More, JavaScript Library
17JQuery: 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.
18JQuery: 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.
19JQuery: 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()
20JQuery: introduzione
Ognuna di queste operazioni ritorna a sua volta
un oggetto jQuery permettendo così operazioni
a cascata (sintassi estremamente concisa e
leggibile).
21JQuery: 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.
22JQuery: basi di utilizzo
Esempio
$(node)
$(“elemento uno della lista”)
$(“#blockid p.testo img”)
Uso a cascata
$(“#blockid p.testo img”).addClass(“img-class”).hide()
23JQuery: basi di utilizzo
Esempi
24JQuery: da esplorare...
● Il repository dei plugin
● Il sito dedicato a jQuery UI
25Mappe 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
26Mappe 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
27Mappe di Google
Esempi online
http://code.google.com/apis/maps/documentation/examples/
28Link
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
29Puoi anche leggere
