Daniele Grillo spiega cosa sia Ajax le fondamenta di questo strumento e come integrarlo in Lotus Domino

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

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 ajax
4

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 13

14. 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

15. Leggere un header
xmlhttp.open(quot;HEADquot;, “Risultato?OpenPagequot;,true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.getAllResponseHeaders())
}
}
xmlhttp.send(null)
15

16. 16

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

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

25. 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

26. 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
}

27. 27

28. 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

29. Comandi URL Domino per Leggere XML e JSON
Outline?ReadEntries Legge l’XML di un Outline
?ReadDesign Legge il design di una vista
29

30. 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

31. 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

32. 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