INTRODUZIONE AI PRINCIPI DELLO SVILUPPO DI APPLICAZIONI WEB INTERATTIVE

Transcript

1 INTRODUZIONE AI PRINCIPI DELLO SVILUPPO DI APPLICAZIONI WEB INTERATTIVE ( I.D. Falconi ~ )

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

3 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

4 Metodo AJAX (asincrono) client interfaccia utente-browser attività utente AJAX elaborazione lato-client tempo server elaborazione lato-server

5 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 ELABORAZIONE RICHIESTA AGGIORNAMENTO PAGINA SENZA RICARICAMENTO (DOM) COMPLETAMENTO RICHIESTA (DATI ELABORAZIONE)

6 UN IMPLEMENTAZIONE DI COMUNICAZIONE AJAX: L OGGETTO AjaxCom POSTrequest GETrequest requestcompleted request XMLHttpRequest / ActiveXObject 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);

7 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() { if (reqcom.reqcompleted()) { var dati = reqcom.request.responsetext; document.getelementbyid("boxrisposta1").innerhtml=dati; ricevuta risposta dal server Dati ricevuti dal server visualizzazione dei risultati