Ajax. Pasqualetti Veronica

Transcript

1 Ajax 1 Pasqualetti Veronica

2 AJAX: Introduzione AJAX (Asynchronous JavaScriptS i tand XML) è una tecnica per la creazione di applicazioni Web interattive. Permette l aggiornamento asincrono di porzioni di pagine HTML Uili Utilizzato per incrementare: l interattività la velocità l usabilità à 2

3 AJAX: Tecnologia? Non è un linguaggio di programmazione o una tecnologia specifica E un termine che indica l utilizzo di una combinazione di tecnologie comunemente utilizzate sul Web: XHTML e CSS DOM modificato attraverso JavaScript per la manipolazione dinamica dei contenuti e dell aspetto XMLHttpRequest per lo scambio di messaggi asincroni fra browser e web server XML come meta-linguaggio dei dati scambiati

4 AJAX: Architettura (1/3) 4

5 AJAX: Architettura (2/3) 5

6 AJAX: Architettura (3/3) 6

7 AJAX: Un po di storia Inizialmente sviluppatto da Microsoft (XMLHttpRequest) come oggetto ActiveX In seguito implementato in tutti i principali browser ad iniziare da Mozillla 1.0 sebbene con alcune differenze Il W3C sta sviluppando/revisionando standard con funzionalità simili ad XMLHttpRequest: Document Object Model (DOM) Level 3 Load and Save Specification Il termine Ajax è comparso per la prima volta nel 2005 in un articolo di Jesse James Garrett (web designer, autore di libri famosi relativi alla user experience nel web) Un esempio: Gmail utilizza AJAX 7

8 Usabilità Ajax: Pro 8 Interattività (Improve user experience) Non costringe l utente all attesa di fronte ad una pagina bianca durante la richiesta e l elaborazione delle pagine (non più click-and-wait) Velocità Minore quantità di dati scambiati (non è necessario richiedere intere pagine) Una parte della computazione è spostata sul client Portabilità (dipende ) Supportato dai maggiori browser Se correttamente t utilizzato t è platform-independent d t Non richiede plug-in

9 Usabilità Pulsante Indietro Ajax: Contro (1/2) Inserimento di segnalibri 9 Essendo i contenuti dinamici spesso non sono indicizzati dai motori di ricerca Accessibilità Non supportato da browser non-visuali Prevedere meccanismi di accesso alternativi

10 Ajax: Contro (2/2) 10 Configurazione: necessario aver abilitato Javascript (in Internet Explorer vecchie versioni - è necessario aver abilitato anche gli oggetti ActiveX) Compatibilità: necessario un test approfondito sui diversi browser per evitare problemi dovuti alle differenze fra i vari browser E bene prevedere funzionalità alternative per i browser che non supportano Javascript

11 Creare un applicazione AJAX Un applicazione AJAX è divisa in 3 momenti fondamentali: Creazione e configurazione delle richieste per il server 2. Esecuzione e memorizzazione delle risposte (o errori) 3. Modifiche al DOM (Document Object Model) della pagina

12 Document Object Model Ricordiamo che DOM è lo standard ufficiale del W3C per la rappresentazione di documenti strutturati in maniera da essere neutrali sia per la lingua che per la piattaforma. DOM è inoltre la base per una vasta gamma delle interfacce di programmazione delle applicazioni; alcune di esse sono standardizzate dal W3C. 12 HTML HEAD BODY H1 P

13 Ajax usa JS: oggetti Javascript 13

14 AJAX in pratica Ajax è fondamentalmente l'unione di due aspetti: La capacità di Javascript di aggiornare parte di una pagina HTML senza che questa venga caricata nuovamente. 14 La capacità di Javascript di fare richieste tramite il protocollo HTTP. Molto spesso si parla di Ajax anche quando soltanto una di queste due caratteristiche viene utilizzata. Iniziamo esplorando la prima capacità: aggiornare le p p p gg pagine in tempo reale tramite Javascript.

15 Un esempio utilizzando le proprietà CSS <script> function show_hide() { var e = document.getelementbyid( getelementbyid( testo"); testo); if (e.style.visibility == 'hidden') { e.style.visibility = 'visible'; e.style.display = 'block'; } else { e.style.visibility l = 'hidden'; hdd e.style.display = 'none ;} } </script> <div id= testo >Testo che compare e scompare!!</div> <input type="button" value="clicca per far sparire/ricomparire" onclick=" show_hide();" /> 15

16 innerhtml e outerhtml Nonostante non siano standard DOM, Javascript permette di leggere/scrivere interi elementi, trattandoli come stringhe: 16 innerhtml: legge/scrive il contenuto di un sottoalbero (escluso il tag dell elemento radice) outerhtml: : legge/scrive e il contenuto di un elemento e e (incluso il tag dell elemento radice) // HTML: <div id="d"><p>paragrafo!</p></div> d = document.getelementbyid("d"); alert(d.innerhtml); // stampa: <p>paragrafo!</p> alert(d.outerhtml); // stampa: <div id="d"><p>paragrafo!</p></div> d innerhtml = <ul><li>lista!</li></ul> ; d.innerhtml = <ul><li>lista!</li></ul> ; // trasforma il DIV in <div id="d"><ul><li>lista!</li></ul></div>

17 Esempio con innerhtml (1/2) 17 <script type="text/javascript" text/javascript language="javascript"> function ReloadTextDiv() { var NewText = document.form1.txtcode.value; var DivElement = document.getelementbyid("preview"); DivElement.innerHTML = NewText; } function changehtml(id,code){ var DivElement = document.getelementbyid(id); DivElement.innerHTML = code; } function ShowHidePreview(){ if(document.getelementbyid( getelementbyid("preview") ).style.display== styledisplay==''){ HideDiv("preview"); mystring = '<a href="javascript:showhidepreview();">mostra Anteprima</a>'; } else{ ShowDiv("preview"); mystring = '<a href="javascript:showhidepreview();">nascondi Anteprima</a>'; } changehtml("previewc",mystring); } function HideDiv(ID){ document.getelementbyid(id).style.display='none'; tel tb t l di l ' } function ShowDiv(ID){ document.getelementbyid(id).style.display=''; } </script>

18 Esempio con innerhtml (2/2) 18 <body onload="reloadtextdiv();"> <div id="formcontainer"> <p>inserisci del codice nella casella di testo sottostante e clicca sul link sottostante per attivare l'anteprima!<br />Tutti i tag sono supportati. </p> <form id="form1" name="form1" method="post" action=""> <textarea name="txtcode" cols="100" rows="10" onkeyup="reloadtextdiv()" style="border:1px solid #FFCCFF; color: #990000;"><h3>scrivi qui</h3></textarea> </form> </div> <div id="previewc" style="background-color:#cccccc; margintop:30px;"> p <a href="javascript:showhidepreview();">mostra Anteprima</a> </div> <div id="preview" style="display:none; border: 1px solid #CCCCCC; padding:6px;"> </div> </body>

19 XMLHttpRequest 19 Javascript è capace di fare richieste HTTP in background sia utilizzando il metodo GET che il POST. Per poter fare tale richiesta è necessario utilizzare un oggetto che si chiama XMLHttpRequest in tutti i browser moderni. Ciò che serve per fare una richiesta HTTP in Ajax è Javascript e dall'altra altra parte (nel server) qualcuno che risponda alla richiesta, noi lo faremo con script in PHP. Ovviamente l'applicazione server-side side può essere scritta in qualunque linguaggio.

20 XMLHttpRequest: compatibilità Se parliamo di AJAX, oggi, parliamo di un oggetto specifico: XMLHttpRequest. A seconda del browser usato prende nomi differenti o viene richiamato in maniera differente. Nel caso di Internet Explorer (vecchie versioni) l oggetto XMLHttpRequest è restituito i da un ActiveXObject mentre nei browsers alternativi più diffusi (Mozilla, Safari, FireFox, Netscape, Opera ed altri) XMLHttpRequest è supportato nativamente. Accade anche con IE dalla versione 7. 20

21 Metodi XMLHttpRequest open( metodo, URL, async ): Specifica il metodo GET o POST, l'url e altri parametri opzionali per la richiesta. send( content ): Invia la richiesta setrequestheader( chiave, valore): Aggiunge la coppia chiave/valore alla richiesta da inviare; esempio: setrequestheader('content-type ', 'application/x-wwwform-urlencoded;charset=utf-8;'); ;); abort(): Cancella la richiesta in atto getallresponseheaders(): Restituisce sotto forma di stringa tutti gli header HTTP ricevuti dal server getresponseheader( nome_header ): Restituisce il valore dell'header d HTTP specificato; esempio: getresponseheader("content-length") 21

22 Prorietà XMLHttpRequest onreadystatechange: gestore dell'evento lanciato ad ogni cambiamento di stato readystate: rappresenta in ogni istante lo stato della richiesta responsetext: dati restituiti dal server ad operazione ultimata in formato string responsexml: dati restituiti dal server ad operazione ultimata in formato XML status: contiene esattamente il codice HTTP di risposta restituito dal server, se l'interazione ha successo status contiene il valore 200 statustext: descrizione i del codice HTTP ritornato dal server nel parametro status 22

23 Stati di readystate 0 = Uninitialized: l'oggetto esiste ma non è stato istanziato; 1 = Open: l'oggetto è aperto; 2 = Sent: la richiesta è stata inviata; 3 = Receiving: i dati stanno arrivando a estinazione; 4 = Loaded: operazione completata. 23

24 Creazione dell oggetto XMLHttpRequest 24 if (window.xmlhttprequest) // Mozilla, Safari,... { http_request = new XMLHttpRequest(); if (http_request.overridemimetype) http_request.overridemimetype('text/xml'); } else if (window.activexobject)// Internet Explorer (old vers.) { try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); ") } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } }

25 Inizializzazione della richiesta 25 Prima di inviare la richiesta è necessario specificare la funzione che si occuperà di gestire la risposta e aprire la connessione con il server http_request.onreadystatechange = nameofthefunction; http_request.open('get',' I parametri della open specificano: il metodo HTTP della richiesta, l URL a cui inviare la richiesta, un booleano che indica se la richiesta è asincrona

26 Invio della richiesta La richiesta viene inviata per mezzo di una send http_request.send(null); 26 Il parametro a della send contiene te e i dati da inviare ae al server e : per una POST ha la forma di una query-string name=value&anothername=othervalue&so=on per un GET ha valore null (in questo caso i parametri sono passati tramite l URL indicato della precedente open ) può anche essere un qualsiasi altro tipo di dati; in questo caso è necessario specificare il tipo MIME dei dati inviati http_request.setrequestheader('content-type', q 'mime/type');/

27 Gestione della risposta (1/2) La funzione incaricata i di gestire la risposta deve controllare lo stato della richiesta if (http_request.readystate == 4) { // everything is good, the response is received } else { // still not ready } I valori per readystate possono essere: 27 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 t l'invio i 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

28 Gestione della risposta (2/2) 28 E poi necessario controllare lo status code della risposta HTTP if (http_request.status == 200) { } else { } // perfect! // there was a problem with the request, // for example the response may be a 404 (Not Found) // or 500 (Internal Server Error) response codes Infine è possibile leggere la risposta inviata i dal server utilizzando: http_request.responsetext che restituisce la risposta come testo semplice http_request.responsexml che restituisce la risposta come XMLDocument

29 Esempio (1/2) 29 Creiamo una pagina php che calcola la somma di due parametri ricevuti in GET. <?php print ($_ GET['a']+$ $_ GET['b']);?>

30 Esempio (2/2) <html> <head> <script language="javascript"> var myrequest = null; function CreateXmlHttpReq(handler) { var xmlhttp = null; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = handler; return xmlhttp; } function myhandler() { if (myrequest.readystate == 4 && myrequest.status == 200) { alert(myrequest.responsetext); responsetext); } } function esempio1() { myrequest = CreateXmlHttpReq(myHandler); myrequest.open("get","esempio1.php?a=3&b=5",true); myrequest.send(null); } </script> <head> <body> <input type="button" value="clicca per lanciare la richiesta" onclick="esempio1()" /> </body> <html> 30

31 Modifiche alla funzione CreateXmlHttpReq per utilizzarla con qualunque browser function CreateXmlHttpReq(handler) { var xmlhttp = null; if (window.xmlhttprequest) // Mozilla, Safari,... { xmlhttp= new XMLHttpRequest(); t() if (xmlhttp.overridemimetype) xmlhttp.overridemimetype('text/xml'); } else if (window.activexobject)// Internet Explorer (old vers.) { try { } 31 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { // } } } xmlhttp.onreadystatechange = handler; return xmlhttp;

32 Modificare il codice : Esercizi 32 mettere un DIV nella pagina e tramite la proprietà innerhtml mostrare il risultato della richiesta aggiornando il DIV direttamente, invece che utilizzare un alert. Trasformare la richiesta da GET a POST, con due campi di input in cui inserire i valori da sommare.

33 Commenti all uso di pagine dinamiche Richiamare una pagina php potrebbe non garantire il giusto risultato. PERCHE? 33 IE fa il caching delle richieste HTTP fatte in questo modo, quindi effettuando più volte la chiamata, anche se lo script PHP richiamato dovrebbe produrre risultati diversi, il risultato ottenuto potrebbe essere sempre lo stesso. SOLUZIONE: pagina.php?rand=numerocasuale pagina.php?param1=val1&rand= +Math.random()

34 Cosa è cambiato? 34

35 XML Asynchronous Javascript and XML 35 XML è una delle tre parti, ma noi abbiamo utilizzato Ajax senza utilizzare XML Chi ha coniato il termine pensava che il modo migliore per comunicare tra il programma che risiede sul server, e il client che fa la richiesta in Ajax, fosse quello di utilizzare XML. XML in effetti permette di passare grandi quantità di dati ed anche informazioni aggiuntive per ogni dato gli attributi. ESEMPIO: non disponendo di un database potrei registrare gli utenti di un sito in un file xml correttamente strutturato e salvato sul server.

36 Esempio con XML e php: slide.php <?php header( "Content-type: text/xml" );?> <slides> <?php if ($handle = opendir('jpg')) { 36 while (false!== ($file = readdir($handle))) { if ( preg_match( "/[.]JPG$/", $file ) ) { preg_match( "/_(\d+)_(\d+)[.]/", $file, $found );?> <slide src="jpg/<?php echo $file;?>" width="<?php echo $found[1];?>" height="<?php echo $found[2];?>" /><?php echo( "\n" );?> <?php } } closedir($handle); }?> </slides>

37 Slide.php La pagina slide.php realizza l xml che rappresenta l elenco delle immagini presenti in una specifica cartella del server: <slides> <slide src="jpg/diapositiva1.jpg" width="" height="" /> <slide src="jpg/diapositiva2 jpg/diapositiva2.jpg JPG" width="" height="" /> <slide src="jpg/diapositiva3.jpg" width="" height="" /> <slide src="jpg/diapositiva4.jpg" width="" height="" /> <slide src="jpg/diapositiva5.jpg" width="" height="" /> </slides> Realizzeremo ora una pagina che visualizza queste immagini in una pagina html. 37

38 Slide.html (1/2) 38 <html><body ><table><tbody for( var i = 0; i < nl.length; length; i++ ) { id="datatable ></tbody></tabl var nli = nl.item( i ); e> var src = nli.getattribute( 'src' <script> ).tostring(); function processreqchange(){ var trnode = if (req.readystate == 4 && document.createelement( 'tr' ); req.status == 200 && var srcnode = req.responsexml!= null){ document.createelement( 'td' ); var dto = srcnode.innerhtml = "<img document.getelementbyid( src='"+src+"'></img>"; "' " 'datatable' ); trnode.appendchild( srcnode ); var items = []; dto.appendchild( trnode ); var nl = req.responsexml.getelementsby }}} TagName( 'slide' ); continua

39 Slide.html (2/2) 39 function loadxmldoc( url ){ try { req = false; req = new if(window.xmlhttprequest){ ActiveXObject("Microsoft.XM try { LHTTP"); req = new } catch(e) { XMLHttpRequest(); req = false; } } catch(e) { } req = false; ;}} } else if(window.activexobject){ if(req) { try { req.onreadystatechange = req = new processreqchange; ActiveXObject("Msxml2.XML req.open("get", url, true); HTTP");} req.send(""); }} catch(e) { loadxmldoc( 'slide.php' ); </script></body></html>

40 Framework per AJAX 40 Un framework fornisce allo sviluppatore un'architettura ben definita, basata su classi e librerie specifiche, nella quale ci si muove osservando regole ben precise che consentono di realizzare applicazioni senza dover partire da zero. Un Framework per Ajax è il motore che permette ad un sito di sfruttare gli effetti Ajax sempre più presenti nei siti ii denominati i Web 2.0. Ne esistono diversi e ne nasceranno sempre di più in quanto è si tratta di un linguaggio libero e alla portata di molti programmatori, la differenza principale sta nel risultato finale cioè il tipo di effetto ma quanto più importante la leggerezza dello script.

41 Framework e/o ToolKit In rete si trovano molti pacchetti sotto il nome di framework o toolkit per ajax. In realtà dal punto di vista formale ci sono delle differenze: 41 Un framework è uno strato intermedio che offre classi, oggetti, funzioni, etc che è possibile utilizzare per agevolare la programmazione Un toolkit è l insieme di librerie e utility che facilitano e velocizzano la fase di programmazione In ambedue i casi l idea è utilizzare codice già sviluppato per semplificare la vita del programmatore.

42 Framework JavaScript 42 Ricordiamo che AJAX più che un linguaggio è una tecnica che sfrutta il linguaggio JavaScript, quindi un framework per AJAX in realtà realizza funzionalità in JavaScript. Alcuni framework JavaScript che offrono funzionalità per AJAX sono: JQuery ( ) MooTools ( ) Prototype ( ) Ne esistono altri, questa è solo una lista di esempio

43 Toolkit JavaScript per AJAX Anche per i toolkit resta valido il concetto che sono scritti in JavaScript e offrono utility per AJAX Alcuni toolkit presenti in rete sono: 43 Dhtmlx ( / ) DOJO ( ) SimpleJS ( ) Anche in questo caso si tratta solo di una lista di esempio (le risorse presenti in rete sono molte!)

44 Framework JQuery 44 jquery è un framework nato con l'intento di facilitare la scrittura di operazioni JavaScript che altrimenti richiederebbero diverse, se non troppe righe di codice. Oltre a questo jquery permette di attuare in maniera semplice ma altrettanto efficiente AJAX. Quindi con jquery non dobbiamo direttamente lavorare sull'oggetto XMLHttpRequest, ma sono messi a disposizione dell'utente dei metodi appositi. JQuery offre diversi astrazioni per implementare AJAX. Vi è un'implementazione di basso livello che è utilizzabile tramite la funzione $.ajax() che ritorna un XMLHttpRequest e offre notevoli funzionalità. $ serve ad istanziare l oggetto principale del framework, che è proprio jquery, quindi $.ajax() equivale a jquery.ajax()

45 jquery jquery divide le funzionalità in due macrocategorie: i metodi per le richieste AJAX, ovvero quei metodi che ritornano solitamente una XMLHttpRequest; gli eventi AJAX invece che corrispondono ad eventi significativi che coinvolgono chiamate AJAX. Un esempio è quando la richiesta è completata. 45

46 jquery: $.ajax() $.ajax( options ) ritorna XMLHttpRequest 46 options: coppie chiave/valore di opzioni per configurare la chiamata AJAX. utilizzo: $.ajax({ nome_opzione1: valore1, nome_opzione2: valore2}); Offre molte funzionalità tramite le options che si possono settare. Grazie alla modifica di queste offre all'utente la massima personalizzazione della chiamata. Vedremo alcune options con un esempio, prima vediamo altre funzioni

47 jquery: La funzione load() load (url, [data], [callback]) ritorna jquery utilizzo: $(dove_caricare).load("file_html, {dati_da_inviare}, function(){...}); La funzione load serve a caricare del codice HTML di un file remoto ed inserirlo dentro il DOM di un documento. Di default viene effettuata una richiesta tramite il metodo GET, ma è possibile utilizzare il POST passando i dati con il formato coppia chiave/valore. Questa funzione va utilizzata, di norma, su di un div sul quale si vuole caricare del codice HTML. Questa operazione ovviamente è asincrona e avviene senza dover ricaricare i la pagina. 47

48 jquery: Le funzioni get() e post() 48 La funzione $.get() carica una pagina remota usando una richiesta HTTP attraverso il metodo GET. Questa funzione è una sorta di scorciatoia che permette di inviare una semplice richiesta GET al server senza il bisogno di utilizzare la più complessa funzione $.ajax(): è stata introdotta proprio per semplificare la creazione di chiamate AJAX quando queste sono molto semplici. La funzione $.post() carica una pagina remota usando una richiesta HTTP attraverso il metodo POST. E' speculare alla funzione $.get() vista poco sopra e anche essa non è nient'altro che una semplificazione della funzione $.ajax(). Se si vuole avere una funzione per l'errore e una per il successo si deve tornare ad utilizzare $.ajax().

49 jquery: alcuni eventi 49 ajaxstart (globale): questo evento è attivato quando una chiamata AJAX comincia e nessun'altra chiamata concorrente è in esecuzione; beforsend (locale): questo evento è attivato prima che una chiamata AJAX cominci e permette di effettuare modifiche ad esempio agli headers dell'oggetto XMLHttpRequest; t ajaxsend (globale): evento attivato prima che la richiesta sia in esecuzione. Uguale a prima ma è un evento globale; success (locale): evento attivato solo se la chiamata ha successo, cioè senza errori provenienti dal server o errori nei dati di ritorno; ajaxsuccess(globale): equivalente dell'evento evento di prima, ma è un evento globale; error (locale): evento attivato se e solo se avviene un errore; ajaxerror (globale): come error ma globale; ajaxstop (globale): attivato quando non ci sono più richieste AJAX da processare.

50 Confronto tra l'utilizzo classico di XMLHTTPREQUEST e jquery 50 Supponiamo di voler caricare dinamicamente ed eseguire al click di un button nella nostra pagina una function javascript "HelloWorld() che si trova in un file HelloWorld.js Confrontiamo la realizzazione con XMLHttpRequest e con jquery Nella pagina troverò: <div> <input type="button" tt " id="btngo" value="go!!!" onclick="callexternalscriptmethod( 'HelloWorld.js js','helloworld()')" ) /> </div>

51 Lo Script con XMLHttpRequest <script type ="text/javascript"> function CallExternalScriptMethod(scriptUrl, targetcall) { var AJAX = null; if (window.xmlhttprequest) AJAX = new XMLHttpRequest(); else AJAX = new ActiveXObject("Microsoft.XMLHTTP"); AJAX.onreadystatechange = function() { if (AJAX.readyState == 4 && AJAX.status == 200) { eval(ajax.responsetext); eval(targetcall);} } AJAX.open("GET", scripturl, true); AJAX.send(null); } </script> 51

52 Lo Script con jquery <script type ="text/javascript" src =" <script type ="text/javascript"> " function CallExternalScriptMethod(scriptUrl, targetcall) { $.getscript(scripturl, function() { eval(targetcall); }); } </script> Molto più breve!!! 52

53 ToolKit DHTMLX 53 DHTMLX è una libreria JavaScript che fornisce funzionalità essenziali per lo sviluppo di applicazioni web cross-browser. Offre una raccolta completa di componenti per l interfaccia utente, ad esempio: griglie, combo, strutture gerarchiche, h calendari, etc Il tutto basato sulla tecnologia AJAX ed utilizzabile g con qualunque linguaggio server (php, asp, java, etc)

54 Come utilizzare DHTMLX 54 A differenza di un framework un toolkit non richiede di studiare metodi e proprietà degli oggetti offerti ma è possibile procedere per esempi Ovvero una volta scelto il componente che si vuole implementare nel sito è sufficiente includere il file js corretti e utilizzare il codice fornito di esempio insieme al componente stesso. CONTRO: trattandosi di componenti preconfezionati la flessibilità è minore.

55 Un esempio: dhtmlxgrid Si tratta di una visualizzazione tabellare di dati user-friendly e accattivante dal punto di vista estetico Nel nostro caso i campi saranno tutti editabili e quelli di tipo data compilabili tramiti un minicalendario. 55

56 Dhtmlxgrid: il file dei dati 56 Facciamo l ipotesi di avere un file XML contente i dati della nostra tabella (se i dati sono sul server, si occuperà della creazione del file uno script lato server [php, asp, jsp, etc]) Il file deve rispettare alcune regole di struttura imposte dal componente. <rows> <row id="1 ><cell>john Grisham</cell><cell>08/02/1955</cell><cell/></row> <row id="2 ><cell>stephen 2><cell>Stephen King</cell><cell>21/09/1947</cell><cell/></row> <row id= 3 ><cell>michel Oshpic</cell><cell>12/01/1971</cell><cell/></row> <row id="9 ><cell>honore de Cruason</cell><cell>12/01/1991</cell><cell/></row> / / / / / </rows>

57 Lo Script che visualizza i dati <script> mygrid = new dhtmlxgridobject('gridbox'); mygrid.setimagepath("../../codebase/imgs/"); mygrid.setheader("name,date of Birth, First Book Published"); mygrid.setinitwidths("*,100,100"); itwidth ") mygrid.setcolalign("left,center,center"); mygrid.setcoltypes( setcoltypes("ed,dhxcalendar,dhxcalendara dhxcalendar dhxcalendara"); mygrid.setcolsorting("str,date,date"); mygrid.setskin( setskin("dhx_skyblue skyblue"); mygrid.init(); mygrid.loadxml( dati.xml"); </script> 57

58 Commenti allo script Il componente in pratica è l oggetto mygrid istanziato con new dhtmlxgridobject('gridbox'); Tramite l utilizzo dei metodi esposti viene caratterizzata la grid Se il file XML deve essere il frutto di un elaborazione sul server all ultima riga troveremo scritto qualcosa del genere: mygrid.loadxml( dati.php?tipo=scrittori"); 58

59 Framework e toolkit che coinvolgono altri linguaggi oltre JavaScript 59 Google Web Toolkit GWT (Java) p// g / / / / OPENXAVA (Java) org/web/32035/ajax-framework- b?src=ajax-b Ajax Control Toolkit (ASP.NET) Ajax Agent (PHP) h / CakePHP (PHP) Ne esistono tanti altri.

60 Riferimenti AJAX 60 Ajax: A New Approach to Web Applications articolo di Jesse James Garrett chives/ php AJAX:Getting Started p / / g_ ed