ajax
If you can't read please download the document
TRANSCRIPT
Diapositiva 1
Ajax
Ajax
Asynchronous JavaScript And XML
Davide Ficano
Introduzione
Cosa non
Non una nuova tecnologia
Non un linguaggio lato server
Cosa
Una tecnologia che attraverso l'interfacciamento con XML, permette ad un client di richiamare informazioni lato server in modo veloce e trasparente
Una tecnica per richiamare solo porzioni di una pagina web anzich ricaricare l'intera pagina dal server
Caricamento pagine web
senza Ajax
Una pagina web viene richiesta "tutta in una volta"
Il caricamento degli elementi che la compongono avviene simultaneamente (ad esempio le immagini vengono visualizzate quando ancora la pagina non completa) ma il suo utilizzo pu essere fatto solo quando il caricamento terminato
Pagine con Ajax
Non bisogna attendere che sia stata ultimato il caricamento per effettuare altre operazioni
E' possibile effettuare simultaneamente piu' richieste atte a costruire l'intera pagina
XMLHttpRequest
Ajax si basa sull'oggetto XMLHttpRequest
XMLHttpRequest e' presente su tutti i browser (su Explorer dalla 5)
Pu inviare dati in
POST
GET
Permette di effettuare chiamate HTTP in modo asincrono
Puo' restituire un oggetto XML da usare lato client
Prerequisiti
Per utilizzare Ajax bisogna avere una conoscenza anche di base di
Javascript
(X)HTML
CSS
XML
Il Kit minimo per sviluppare
Conoscere l'attributo innerHTML di un elemento DOM
Ad ogni tag presente nella pagina corrisponde un elemento DOM
Conoscere getElementById e getElementsByTagName
Permettono di trovare un particolare elemento (tag) presente in una pagina (X)HTML
Gli elementi presenti sulla pagina devono avere un id univoco questo e' fondamentale per il corretto funzionamento
Un esempio pratico /1
Prima di avventurarsi in Ajax puro prendiamo dimestichezza con innerHTML e compagni
Scriviamo una pagina che al click su un pulsante cambia il contenuto di una porzione di pagina
Dobbiamo avere una pagina che
ha un elemento con id univoco (usato per cambiarne il contenuto)
un pulsante che al clic richiama una funzione javascript
una funzione che tramite getElementById e innerHTML cambia il contenuto
Un esempio pratico /2
Il risultato atteso
Prima e dopo il clic
Un esempio pratico /3
Sorgente pagina
Prova innerHTML
function cambiaTesto() {
var elemento = document.getElementById("testo");
elemento.innerHTML = "testo rosso";
}
Paragrafo da modificare
XMLHttpRequest
e funzionamento multi browser
L'accesso all'oggetto XMLHttpRequest in Internet Explorer viene fatto tramite ActiveX
Questo richiede un piccolo sforzo per rendere il codice portabile
Viene creata una funzione che ritorna un oggetto XMLHttpRequest facendo prima delle verifiche sul browser in uso
Il browser viene determinato utilizzando lo user agent, una stringa che contiene informazioni sul nome (e sulla versione) del browser
getSafeXmlHttpRequest
Una possibile implementazione
function getSafeXMLHttpRequest() {
var XHR = null;
browserUtente = navigator.userAgent.toUpperCase();
if (typeof(XMLHttpRequest) === "function"
|| typeof(XMLHttpRequest) === "object")
XHR = new XMLHttpRequest();
else if (
window.ActiveXObject &&
browserUtente.indexOf("MSIE 4") < 0) {
if(browserUtente.indexOf("MSIE 5") < 0)
XHR = new ActiveXObject("Msxml2.XMLHTTP");
else
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
return XHR;
}
XMLHttpRequest
ed i suoi metodi
L'oggetto XMLHttpRequest mette a disposizione i seguenti metodi
open
send
Piu' raramente utilizzati
abort
getAllResponseHeaders
getResponseHeader
setRequestHeader
XMLHttpRequest
Il metodo open
ll primo ad essere usato per effettuare una chiamata asincrona il metodo open, il quale definito dal W3C (Working Draft)
open (method, uri [,async])
methodmetodo invio dati
urinome della pagina
ayncinvio asincrono o sincrono
XMLHttpRequest
Il metodo open
Metodo di invio dati /1
Il primo parametro una stringa che indica il metodo di invio dati. Possiamo valorizzarlo come "get" o "post". La differenza principale tra questi due metodi la stessa di un normale form HTML: scegliendo GET le variabili verranno appese alla pagina selezionata (per esempio pagina.html?variabile=valore), mentre utilizzando POST queste verranno inviate in modo invisibile all'utente e senza i limiti tipici del GET.
XMLHttpRequest
Il metodo open
Metodo di invio dati /2
Una chiamata GET ha un limite di caratteri che si possono inviare (che varia a seconda del browser), solitamente pari ad un massimo di 256.
E' molto pi comodo e semplice inviare questi dati sotto forma di link e sar quindi cura dello sviluppatore scegliere il metodo pi idoneo per quel tipo di scambio dati.
il limite del metodo POST pu essere imposto sul server, configurato per non ricevere dati con una lunghezza superiore ad un valore prefissato
XMLHttpRequest
Il metodo open
Nome della pagina
ll secondo parametro il nome della pagina da leggere che pu essere descritto con indirizzo assoluto, per esempio "http://immaweb.unipa.it", oppure come percorso relativo
XMLHttpRequest
Il metodo open
Asincronismo
Il terzo parametro un valore booleano che deve essere impostato
come true, per indicare al metodo open che la richiesta da
effettuare di tipo asincrono, false per una chiamata non
asincrona
httpReq.open("get","http://localhost/ajax/a.php?nome=davide",true);
XMLHttpRequest
Il metodo send
GET
Una volta aperta una connessione con open e' possibile effettuare una richiesta GET con il metodo send()
Tutti i browser moderni per motivi di sicurezza impediscono di usare XMLHttpRequest con URI esterne al proprio dominio
// inizializzo la richiesta in GEThttpReq.open("get", "http://localhost/ajax/a.php?nome=davide", true);
// effettuo la richiesta, in GET si passa nullhttpReq.send(null);
XMLHttpRequest
Il metodo send
POST /1
Utilizzare send con POST e' piu' complicato, ma le complicazioni sono dovute al protocollo HTTP non al metodo in se
Bisogna impostare degli headers prima di chiamare send
Questi headers sono una serie di coppie chiave/valore specifici per uno scambio dati via HTTP
httpReq.open("post", "http://localhost/ajax/a.php?nome=davide", true);
// imposto il giusto header richiesto da POSThttpReq.setRequestHeader("content-type", "application/x-www-form-urlencoded");
XMLHttpRequest
Il metodo send
POST /2
Quando si effettua una chiamata POST il passaggio di parametri non viene fatto sulla URI
Viene sfruttato il parametro di send
// inizializzo la richiesta in POST
httpReq.open("post", "http://localhost/ajax/a.php", true);
httpReq.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
httpReq.send("nome=davide");
// inizializzo la richiesta in GET
httpReq.open("get", "http://localhost/ajax/a.php?nome=davide", true);
// effettuo la richiesta, in GET si passa null
httpReq.send(null);
XMLHttpRequest
Codifica parametri
Quando si passano parametri bisogna porre attenzione ai caratteri speciali quali spazi, a capo ma soprattutto ampersand (&)
La soluzione consiste nell'usare la funzione escape su tutti i parametri che si passano
escape va usato sia in GET che in POST
var param = "nome=" + escape("davide&golia");
httpReq.open("get", "http://localhost/ajax/a.php?" + param, false);
httpReq.send(null);
XMLHttpRequest
Il metodo abort
Puo' essere necessario interrompere le operazioni di invio o ricezione
A questo scopo viene usato il metodo abort() richiamato dopo send()
var param = "nome=" + escape("davide&golia");
httpReq.open("get", "http://localhost/ajax/a.php?" + param, false);
httpReq.send(null);
// Richiamato ad esempio da un click su un pulsante "Stop"
httpReq.abort();
XMLHttpRequest
accedere agli header
Dopo che un send ha avuto successo e' possibile controllare gli header ritornati dal server
A tal scopo si usano getAllResponseHeaders e getResponseHeader
// lista di tutti gli headers restituiti dal serveralert(httpReq.getAllResponseHeaders());
// informazioni su un singolo headeralert(httpReq.getResponseHeader("content-type"));
Il loro uso pero' va fatto a ricezione conclusa che non corrisponde con il fatto che e' stata richiamato send
XMLHttpRequest
ed i suoi parametri
Per gestire l'invio/ricezioni si fa uso dei seguenti parametri
onreadystatechange
readyState
responseText
responseXML
status
XMLHttpRequest
il parametro readyState /1
una varibile di tipo intero, con valori che vanno da 0 a 4. un parametro di sola lettura che rappresenta in ogni istante lo stato della richiesta.
Gli stati che la richiesta pu assumere sono
0Uninitialized l'oggetto XMLHttpRequest esiste, ma non stato richiamato alcun metodo per inizializzare una comunicazione
1 Open stato richiamato il metodo open() ed il metodo send() non ha ancora effettuato l'invio dati
2 Sent il metodo send() stato eseguito ed ha effettuato la richiesta
3 Receiving i dati in risposta cominciano ad essere letti
4 Loaded l'operazione stata completata
XMLHttpRequest
il parametro readyState /2
Di tutti i valori l'unico che tutti i browser implementano e' il 4 che pero' e' sufficiente a gestire anche i casi piu' complessi
Di seguito e' riportato uno stralcio di codice che mostra come utilizzare il parametro
if (httpReq.readyState == 4) { // le operazioni di ricezione/invio sono terminate}
XMLHttpRequest
il parametro status
Il parametro readyState ci dice se abbiamo finito di ricevere/inviare dati ma non ci dice se e' andato tutto bene
Potremmo ritrovarci con il server che ha smesso di inviare prematuramente i dati
Per conoscere lo stato effettivo si utilizza status che contiene il codice HTTP di ritorno
Noi gestiamo solo il codice 200, se status == 200 tutto bene altrimenti si e' verificato un errore
XMLHttpRequest
i parametri
responseText e responseXML
Questi parametri contengono il testo che il server ha inviato
responseTextcontiene la stringa come testo piatto
responseXMLritorna un documento DOM
responseXML e' applicabile solo se ci sia aspetta un flusso XML valido
In effetti responseXML non fa altro che utilizzare quando ritornato in responseText e trasformarlo in documento DOM
XMLHttpRequest
il parametro onreadystatechange
onreadystatechange e' il piu' importante parametro, esso contiene una funzione scritta dallo sviluppatore che si occupa di processare le chiamate asincrone
httpReq.onreadystatechange = function() { if (httpReq.readyState === 4) { if(httpReq.status == 200) { alert("Operazione effettuata con successo"); } else { alert("Operazione fallita, errore numero " + httpReq.status); }}
e' preferibile fare l'assegnazione vista sopra solo dopo aver chiamato send per evitare problemi di sincronismo
02/03/09