1. Autore: Daniele GrilloProfessione: Domino Developer AJAX Presente e futuro delle applicazioni WEBSponsored by1

2. Cos Ajax ? (tratto da wikipedia) Ajax, acronimo di Asynchronous Javascript and XML, una tecnica di sviluppo web per creare applicazioni web interattive.L'intento di tale tecnica quello di ottenere pagine web che rispondono in maniera pi rapida, grazie allo scambio in background di piccoli pacchetti di dati con il server cos che l'intera pagina web non debba essere ricaricata ogni volta che l'utente effettua una modifica.Questa tecnica riesce, quindi, a migliorare l'interattivit, la velocit e l'usabilit di una pagina web.2 3. Cosa succedeva prima 3 4. Cosa cambia con ajax4 5. Combinazione dei seguenti elementiHTML o XHTML e CSS per il Markup e lo stile DOM (Document Object Model) manipolato attraverso linguaggi di script come Javascript per leggere le informazioni ed interagirviLoggetto XMLHttpRequest per linterscambio asincrono di dati tra il browser ed il server WEBXML generalmente viene usato questo formato di scambio dati per gestire le transazioni, ma non fondamentale ( si pu usare JSON o HTML o qualsiasi altro formato ) 6 6. Loggetto XMLHttpRequest E lelemento chiave delle chiamate AJAX poich utilizza un set API per eseguire le chiamate in back-end alle pagine del webserver. Il pi grande vantaggio di XMLHttpRequest la possibilit di aggiornare dinamicamente una pagina web senza ricaricare l'intera pagina. Viene usato da alcun siti web per velocizzare applicazioni dinamiche. Un esempio di applicazione XMLHttpRequest il servizio di posta elettronica Gmail di Google.Nasce come ActiveX in Internet Explorer 5 e viene successivamente implementato in modo nativo in altri browser come Mozilla, Firefox, Safari, Opera etc..Oltre a XML, XMLHTTP pu essere usato per prendere dati in altri formati, come JSON o anche testo semplice.Il W3C sta definendo le API delloggetto standardizzando le chiamate estese ad ogni browser 7 7. XHR in diversi browserIE5 e IE6: ActiveXObject(quot;Microsoft.XMLHTTPquot;) e ActiveXObject(quot;Msxml2.XMLHTTPquot;) Firefox, Safari e Opera ed Explorer 7: new XMLHttpRequest()IceBrowser: window.createRequest() 8 8. Codice di inizializzazione var xmlhttp=false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) // JScript usa una condizione per creare loggetto partendo prima dalle vecchie vers di IEtry { xmlhttp = new ActiveXObject(quot;Msxml2.XMLHTTPquot;);} catch (e) { try {xmlhttp = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } catch (E) {xmlhttp = false; }} @end @*/ if (!xmlhttp && typeof XMLHttpRequest!='undefined') {try {xmlhttp = new XMLHttpRequest();} catch (e) {xmlhttp=false;} } if (!xmlhttp && window.createRequest) {try {xmlhttp = window.createRequest();} catch (e) {xmlhttp=false;} }9 9. Metodi delloggetto XMLHttpRequest (wikipedia) abort()Cancella la richiesta in atto. getAllResponseHeaders()Restituisce sotto forma di stringa tutti gli header HTTPricevuti dal server getResponseHeader( nome_header ) Restituisce il valore dell'header HTTP specificatoopen( metodo, URL )Specifica il metodo, l'URL, ed altri parametri opzionali per la open( metodo, URL, async ) richiesta. Il parametro metodo pu assumere valore di open( metodo, URL, async, userName ) quot;GETquot;, quot;POSTquot;, oppure quot;PUTquot; (quot;GETquot; utilizzato quando si open( metodo, URL, async, userName, password ) richiedono dati, mentre quot;POSTquot; utilizzato per inviare dati,specialmente se la lunghezza dei dati da trasmettere maggiore di 512 bytes).Il parametro URL pu essere sia relativo che assoluto.Il parametro quot;asyncquot; specifica se la richiesta deve esseregestita in modo asincrono oppure no quot;truequot; significa che loscript pu proseguire l'elaborazione senza aspettare larisposta dopo il metodo send(), mentre quot;falsequot; significa che loscript costretto ad aspettare una risposta dal server primadi continuare. send( content )Invia la richiestasetRequestHeader( chiave, valore)Aggiunge la coppia chiave/valore alla richiesta da inviare.10 10. Parametri XMLHttpRequest (wikipedia) onreadystatechangeGestore dell'evento lanciato ad ogni cambiamento di stato. readyStateRestituisce lo stato corrente dell'istanza di XMLHttpRequest: 0 = non inizializzato, 1 = aperto, 2 = richiesta inviata, 3 = risposta in ricezione e 4 = risposta ricevuta. responseTextRestituisce la risposta del server in formato stringaresponseXML Restituisce la risposta del server come XML, che potr essere analizzato e parsato come secondo le specifiche DOM del W3C. statusRitorna il codice HTTP restituito dal server (per esempio 404 per quot;Not Foundquot; e 200 per quot;OKquot;). statusTextRestituisce lo status in forma di stringa descrittiva (per esempio. quot;Not Foundquot; oppure quot;OKquot;).11 11. Aprire una chiamata Ajax semplicexmlhttp.open(quot;GETquot;, Risultato?OpenPagequot;,true);xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) {alert(xmlhttp.responseText) }}xmlhttp.send(null) 12 12. 13 13. Esempio header di una pagina web HTTP/1.1 200 OK Server: Lotus Domino Cache-Control: max-age=172800 Expires: Sat, 06 Apr 2002 11:34:01 GMT Date: Thu, 04 Apr 2002 11:34:01 GMT Content-Type: text/html Accept-Ranges: bytes Last-Modified: Thu, 14 Mar 2002 12:06:30 GMT ETag: quot;0a7ccac50cbc11:1aadquot; Content-Length: 5228214 14. Leggere un header xmlhttp.open(quot;HEADquot;, Risultato?OpenPagequot;,true);xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) {alert(xmlhttp.getAllResponseHeaders()) }}xmlhttp.send(null)15 15. 16 16. Ultima modifica al file xmlhttp.open(quot;HEADquot;, Risultato?OpenPagequot;,true);xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) {alert(Pagine Modificata in data - quot;+ xmlhttp.getResponseHeader(quot;Last-Modifiedquot;)) }}xmlhttp.send(null)17 17. Verifica esistenza URL xmlhttp.open(quot;HEADquot;, Risultato?OpenPagequot;,true);xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) {if (xmlhttp.status==200) alert(quot;URL esiste!quot;) else if (xmlhttp.status==404) alert(quot;URL non esiste!quot;)else alert(Lo stato quot;+xmlhttp.status) }}xmlhttp.send(null)18 18. Browser che supportano AJAXApple Safari 1.2 and above Konqueror Microsoft Internet Explorer (e browser derivato) 5.0 e successivi (Mac OS 9 or versione per X non supportata) Mozilla/Mozilla Firefox (e browser ad esso derivati) 1.0 e successivi Netscape 7.1 e successivi Opera 7.6 e successivi Opera Mobile Browser 8.0 e successivi. WebRenderer (Java browser component)19 19. Alcuni progetti ajax free Dojo4DominoDaniele VistalliBeta Framework che utilizza Dojo pervisualizzare gli oggetti Domino ( Form,Viste) in ajax DomAngle Julien Bottemanne (OpenNtf.org) Motore di ricerca Web esegue unaFTsearch su N databasecontemporaneamente Xidedhttp://www.timtripcony.com/ Beta di un Web Lotus Designerdatabase Picture GalleryMichael Borchardt Permette di salvare / condividere ePantelis Botsas (OpenNtf.org) visualizzare foto onlineDomino Outline 2 Jon Hart (OpenNtf.org)Renderizza dinamicamente gli outline in AJAX MenuAJAX menu Transformer Ext.nd Rich Waters Framework di sviluppo con IntegrazioneJack Ratcliff tra Domino + ExtNathan Freeman (OpenNtf.org) NotesView2 Jason a Tomas (OpenNtf.org) Renderizza le viste Notes in formatoAJAX FileUploader Vince di Mascio Permette di effettuare lupload Ajax didiversi file in una form DomCalendarVince di Mascio Alpha Calendario Domino stile Google20 20. Limiti di AJAXIl bottone TORNA INDIETRO del browser va gestito opportunamente in applicazioni di questo tipo Nello sviluppare applicazioni Ajax necessario tenere presente dellaccessibilit ed implementare dei fallback. E fondamentale che sia supportato ed attivato Javascript sul browserXHR non permette di effettuare chiamate dirette ad altri domain per questione di security (esistono problematiche cross- domain scripting) 21 21. usare un web proxy per chiamate cross-domain Tutti i moderni browser impongono una restrizione nelle chiamate XMLHttpRequestIl vincolo che le chiamate debbano essere eseguite allinterno dello stesso dominio, stessa porta e stesso protocollo22 22. usare un web proxy per chiamate cross-domain Qualora la chiamata venga fatta su un dominio diverso, questa non sar permessa ed il browser produrr un messaggio di Permission Denied. Nellesempio sotto riportato non consentito fare richieste su un dominio diverso ( nel nostro caso IBM.COM )23 23. usare un Web Proxy per chiamate Cross-Domain Una soluzione far diventare il web-server un proxy per le chiamate esterne 24 24. web proxy con Lotus Domino come? Realizzare un Agent con il compito di ritoranare lurl richiesta. Lagente riceve in input lURL, effettua una GET, legge la pagina e la serve come ritorno (Proxy) 25 25. import lotus.domino.*; Agent esempio Lotus Domino import java.io.*; import java.net.*; public class JavaAgent extends AgentBase {public void NotesMain() {try {Session session = getSession();AgentContext agentContext = session.getAgentContext();// Recupero LURL passato come parametroDocument doc = agentContext.getDocumentContext();String newurl = doc.getItemValueString(quot;Request_Contentquot;);newurl = newurl.substring(newurl.indexOf(quot;url=quot;) + 4); URL url = new URL (newurl);String result = quot;quot;;// Scrivo il content-type in XML perch un RSS di fatto un XMLPrintWriter pw = getAgentOutput();pw.println(quot;Content-type: text/xmlquot;);// Mi collego alla pagina richiesta e compilo la variabile result BufferedReader in = new BufferedReader(new InputStreamReader(url.openStream()));String inputLine;while ((inputLine = in.readLine()) != null) {result += inputLine.toString();} // stampo la variabile result su webpw.println(result);doc.recycle();} catch(Exception e) {e.printStackTrace();}} 26 } 26. 27 27. Comandi URL Domino per Leggere XML e JSON ?ReadViewEntriesCon questo comando si accede ai dati di una vista in formato XML senza grafica ed attributi come font, separatori, formato delle date, settaggi html, template delle viste e frame di destinazione Sintassi : http://Host/Database/ViewName?ReadViewEntries http://Host/Database/ViewUniversalID?ReadViewEntries http://Host/Database/$defaultview?ReadViewEntries Argomenti Opzionali : collapse= n Count= n Expand= n KeyType= text or time ResortAscending= column number ResortDescending= column number RestrictToCategory= category Start= n StartKey= string UntilKey= string OutputFormat=JSON 28 28. Comandi URL Domino per Leggere XML e JSON Outline?ReadEntriesLegge lXML di un Outline ?ReadDesignLegge il design di una vista 29 29. Perch usare JSON (Javascript Object Notation)JSON (JavaScript Object Notation) un semplice formato per lo scambio di dati. Per le persone facile da leggere e scrivere, mentre per le macchine risulta facile da generare e analizzare. Si basa su un sottoinsieme del Linguaggio di Programmazione JavaScript, Standard ECMA-262 Terza Edizione - Dicembre 1999. Basta eseguire una JS EVAL(valore ritorno chiamata ajax) per lavorare sulloggetto ritornato30 30. Esempio struttura JSON (Javascript Object Notation){ formquot;: anagraficaquot;, campiquot;: [{nomequot;: grilloquot;, cognomequot;: danielequot;},{nomequot;: claudioquot;, cognomequot;: meregalliquot;},{nomequot;: giuseppequot;, cognomequot;: grassoquot;} ] } var=eval(oggettoJSON) var.campi[0].nome restituisce grillo 31 31. Gli Autori Daniele Grillo Claudio MeregalliGli Speakers Giuseppe GrassoDaniele VistalliFabrizio Marchesano LuiGiorgio BlangettiDavide PannutoStefano MastellaEnzo StanzioneMarco Fabbri I Nostri Sponsor