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