404 file non trovato errore
Transcript
404 file non trovato errore
Ajax 1 Pasqualetti Veronica AJAX: Introduzione 2 AJAX (Asynchronous (A h J JavaScript S i t And A d XML) è una tecnica per la creazione di applicazioni Web interattive. Permette l’aggiornamento l aggiornamento asincrono di porzioni di pagine HTML Utilizzato U ili per iincrementare: l’interattività la velocità l’usabilità l’ bili à AJAX: Tecnologia? Non è un linguaggio di programmazione o una g specifica p tecnologia E’ un termine che indica l’utilizzo di una combinazione di tecnologie comunemente utilizzate sul Web: XHTML e CSS DOM modificato attraverso JavaScript p p 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 AJAX: Architettura (1/3) 4 AJAX: Architettura (2/3) 5 AJAX: Architettura (3/3) 6 AJAX: Un po po’ di storia 7 Inizialmente sviluppatto da Microsoft (XMLHttpRequest) come oggetto gg ActiveX In seguito implementato in tutti i principali browser ad iniziare da Mozillla 1.0 sebbene bb 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 user experience experience” nel web) Un esempio: Gmail utilizza AJAX Ajax: Pro 8 Usabilità 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 S correttamente tt t utilizzato tili t è platform-independent l tf i d d t Non richiede plug-in Ajax: Contro (1/2) 9 Usabilità Pulsante “Indietro” Indietro Inserimento di segnalibri Essendo i contenuti dinamici spesso p non sono indicizzati dai motori di ricerca Accessibilità Non supportato da browser non-visuali Prevedere meccanismi di accesso alternativi Ajax: Contro (2/2) 10 Configurazione: necessario aver abilitato Javascript ((in Internet Explorer p – vecchie versioni - è necessario aver abilitato anche gli oggetti ActiveX) Compatibilità: p 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 Creare un un’applicazione applicazione AJAX 11 Un’applicazione AJAX è divisa in 3 momenti fondamentali: 1. Creazione e configurazione delle richieste per il server 2 2. Esecuzione e memorizzazione delle risposte (o errori) 3. Modifiche M difi h all DOM (D (Document Object Obj Model) della pagina Document Object Model 12 Ricordiamo che DOM è lo standard ufficiale del W3C per la rappresentazione p pp 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 W C W3C. HTML HEAD BODY H1 P Ajax usa JS: oggetti Javascript 13 AJAX in pratica 14 Ajax è fondamentalmente l'unione di due aspetti: La capacità di Javascript di aggiornare parte di una pagina HTML senza che questa venga caricata nuovamente. 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 p la p prima capacità: p aggiornare gg le pagine in tempo reale tramite Javascript. Un esempio utilizzando le proprietà CSS 15 <script> function show_hide() { var e = document.getElementById( document getElementById(“testo"); testo ); if (e.style.visibility == 'hidden') { e.style.visibility = 'visible'; visible ; e.style.display = 'block'; } else { e.style.visibility l b l = 'hidden'; h dd e.style.display = 'none‘;} } </script> p e scompare!!</div> p / <div id=“testo“>Testo che compare <input type="button" value="Clicca per far sparire/ricomparire" onClick=" show_hide();" /> innerHTML e outerHTML 16 Nonostante non siano standard DOM, Javascript permette di leggere/scrivere interi elementi, trattandoli come stringhe: • • innerHTML: legge/scrive il contenuto di un sottoalbero (escluso il tag dell’elemento radice) outerHTML:: legge/scrive oute egge/sc e il co contenuto te uto d di u un eelemento e e to ((incluso c uso il tag dell’elemento radice) // HTML: <div id="d"><p>Paragrafo!</p></div> d = document.getElementById("d"); alert(d.innerHTML); alert(d innerHTML); // stampa: <p>Paragrafo!</p> alert(d.outerHTML); // stampa: <div id="d"><p>Paragrafo!</p></div> d.innerHTML d innerHTML = “<ul><li>Lista!</li></ul>”; <ul><li>Lista!</li></ul> ; // trasforma il DIV in <div id="d"><ul><li>Lista!</li></ul></div> Esempio con innerHTML (1/2) 17 <script type= type="text/javascript" text/javascript language= language="javascript"> javascript > function ReloadTextDiv() { var NewText = document.form1.txtcode.value; var DivElement = document.getElementById( preview ); document.getElementById("preview"); DivElement.innerHTML = NewText; } function changeHTML(ID,code){ var DivElement = document.getElementById(ID); DivElement.innerHTML = code; } function ShowHidePreview(){ if(document getElementById("preview") if(document.getElementById( preview ).style.display== style display==''){ ){ 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){ d document.getElementById(ID).style.display='none'; t tEl tB Id(ID) t l di l ' ' } function ShowDiv(ID){ document.getElementById(ID).style.display=''; } </script> Esempio con innerHTML (2/2) 18 <body onload= onload="ReloadTextDiv();"> ReloadTextDiv(); > <div id="formcontainer"> <p>Inserisci del codice nella casella di testo sottostante e clicca sul link sottostante per attivare l'anteprima!<br l anteprima!<br />Tutti i tag sono supportati supportati. </p> <form id="form1" name="form1" method="post" action=""> <textarea name="txtcode" cols="100" rows="10" onkeyup="ReloadTextDiv()" style="border:1px l "b d solid lid #FFCCFF; FFCCFF color: l #990000;"><h3>scrivi qui</h3></textarea> </form> </div> <div id="previewc" style="background-color:#CCCCCC; marginp3 p ; top:30px;"> <a href="javascript:ShowHidePreview();">Mostra Anteprima</a> </div> <div id= id="preview" preview style= style="display:none; display:none; border: 1px solid #CCCCCC; padding:6px;"> </div> </b d > </body> XMLHttpRequest 19 Javascript è capace di fare richieste HTTP in background g 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 dall altra parte (nel server) qualcuno che risponda alla richiesta, noi lo faremo con script in PHP. Ovviamente ll'applicazione applicazione server server-side side può essere scritta in qualunque linguaggio. XMLHttpRequest: compatibilità 20 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. differente Nel caso di Internet Explorer (vecchie versioni) l’ l’oggetto XMLH R XMLHttpRequest è restituito i i d da un ActiveXObject mentre nei browsers alternativi più diffusi (Mozilla, Safari, FireFox, Netscape, Opera ed p q è supportato pp nativamente. altri)) XMLHttpRequest Accade anche con IE dalla versione 7. Metodi XMLHttpRequest 21 open( metodo, URL, async ): Specifica il metodo GET o POST, l'URL e altri parametri opzionali per la richiesta. send( d( content ): ) Invia I i la l richiesta i hi setRequestHeader( chiave, valore): Aggiunge la coppia chiave/valore alla richiesta da inviare; esempio: setRequestHeader('Content-type ', 'application/x-www; ; ); form-urlencoded;charset=UTF-8;'); abort(): Cancella la richiesta in atto getAllResponseHeaders(): g p () Restituisce sotto forma di stringa tutti gli header HTTP ricevuti dal server getResponseHeader( nome_header ): Restituisce il valore l d dell'header ll'h d HTTP specificato; ifi esempio: i getResponseHeader("Content-Length") Prorietà XMLHttpRequest 22 onreadystatechange: gestore dell'evento lanciato ad ogni cambiamento di stato readyState: d S rappresenta iin ognii iistante llo stato d della ll 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 p restituito dal server, se l'interazione ha successo status contiene il valore 200 statusText: T d descrizione i i d dell codice di HTTP ritornato i dal d l server nel parametro status Stati di readyState 23 0 = Uninitialized: l'oggetto esiste ma non è stato istanziato; 1 = Open: l'oggetto è aperto; 2 = Sent: la l richiesta h è stata inviata; 3 = Receiving: g i dati stanno arrivando a estinazione; 4 = Loaded: operazione completata. completata Creazione dell’oggetto d ll 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 { h http_request = new ActiveXObject("Msxml2.XMLHTTP"); i bj (" l2 ") } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {…} } } 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.onreadystatechange http_request.open('GET','http://www.example.org/some.file',true); • 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 Invio della richiesta 26 La richiesta viene inviata per mezzo di una ‘send’ http_request.send(null); • Il pa parametro a et o de della a ‘send’ se d contiene co t e e i dati dat da inviare a ea al se 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', p q q ( yp , 'mime/type'); / yp ); Gestione della risposta (1/2) 27 La L funzione f i incaricata i i di gestire i lla risposta i d 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: • 0 Uninitialized ll'oggetto oggetto XMLHttpRequest esiste, esiste ma non è stato richiamato alcun metodo per inizializzare una comunicazione • 1 Open è stato richiamato il metodo open() ed il metodo send() non h ancora effettuato ha ff tt t l'i l'invio i d dati ti • 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 Gestione della risposta (2/2) 28 E’ poi necessario controllare lo status code della risposta HTTP if (http_request.status == 200) { // perfect! } else { // there was a problem with the request, // for example the response may be a 404 (Not Found) // or 500 (Internal Server Error) response codes } • IInfine fi è possibile ibil lleggere lla risposta i t iinviata i t d dall server utilizzando: tili d • http_request.responseText che restituisce la risposta come testo semplice • http_request.responseXML che restituisce la risposta come XMLDocument Esempio (1/2) 29 Creiamo una pagina php che calcola la somma di due parametri ricevuti in GET. <?php h print ($_ p ($ GET['a']+$ [ ] $_GET['b']); [ ]); ?> Esempio (2/2) 30 <html> <head> <script language="javascript"> var myRequest = null; function CreateXmlHttpReq(handler) { var xmlhttp = null; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = handler; p; return xmlhttp; } function myHandler() { if (myRequest.readyState == 4 && myRequest.status == 200) { alert(myRequest responseText); alert(myRequest.responseText); } } function esempio1() { myRequest = CreateXmlHttpReq(myHandler); myRequest.open("GET","esempio1.php?a=3&b=5",true); myRequest.send(null); } </ i t> </script> <head> <body> <input type="button" value="Clicca per lanciare la richiesta" onClick="esempio1()" /> </body> /b d <html> Modifiche alla funzione CreateXmlHttpReq per utilizzarla con qualunque browser 31 function CreateXmlHttpReq(handler) { var xmlhttp = null; if (window.XMLHttpRequest) // Mozilla, Safari,... { xmlhttp lhtt = new XMLHttpRequest(); XMLHtt R t() if (xmlhttp.overrideMimeType) xmlhttp.overrideMimeType('text/xml'); } else if (window.ActiveXObject)// Internet Explorer (old vers.) { try { xmlhttp p = new ActiveXObject("Msxml2.XMLHTTP"); j } catch (e) { tryy { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { // } } } xmlhttp.onreadystatechange = handler; return xmlhttp; } Esercizi 32 Modificare il codice : 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. Commenti all’uso all uso di pagine dinamiche 33 Richiamare una pagina php potrebbe non garantire il giusto risultato. PERCHE’? IE fa f il caching hi delle d ll richieste i hi t HTTP ffatte tt in i questo t modo, quindi effettuando più volte la chiamata, anche h se llo script i PHP richiamato i hi d dovrebbe bb produrre d risultati diversi, il risultato ottenuto potrebbe essere sempre lo stesso. SOLUZIONE: pagina.php?rand pagina.php?rand=NumeroCasuale NumeroCasuale “pagina.php?param1=val1&rand=“+Math.random() Cosa è cambiato? 34 XML 35 Asynchronous Javascript and d XML XML è una delle tre parti parti, ma noi abbiamo utili utilizzato ato Ajax Aja 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 i effetti ff tti permette tt di ““passare”” grandi di quantità tità di d dati ti ed d 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. Esempio con XML e php: slide.php slide php 36 <?php header( "Content-type: text/xml" ); ?> <slides> <?php if ($handle = opendir('jpg')) { 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 ? h } } closedir($handle); } ?> </slides> Slide php Slide.php 37 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= src="jpg/Diapositiva2 jpg/Diapositiva2.JPG JPG" width= width="" height= height="" /> <slide src="jpg/Diapositiva3.JPG" width="" height="" /> <slide src src="jpg/Diapositiva4.JPG" jpg/Diapositiva4.JPG width width="" height height="" /> <slide src="jpg/Diapositiva5.JPG" width="" height="" /> … … </slides> Realizzeremo ora una pagina che visualizza queste immagini in una pagina html. Slide html (1/2) Slide.html <html><body ><table><tbody id="dataTable“></tbody></tabl e> <script> function processReqChange(){ if (req.readyState == 4 && req status == 200 && req.status req.responseXML != null){ var dto = document getElementById( document.getElementById( 'dataTable' ); var items = []; var nll = req.responseXML.getElementsBy TagName( 'slide' ); 38 for( var i = 0; i < nl.length; nl length; i++ ) { var nli = nl.item( i ); var src = nli.getAttribute( 'src' ) toString() ).toString(); var trNode = document.createElement( 'tr' ); var srcNode d = document.createElement( 'td' ); srcNode.innerHTML = "<img src='"+src+"'></img>"; '" "' /i " trNode.appendChild( srcNode ); pp ( trNode ); dto.appendChild( }}} … continua Slide html (2/2) Slide.html function loadXMLDoc( url ){ req = false; ( p q ){ if(window.XMLHttpRequest){ try { req = new XMLHttpRequest(); } catch(e) { q = false;; }} req else if(window.ActiveXObject){ try { req = new ActiveXObject("Msxml2.XML HTTP");} catch(e) { 39 try { req = new ActiveXObject("Microsoft.XM LHTTP") LHTTP"); } catch(e) { req = false; } } } if(req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(""); }} loadXMLDoc( 'slide.php' ); </script></body></html> 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. p Un Framework per Ajax è il motore che permette ad un sito di sfruttare gli effetti Ajax sempre più presenti nei siti i i denominati d i iW Web b 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 p di effetto ma q quanto più p risultato finale cioè il tipo importante la leggerezza dello script. Framework e/o ToolKit 41 In rete si trovano molti “pacchetti” sotto il nome di framework o toolkit p per ajax. j In realtà dal punto di vista formale ci sono delle differenze: 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 l i la l fase f di programmazione i In ambedue i casi l’idea è utilizzare “codice” già sviluppato il t per semplificare lifi lla vita it d dell programmatore. 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. JavaScript Alcuni framework JavaScript che offrono f funzionalità i li à per AJAX sono: JQuery (http://jquery.com/ ) MooTools (http://mootools.net/ ) Prototype (http://www.prototypejs.org/ ) Ne esistono altri, questa è solo una lista di esempio Toolkit JavaScript per AJAX 43 Anche per i toolkit resta valido il concetto che sono scritti in JavaScript e offrono utility per AJAX Alcuni toolkit presenti in rete sono: Dhtmlx Dh l (http://dhtmlx.com/ (h //dh l /) DOJO (http://www.dojotoolkit.org/ ) SimpleJS (http://simplejs.bleebot.com/ ) Anche in questo caso si tratta solo di una lista di esempio (le risorse i presentii in i rete sono molte!) l ) Framework JQuery 44 jQuery è un framework nato con l'intento di facilitare la scrittura di operazioni JavaScript che altrimenti richiederebbero diverse, diverse se non troppe righe di codice 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 dell utente dei metodi appositi. appositi JQuery offre diversi astrazioni per implementare AJAX. Vi è un'implementazione p di basso livello che è utilizzabile tramite la funzione $.ajax() che ritorna un XMLHttpRequest e offre notevoli funzionalità. $ serve ad istanziare l’oggetto l oggetto principale del framework, che è proprio jQuery, quindi $.ajax() equivale a jQuery.ajax() jQuery 45 jQuery divide le funzionalità in due macrocategorie: i metodi per le richieste AJAX, 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. jQuery: $.ajax() $ ajax() 46 $.ajax( options ) ritorna XMLHttpRequest options: p coppie pp chiave/valore / di opzioni p p per configurare g la chiamata AJAX. utilizzo: $.ajax({ nome_opzione1: valore1, nome_opzione2: valore2}); l }) Offre molte funzionalità tramite le options che si possono settare. G Grazie i alla ll modifica difi di queste offre ff all'utente la massima personalizzazione della chiamata. hi t Vedremo alcune options con un esempio, prima vediamo altre funzioni jQuery: La funzione load() 47 load (url, [data], [callback]) ritorna jQuery utilizzo: $(dove_caricare).load("file_html“, {dati_da_inviare}, function(){.....}); La L funzione f i l d serve a caricare load i del d l codice di HTML di un file fil 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 pp chiave/valore. / Q Questa funzione va utilizzata,, formato coppia di norma, su di un div sul quale si vuole caricare del codice HTML. Questa operazione ovviamente è asincrona e avviene senza dover d ricaricare i i lla pagina. i 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 crea ione 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 nient altro che una semplificazione della funzione $.ajax(). Se si vuole avere una funzione p per l'errore e una p per il successo si deve tornare ad utilizzare $.ajax(). 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 i agli li headers h d d ll' dell'oggetto tt XMLHttpRequest; XMLHtt R t ajaxSend (globale): evento attivato prima che la richiesta sia in esecuzione. Uguale g ap prima ma è un evento g 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 dell'evento evento di prima, 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. processare 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> <i <input t type="button" t "b tt " id="btnGO" id "bt GO" value="GO!!!" l "GO!!!" onclick="CallExternalScriptMethod( 'HelloWorld HelloWorld.js js','HelloWorld()')" HelloWorld() ) /> </div> Lo Script con XMLHttpRequest 51 <script type ="text/javascript"> function CallExternalScriptMethod(scriptUrl, targetCall) { var AJAX = null; if (window.XMLHttpRequest) AJAX = new XMLHttpRequest(); else AJAX = new ActiveXObject( ActiveXObject("Microsoft.XMLHTTP"); Microsoft.XMLHTTP ); AJAX.onreadystatechange = function() { if (AJAX.readyState == 4 && AJAX.status == 200) { eval(AJAX.responseText); l eval(targetCall);} } AJAX.open("GET", scriptUrl, true); AJAX.send(null);; } </script> Lo Script con jQuery 52 <script type ="text/javascript" src ="http://code.jquery.com/jquery-latest.js"></script> <script i type ="text/javascript"> " /j i " function CallExternalScriptMethod(scriptUrl, targetCall) { $.getScript(scriptUrl, function() { eval(targetCall); }); } </script> Molto più breve!!! ToolKit DHTMLX 53 DHTMLX è una libreria JavaScript che fornisce funzionalità essenziali per lo sviluppo di applicazioni web cross-browser. Offre Off una raccolta lt completa l t di componenti ti per l’interfaccia utente, ad esempio: griglie, combo, strutture gerarchiche, hi h calendari, l d i etc Il tutto basato sulla tecnologia g AJAX ed utilizzabile con qualunque linguaggio server (php, asp, java, etc) 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 O una volta lt scelto lt il componente t che h sii vuole l implementare nel sito è sufficiente includere il file js correttii e utilizzare ili il codice di ffornito i di esempio i insieme al componente stesso. CONTRO: trattandosi di componenti “preconfezionati” la flessibilità è minore. confezionati Un esempio: dhtmlxgrid 55 Si tratta di una visualizzazione tabellare di dati user friendly e accattivante dal punto di vista user-friendly estetico Nel nostro caso i campi saranno tutti editabili e quelli di tipo data compilabili tramiti un minicalendario. minicalendario 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, [php asp, asp jsp, jsp etc]) Il file deve rispettare alcune regole di struttura imposte dal p componente. <rows> <row id="1“><cell>John Grisham</cell><cell>08/02/1955</cell><cell/></row> <row id 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> / / / 99 / / / </rows> Lo Script che visualizza i dati 57 <script> mygrid = new dhtmlXGridObject('gridbox'); mygrid.setImagePath("../../codebase/imgs/"); mygrid.setHeader("Name,Date of Birth, First Book Published"); mygrid.setInitWidths("*,100,100"); id tI itWidth ("* ") mygrid.setColAlign("left,center,center"); mygrid setColTypes("ed mygrid.setColTypes( ed,dhxCalendar,dhxCalendarA dhxCalendar dhxCalendarA"); ); mygrid.setColSorting("str,date,date"); mygrid setSkin("dhx mygrid.setSkin( dhx_skyblue skyblue"); ); mygrid.init(); yg ( ); mygrid.loadXML(“dati.xml"); </script> Commenti allo script 58 Il componente in pratica è l’oggetto mygrid istanziato con new dhtmlXGridObject( dhtmlXGridObject('gridbox'); gridbox ); Tramite l’utilizzo dei metodi esposti viene caratterizzata i la l grid id • 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"); Framework e toolkit che coinvolgono altri linguaggi oltre JavaScript 59 Google Web Toolkit – GWT (Java) p // g g / / / / http://code.google.com/intl/it-IT/webtoolkit/ OPENXAVA (Java) http://www openxava org/web/32035/ajax-frameworkhttp://www.openxava.org/web/32035/ajax framework b?src=ajax-b Ajax Control Toolkit (ASP.NET) (ASP NET) http://www.asp.net/ajaxlibrary/act.ashx Aj Agent Ajax A (PHP) http://www.hemmady.com/ajaxagent h // h d / j CakePHP (PHP) http://cakephp.org/ Ne esistono tanti altri …. Riferimenti AJAX 60 Ajax: A New Approach to Web Applications articolo di Jesse James Garrett http://www.adaptivepath.com/publications/essays/ar chives/000385 php chives/000385.php AJAX:Getting Started p // p g/ / / g_ https://developer.mozilla.org/en/AJAX/Getting_Start ed