Ajax - Presente e futuro delle applicazioni web

Autore: Daniele Grillo Professione: Domino Developer AJAX “Presente e futuro delle applicazioni WEB” Sponsored by 1

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

Cosa succedeva prima… 3

Cosa cambia con ajax 4

Combinazione dei seguenti elementi HTML 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 interagirvi L’oggetto XMLHttpRequest per l’interscambio asincrono di dati tra il browser ed il server WEB XML 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

L’oggetto XMLHttpRequest E’ l’elemento 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 dell’oggetto standardizzando le chiamate estese ad ogni browser 7

XHR in diversi browser IE5 e IE6: ActiveXObject(quot;Microsoft.XMLHTTPquot;) e ActiveXObject(quot;Msxml2.XMLHTTPquot;) Firefox, Safari e Opera ed Explorer 7: new XMLHttpRequest() IceBrowser: window.createRequest() 8

Codice di inizializzazione var xmlhttp=false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) // JScript usa una condizione per creare l’oggetto partendo prima dalle vecchie vers di IE try { 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

Metodi dell’oggetto XMLHttpRequest (wikipedia) 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 HTTP specificato open( 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 essere gestita in modo asincrono oppure no – quot;truequot; significa che lo script può proseguire l'elaborazione senza aspettare la risposta dopo il metodo send(), mentre quot;falsequot; significa che lo script è costretto ad aspettare una risposta dal server prima di continuare. send( content ) Invia la richiesta setRequestHeader( chiave, valore) Aggiunge la coppia chiave/valore alla richiesta da inviare. 10

Parametri XMLHttpRequest (wikipedia) onreadystatechange Gestore dell'evento lanciato ad ogni cambiamento di stato. readyState Restituisce lo stato corrente dell'istanza di XMLHttpRequest: 0 = non inizializzato, 1 = aperto, 2 = richiesta inviata, 3 = risposta in ricezione e 4 = risposta ricevuta. responseText Restituisce la risposta del server in formato stringa responseXML Restituisce la risposta del server come XML, che potrà essere analizzato e parsato come secondo le specifiche DOM del W3C. status Ritorna il codice HTTP restituito dal server (per esempio 404 per quot;Not Foundquot; e 200 per quot;OKquot;). statusText Restituisce lo status in forma di stringa descrittiva (per esempio. quot;Not Foundquot; oppure quot;OKquot;). 11

Aprire una chiamata Ajax semplice xmlhttp.open(quot;GETquot;, “Risultato?OpenPagequot;,true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { alert(xmlhttp.responseText) } } xmlhttp.send(null) 12

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: 52282 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

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

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

Browser che supportano AJAX Apple 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

Alcuni progetti ajax free Dojo4Domino Daniele Vistalli Beta Framework che utilizza Dojo per visualizzare gli oggetti Domino ( Form, Viste) in ajax DomAngle Julien Bottemanne (OpenNtf.org) Motore di ricerca Web esegue una FTsearch su N database contemporaneamente Xided http://www.timtripcony.com/ Beta di un Web Lotus Designer database Picture Gallery Michael Borchardt Permette di salvare / condividere e Pantelis Botsas (OpenNtf.org) visualizzare foto online Domino Outline 2 Jon Hart (OpenNtf.org) Renderizza dinamicamente gli outline in AJAX Menu AJAX menu Transformer Ext.nd Rich Waters Framework di sviluppo con Integrazione Jack Ratcliff tra Domino + Ext Nathan Freeman (OpenNtf.org) NotesView2 Jason a Tomas (OpenNtf.org) Renderizza le viste Notes in formato AJAX FileUploader Vince di Mascio Permette di effettuare l’upload Ajax di diversi file in una form DomCalendar Vince di Mascio Alpha Calendario Domino stile Google 20

Limiti di AJAX Il bottone TORNA INDIETRO del browser va gestito opportunamente in applicazioni di questo tipo Nello sviluppare applicazioni Ajax è necessario tenere presente dell’accessibilità ed implementare dei fallback. E’ fondamentale che sia supportato ed attivato Javascript sul browser XHR non permette di effettuare chiamate dirette ad altri domain per questione di security (esistono problematiche cross- domain scripting) 21

usare un web proxy per chiamate cross-domain Tutti i moderni browser impongono una restrizione nelle chiamate XMLHttpRequest Il vincolo è che le chiamate debbano essere eseguite all’interno dello stesso dominio, stessa porta e stesso protocollo 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”. Nell’esempio sotto riportato non è consentito fare richieste su un dominio diverso ( nel nostro caso IBM.COM ) 23

usare un Web Proxy per chiamate Cross-Domain Una soluzione è far diventare il web-server un proxy per le chiamate esterne 24

web proxy con Lotus Domino come? Realizzare un Agent con il compito di ritoranare l’url richiesta. L’agente riceve in input l’URL, effettua una GET, legge la pagina e la serve come ritorno (Proxy) 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 L’URL passato come parametro Document 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 XML PrintWriter 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 web pw.println(result); doc.recycle(); } catch(Exception e) { e.printStackTrace(); } } 26 }

Comandi URL Domino per Leggere XML e JSON ?ReadViewEntries Con 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

Comandi URL Domino per Leggere XML e JSON Outline?ReadEntries Legge l’XML di un Outline ?ReadDesign Legge il design di una vista 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 sull’oggetto ritornato 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

Gli Autori Daniele Grillo Claudio Meregalli Gli Speakers Giuseppe Grasso Daniele Vistalli Fabrizio Marchesano Lui Giorgio Blangetti Davide Pannuto Stefano Mastella Enzo Stanzione Marco Fabbri I Nostri Sponsor

http://www.casinopeccio.com	34
http://day.dominopoint.it	28
http://www.casinopecci.com	20
http://www.slideshare.net	15
http://pecciola.com	11
http://www.casinopecciola.com	6
http://www.casinopecciola.com	6
http://webcache.googleusercontent.com	1

Ajax - Presente e futuro delle applicazioni web

by Dominopoint - Italian Lotus User Group on Oct 02, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 121

Statistics

Ajax - Presente e futuro delle applicazioni web — Presentation Transcript