Ajax

1,697 views

Published on

Una breve introduzione ai concetti basilari di AJAX

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,697
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
53
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Ajax

  1. 1. Ajax <ul><ul><li>Ajax </li></ul></ul><ul><ul><li>Asynchronous JavaScript And XML </li></ul></ul><ul><ul><li>Davide Ficano </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul>
  2. 2. Introduzione <ul><li>Cosa non è </li></ul><ul><ul><li>Non è una nuova tecnologia </li></ul></ul><ul><ul><li>Non è un linguaggio lato server </li></ul></ul><ul><li>Cosa è </li></ul><ul><ul><li>Una tecnologia che attraverso l'interfacciamento con XML, permette ad un client di richiamare informazioni lato server in modo veloce e trasparente </li></ul></ul><ul><ul><li>Una tecnica per richiamare solo porzioni di una pagina web anziché ricaricare l'intera pagina dal server </li></ul></ul>
  3. 3. Caricamento pagine web senza Ajax <ul><li>Una pagina web viene richiesta &quot;tutta in una volta&quot; </li></ul><ul><li>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 </li></ul>
  4. 4. Pagine con Ajax <ul><li>Non bisogna attendere che sia stata ultimato il caricamento per effettuare altre operazioni </li></ul><ul><li>E' possibile effettuare simultaneamente piu' richieste atte a costruire l'intera pagina </li></ul>
  5. 5. XMLHttpRequest <ul><li>Ajax si basa sull'oggetto XMLHttpRequest </li></ul><ul><li>XMLHttpRequest e' presente su tutti i browser (su Explorer dalla 5) </li></ul><ul><li>Può inviare dati in </li></ul><ul><ul><li>POST </li></ul></ul><ul><ul><li>GET </li></ul></ul><ul><li>Permette di effettuare chiamate HTTP in modo asincrono </li></ul><ul><li>Puo' restituire un oggetto XML da usare lato client </li></ul>
  6. 6. Prerequisiti <ul><li>Per utilizzare Ajax bisogna avere una conoscenza anche di base di </li></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><li>(X)HTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>XML </li></ul></ul>
  7. 7. Il Kit minimo per sviluppare <ul><li>Conoscere l'attributo innerHTML di un elemento DOM </li></ul><ul><ul><li>Ad ogni tag presente nella pagina corrisponde un elemento DOM </li></ul></ul><ul><li>Conoscere getElementById e getElementsByTagName </li></ul><ul><ul><li>Permettono di trovare un particolare elemento (tag) presente in una pagina (X)HTML </li></ul></ul><ul><li>Gli elementi presenti sulla pagina devono avere un id univoco questo e' fondamentale per il corretto funzionamento </li></ul>
  8. 8. Un esempio pratico /1 <ul><li>Prima di avventurarsi in Ajax puro prendiamo dimestichezza con innerHTML e compagni </li></ul><ul><li>Scriviamo una pagina che al click su un pulsante cambia il contenuto di una porzione di pagina </li></ul><ul><li>Dobbiamo avere una pagina che </li></ul><ul><ul><li>ha un elemento con id univoco (usato per cambiarne il contenuto) </li></ul></ul><ul><ul><li>un pulsante che al clic richiama una funzione javascript </li></ul></ul><ul><ul><li>una funzione che tramite getElementById e innerHTML cambia il contenuto </li></ul></ul>
  9. 9. Un esempio pratico /2 Il risultato atteso Prima e dopo il clic
  10. 10. Un esempio pratico /3 Sorgente pagina <ul><li><! DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; > </li></ul><ul><li>< html lang = &quot;en&quot; > </li></ul><ul><li>< head > </li></ul><ul><li>< title > Prova innerHTML </ title > </li></ul><ul><li>< script > </li></ul><ul><li>function cambiaTesto() { </li></ul><ul><li>var elemento = document.getElementById(&quot;testo&quot;); </li></ul><ul><li>elemento.innerHTML = &quot; < span style = 'color:red' > testo rosso </ span > &quot;; </li></ul><ul><li>} </li></ul><ul><li></ script > </li></ul><ul><li></ head > </li></ul><ul><li>< body > </li></ul><ul><li>< input id = &quot;pulsante&quot; type = &quot;button&quot; </li></ul><ul><li>onclick = &quot;cambiaTesto()&quot; </li></ul><ul><li>value = &quot;clicca per cambiare il testo&quot; /> </li></ul><ul><li>< p id = &quot;testo&quot; > Paragrafo da modificare </> </li></ul><ul><li></ body > </li></ul><ul><li></ html > </li></ul>
  11. 11. XMLHttpRequest e funzionamento multi browser <ul><li>L'accesso all'oggetto XMLHttpRequest in Internet Explorer viene fatto tramite ActiveX </li></ul><ul><li>Questo richiede un piccolo sforzo per rendere il codice portabile </li></ul><ul><li>Viene creata una funzione che ritorna un oggetto XMLHttpRequest facendo prima delle verifiche sul browser in uso </li></ul><ul><li>Il browser viene determinato utilizzando lo user agent, una stringa che contiene informazioni sul nome (e sulla versione) del browser </li></ul>
  12. 12. getSafeXmlHttpRequest Una possibile implementazione <ul><li>function getSafeXMLHttpRequest() { </li></ul><ul><li>var XHR = null ; </li></ul><ul><li>browserUtente = navigator.userAgent.toUpperCase(); </li></ul><ul><li>if (typeof(XMLHttpRequest) === &quot;function&quot; </li></ul><ul><li>|| typeof(XMLHttpRequest) === &quot;object&quot; ) </li></ul><ul><li>XHR = new XMLHttpRequest(); </li></ul><ul><li>else if ( </li></ul><ul><li>window.ActiveXObject && </li></ul><ul><li>browserUtente.indexOf( &quot;MSIE 4&quot; ) < 0) { </li></ul><ul><li>if (browserUtente.indexOf( &quot;MSIE 5&quot; ) < 0) </li></ul><ul><li>XHR = new ActiveXObject( &quot;Msxml2.XMLHTTP&quot; ); </li></ul><ul><li>else </li></ul><ul><li>XHR = new ActiveXObject( &quot;Microsoft.XMLHTTP&quot; ); </li></ul><ul><li>} </li></ul><ul><li>return XHR; </li></ul><ul><li>} </li></ul>
  13. 13. XMLHttpRequest ed i suoi metodi <ul><li>L'oggetto XMLHttpRequest mette a disposizione i seguenti metodi </li></ul><ul><ul><li>open </li></ul></ul><ul><ul><li>send </li></ul></ul><ul><li>Piu' raramente utilizzati </li></ul><ul><ul><li>abort </li></ul></ul><ul><ul><li>getAllResponseHeaders </li></ul></ul><ul><ul><li>getResponseHeader </li></ul></ul><ul><ul><li>setRequestHeader </li></ul></ul>
  14. 14. XMLHttpRequest Il metodo open <ul><li>ll primo ad essere usato per effettuare una chiamata asincrona è il metodo open, il quale è definito dal W3C (Working Draft) </li></ul><ul><li>open (method, uri [,async]) </li></ul><ul><ul><li>method metodo invio dati </li></ul></ul><ul><ul><li>uri nome della pagina </li></ul></ul><ul><ul><li>aync invio asincrono o sincrono </li></ul></ul>
  15. 15. XMLHttpRequest Il metodo open Metodo di invio dati /1 <ul><li>Il primo parametro è una stringa che indica il metodo di invio dati. Possiamo valorizzarlo come &quot;get&quot; o &quot;post&quot;. 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. </li></ul>
  16. 16. XMLHttpRequest Il metodo open Metodo di invio dati /2 <ul><li>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. </li></ul><ul><li>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. </li></ul><ul><li>il limite del metodo POST può essere imposto sul server, configurato per non ricevere dati con una lunghezza superiore ad un valore prefissato </li></ul>
  17. 17. XMLHttpRequest Il metodo open Nome della pagina <ul><li>ll secondo parametro è il nome della pagina da leggere che può essere descritto con indirizzo assoluto, per esempio &quot;http://immaweb.unipa.it&quot;, oppure come percorso relativo </li></ul>
  18. 18. XMLHttpRequest Il metodo open Asincronismo <ul><li>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 </li></ul><ul><li>httpReq.open(&quot;get&quot;,&quot;http://localhost/ajax/a.php?nome=davide&quot;, tr ue); </li></ul>
  19. 19. XMLHttpRequest Il metodo send GET <ul><li>Una volta aperta una connessione con open e' possibile effettuare una richiesta GET con il metodo send() </li></ul>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( &quot;get&quot; , &quot;http://localhost/ajax/a.php?nome=davide&quot; , true ); // effettuo la richiesta, in GET si passa null httpReq.send( null );
  20. 20. XMLHttpRequest Il metodo send POST /1 <ul><li>Utilizzare send con POST e' piu' complicato, ma le complicazioni sono dovute al protocollo HTTP non al metodo in se </li></ul><ul><li>Bisogna impostare degli headers prima di chiamare send </li></ul><ul><li>Questi headers sono una serie di coppie chiave/valore specifici per uno scambio dati via HTTP </li></ul>httpReq.open( &quot;post&quot; , &quot;http://localhost/ajax/a.php?nome=davide&quot; , true ); // imposto il giusto header richiesto da POST httpReq.setRequestHeader( &quot;content-type&quot; , &quot;application/x-www-form-urlencoded&quot; );
  21. 21. XMLHttpRequest Il metodo send POST /2 <ul><li>Quando si effettua una chiamata POST il passaggio di parametri non viene fatto sulla URI </li></ul><ul><li>Viene sfruttato il parametro di send </li></ul><ul><li>// inizializzo la richiesta in POST </li></ul><ul><li>httpReq.open( &quot;post&quot; , &quot;http://localhost/ajax/a.php&quot; , true ); </li></ul><ul><li>httpReq.setRequestHeader( &quot;content-type&quot; , </li></ul><ul><li>&quot;application/x-www-form-urlencoded&quot; ); </li></ul><ul><li>httpReq.send( &quot;nome=davide&quot; ); </li></ul><ul><li>// inizializzo la richiesta in GET </li></ul><ul><li>httpReq.open( &quot;get&quot; , &quot;http://localhost/ajax/a.php?nome=davide&quot; , true ); </li></ul><ul><li>// effettuo la richiesta, in GET si passa null </li></ul><ul><li>httpReq.send( null ); </li></ul>
  22. 22. XMLHttpRequest Codifica parametri <ul><li>Quando si passano parametri bisogna porre attenzione ai caratteri speciali quali spazi, a capo ma soprattutto ampersand (&) </li></ul><ul><li>La soluzione consiste nell'usare la funzione escape su tutti i parametri che si passano </li></ul><ul><li>escape va usato sia in GET che in POST </li></ul><ul><li>var param = &quot;nome=&quot; + escape( &quot;davide&golia&quot; ); </li></ul><ul><li>httpReq.open( &quot;get&quot; , &quot;http://localhost/ajax/a.php?&quot; + param, false ); </li></ul><ul><li>httpReq.send( null ); </li></ul>
  23. 23. XMLHttpRequest Il metodo abort <ul><li>Puo' essere necessario interrompere le operazioni di invio o ricezione </li></ul><ul><li>A questo scopo viene usato il metodo abort() richiamato dopo send() </li></ul><ul><li>var param = &quot;nome=&quot; + escape( &quot;davide&golia&quot; ); </li></ul><ul><li>httpReq.open( &quot;get&quot; , &quot;http://localhost/ajax/a.php?&quot; + param, false ); </li></ul><ul><li>httpReq.send( null ); </li></ul><ul><li>// Richiamato ad esempio da un click su un pulsante &quot;Stop&quot; </li></ul><ul><li>httpReq.abort(); </li></ul>
  24. 24. XMLHttpRequest accedere agli header <ul><li>Dopo che un send ha avuto successo e' possibile controllare gli header ritornati dal server </li></ul><ul><li>A tal scopo si usano getAllResponseHeaders e getResponseHeader </li></ul>// lista di tutti gli headers restituiti dal server alert(httpReq.getAllResponseHeaders()); // informazioni su un singolo header alert(httpReq.getResponseHeader( &quot;content-type&quot; )); <ul><li>Il loro uso pero' va fatto a ricezione conclusa che non corrisponde con il fatto che e' stata richiamato send </li></ul>
  25. 25. XMLHttpRequest ed i suoi parametri <ul><li>Per gestire l'invio/ricezioni si fa uso dei seguenti parametri </li></ul><ul><ul><li>onreadystatechange </li></ul></ul><ul><ul><li>readyState </li></ul></ul><ul><ul><li>responseText </li></ul></ul><ul><ul><li>responseXML </li></ul></ul><ul><ul><li>status </li></ul></ul>
  26. 26. XMLHttpRequest il parametro readyState /1 <ul><li>È 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. </li></ul><ul><li>Gli stati che la richiesta può assumere sono </li></ul><ul><li>0 Uninitialized l'oggetto XMLHttpRequest esiste, ma non è stato richiamato alcun metodo per inizializzare una comunicazione </li></ul><ul><li>1 Open è stato richiamato il metodo open() ed il metodo send() non ha ancora effettuato l'invio dati </li></ul><ul><li>2 Sent il metodo send() è stato eseguito ed ha effettuato la richiesta </li></ul><ul><li>3 Receiving i dati in risposta cominciano ad essere letti </li></ul><ul><li>4 Loaded l'operazione è stata completata </li></ul>
  27. 27. XMLHttpRequest il parametro readyState /2 <ul><li>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 </li></ul><ul><li>Di seguito e' riportato uno stralcio di codice che mostra come utilizzare il parametro </li></ul>if (httpReq.readyState == 4) { // le operazioni di ricezione/invio sono terminate }
  28. 28. XMLHttpRequest il parametro status <ul><li>Il parametro readyState ci dice se abbiamo finito di ricevere/inviare dati ma non ci dice se e' andato tutto bene </li></ul><ul><li>Potremmo ritrovarci con il server che ha smesso di inviare prematuramente i dati </li></ul><ul><li>Per conoscere lo stato effettivo si utilizza status che contiene il codice HTTP di ritorno </li></ul><ul><li>Noi gestiamo solo il codice 200, se status == 200 tutto bene altrimenti si e' verificato un errore </li></ul>
  29. 29. XMLHttpRequest i parametri responseText e responseXML <ul><li>Questi parametri contengono il testo che il server ha inviato </li></ul><ul><li>responseText contiene la stringa come testo piatto </li></ul><ul><li>responseXML ritorna un documento DOM </li></ul><ul><li>responseXML e' applicabile solo se ci sia aspetta un flusso XML valido </li></ul><ul><li>In effetti responseXML non fa altro che utilizzare quando ritornato in responseText e trasformarlo in documento DOM </li></ul>
  30. 30. XMLHttpRequest il parametro onreadystatechange <ul><li>onreadystatechange e' il piu' importante parametro, esso contiene una funzione scritta dallo sviluppatore che si occupa di processare le chiamate asincrone </li></ul>httpReq.onreadystatechange = function() { if (httpReq.readyState === 4) { if (httpReq.status == 200) { alert( &quot;Operazione effettuata con successo&quot; ); } else { alert( &quot;Operazione fallita, errore numero &quot; + httpReq.status); } } <ul><li>e' preferibile fare l'assegnazione vista sopra solo dopo aver chiamato send per evitare problemi di sincronismo </li></ul>

×