�ݺ�ߣ

Ajax Ajax Asynchronous JavaScript And XML Davide Ficano [email_address]

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 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" > < html lang = "en" > < head > < title > Prova innerHTML </ title > < script > function cambiaTesto() { var elemento = document.getElementById("testo"); elemento.innerHTML = " < span style = 'color:red' > testo rosso </ span > "; } </ script > </ head > < body > < input id = "pulsante" type = "button" onclick = "cambiaTesto()" value = "clicca per cambiare il testo" /> < p id = "testo" > Paragrafo da modificare </> </ body > </ html >

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]) method metodo invio dati uri nome della pagina aync invio 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", tr ue);

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 GET httpReq.open( "get" , "http://localhost/ajax/a.php?nome=davide" , true ); // effettuo la richiesta, in GET si passa null httpReq.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 POST httpReq.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 server alert(httpReq.getAllResponseHeaders()); // informazioni su un singolo header alert(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 0 Uninitialized 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 responseText contiene la stringa come testo piatto responseXML ritorna 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

�ݺ�ߣ

Ajax

More Related Content

Ajax