introduzione ai principi dello sviluppo di applicazioni web interattive

INTRODUZIONE AI PRINCIPI DELLO SVILUPPO
DI APPLICAZIONI WEB INTERATTIVE
(© I.D. Falconi ~ 21.12.2013)
INTRODUZIONE AD AJAX
Le caratteristiche di una applicazione Ajax sono sostanzialmente due:
 aggiornare una pagina web senza doverla necessariamente ricaricare interamente
 eseguire delle operazioni sul server in seguito ad un evento generato sul client senza
necessariamente postare alcun FORM.
Sappiamo come tramite la proprietà innerHTML del documento sia possibile modificare il
contenuto di una porzione della pagina, e di come gli elementi possano essere resi visibili
o non visibili attraverso le proprietà di stile visibility e display.
Nelle applicazioni pratiche capita spesso che ad una azione dell'utente debbano essere
visualizzati dati che non siano già nella memoria del browser, ma debbano essere
richiesti al server.
Vediamo alcune situazioni tipiche:
Si pensi ad un programma per la gestione della situazione sanitaria dei pazienti di un
ospedale. Quando il medico digita il codice del paziente deve apparire la pagina con la sua
cartella clinica. Ovviamente non è
pensabile
che
tutti
i
dati
dell'ospedale siano nella memoria
del browser: è quindi necessario,
quando il medico chiede il dettaglio
di una certa patologia, eseguire una
richiesta al server "di nascosto", e aggiornare la pagina del paziente, o meglio ancora,
una parte di essa, non appena si ottiene la risposta.
Altro esempio, una chat. Mentre un utente
digita il suo messaggio nella apposita area, deve
essere possibile, nel frattempo, ricevere i
messaggi degli altri utenti e, anche, mantenere
aggiornata la lista degli utenti che escono o
entrano in chat, senza dover necessariamente
farne richiesta esplicita con conseguente
ricaricamento della pagina.
 Terzo caso, la ricerca incrementale di Google:
Ciò che sta alla base degli esempi illustrati, è la capacità di fare richieste al server in
maniera asincrona, ovvero in background, senza che l'utente si accorga di niente. In
questo modo Javascript può contattare il server spedendo e ricevendo informazioni
senza che la pagina venga ricaricata.
FLUSSO DELLE ATTIVITÀ
 Metodo tradizionale (sincrono)
client
attività utente
tempo
server
elaborazione lato-server
 Metodo AJAX (asincrono)
client
interfaccia utente-browser
attività utente
AJAX
elaborazione lato-client
tempo
server
elaborazione lato-server
L’OGGETTO XMLHttpRequest
 EVENTO
(onclick, onblur, ... )
 FUNZIONE di gestione evento
 CREAZIONE OGGETTO
XMLHttpRequest
Definizione parametri della richiesta:
 POST/GET
 url pagina di destinazione
 sinc/asinc
 querystring
 funzione di gestione della risposta
 INVIO RICHIESTA AL SERVER

RESTITUZIONE CONTROLLO
ALLA PAGINA
&
ATTESA RISPOSTA DAL SERVER

AGGIORNAMENTO PAGINA
SENZA RICARICAMENTO
(DOM)


ELABORAZIONE
RICHIESTA
COMPLETAMENTO
RICHIESTA
(DATI ELABORAZIONE)
UN’IMPLEMENTAZIONE DI COMUNICAZIONE AJAX:
 L’OGGETTO AjaxCom
POSTrequest
GETrequest
request
XMLHttpRequest /
ActiveXObject
requestCompleted
function AjaxCom()
{this.request=null;
// verifica che il browser supporti AJAX
if (window.XMLHttpRequest) // -------- Firefox, IE7+, Opera, Safari, ...
{this.request = new XMLHttpRequest();}
else if (window.ActiveXObject) // ------------ IE5 IE6
{this.request = new ActiveXObject("Msxml2.XMLHTTP");
if (! this.request)
{this.request = new ActiveXObject("Microsoft.XMLHTTP");}
}
if (!this.request) {alert ('AJAX non supportato!')};
//---------------------------------------------------------------------------this.reqCompleted = function() // ricezione risposta dal server
{if (this.request.readyState == 4)
{if (this.request.status== 200)
{return true}
else
{alert('errore HTTPRequest: stato = '+
this.request.status);
return false;
}
}
}
//---------------------------------------------------------------------------this.POSTrequest = function(action,asynch,respHandle,queryString)
{if (queryString != null && queryString.length > 0)
{try
{this.request.onreadystatechange=respHandle;
this.request.open("POST",action,asynch);
this.request.setRequestHeader("Content-Type",
"application-x-www-form-urlencoded; charset=UTF-8");
this.request.send(queryString);
}
catch(errv)
{alert('errore: '+errv.message);}
}
}
//---------------------------------------------------------------------------this.GETrequest = function(action,asynch,respHandle)
{try
{this.request.onreadystatechange=respHandle;
this.request.open("GET",action,asynch);
this.request.send(null);
}
catch(errv)
{alert('errore: '+errv.message);}
}
}
PASSI FONDAMENTALI PER L’IMPOSTAZIONE DELLA COMUNICAZIONE AJAX
- Collegamento allo script contenente l’oggetto AjaxCom per la comunicazione col
server
<script type="text/javascript" src="AjaxCom.js"></script>
- Impostazione degli eventi che avviano la richiesta
<body onload=”inviaReq1();” > ... <input onenter=”inviaReq2();” ...
- Assegnazione degli id agli oggetti “contenitori” della risposta.
<div id=”BoxRisposta1” > ... </div>
<div id=”BoxRisposta2” > ... </div>
- Creazione oggetto per la comunicazione HTTP col server
(a seconda del browser XMLHttpRequest / Microsoft.XMLHTTP / Msxml2.XMLHTTP)
var reqCom = new AjaxCom();
- Definizione dei parametri della richiesta (che verrà inviata al verificarsi dell’evento
programmato, o su richiesta dell’utente)
function inviaReq1()
{ :
:
:
url della pagina sul server
che dovrà elaborare la
richiesta
( + queryString in caso di
queryString con i dati
(nel caso di GET deve
essere concatenata all’url e
non essere specificata nella
richiesta)
reqCom.POSTrequest(url,true,gestisciResp,queryString);
};
oppure GETrequest
asincrona (true)
/ sincrona (false)
funzione da eseguire
alla ricezione della
risposta dal server
- Definizione della funzione per la gestione della risposta (Response Handler)
function gestisciResp()
Dati ricevuti dal server
{ if (reqCom.reqCompleted())
{ var dati = reqCom.request.responseText;
document.getElementById("BoxRisposta1").innerHTML=dati;
}
}
ricevuta risposta dal server
visualizzazione dei risultati