Come si fa a utilizzare AJAX con i Widget? La domanda non dovrebbe essere posta in questi termini. Infatti se siete abituati a utilizzare Ajax con il framework .NET è ovvio che non possono essere utilizzati nè ScriptManager, nè UpdatePanel. Dobbiamo infatti tornare a programmare Javascript lato client senza nessun aiuto da parte di framework particolare. Quindi la domanda giusta sarebbe 'come possiamo adottare i meccanismi AJAX senza nessun aiuto particolare e adottare tali meccanismi anche sui Widget?' La risposta si articola in più fasi, partendo da una breve panoramica della tecnologia 'core' di AJAX, sino ad arrivare alla sua applicazione in un browser.
AJAX
Ovvero Asynchronous Javascript XML. Un meccanismo per poter effettuare delle richieste in un browser ed eliminare il refresh della pagina. Tutto nacque un pò di anni fa quando nel marzo del 1999 alla versione di Internet Explorer 5.0 venne fornita una versione dell'oggetto XMLHttpRequest. Quest'oggetto è il protagonista di tutta la tecnologia AJAX. Infatti possiamo immaginarci quest'oggetto come il responsabile della renderizzazione di una singola porzione della pagina Web. La renderizzazione avviene tramite richieste al server (delle normalissime HttpRequest) e gestione delle risposte del server stesso (HttpResponse), il tutto senza disturbare la finestra principale del browser che viene renderizzata in maniera indipendente. La gestione delle risposte è asincrona, cioè l'oggetto XMLHttpRequest invia la richiesta in maniera non bloccante e, senza quindi attendere la risposta, gestirà la response tramite una funzione di callback. Ecco in figura quanto descritto:
Non è indicato in figura, ma va da se che possono essere presenti più di un oggetto XMLHttpRequest, in grado di aggiornare in maniera indipendente e assolutamente asincrona più porzioni della pagina web. E' questo poi in definitiva il ruolo degli UpdatePanel di .NET caratterizzati da un XMLHttpRequest.
Code Up!
Vediamo adesso il codice 'vero'. Riprendendo l'esempio del post precedente continuiamo a scrivere il nostro Javascript. Vogliamo che nella nostra applicazione Widget, al click di un bottone venga aggiornato in maniera asincrona il valore di un tag <div>, definito 'divquote' con il valore recuperato da una richiesta ad una pagina aspx (la cosa poteva risolversi anche in un'invocazione ad un web service). L'aggiornamento di 'divQuote' viene implementato tramite una callback ad una funzione javascript chiamata 'harvestResult'. Vediamo intanto il body del widget:
Semplicissimo chunk dove al click del bottone ci aspettiamo (senza refresh) di vedere il valore del titolo selezionato nella textbox. A questo punto andiamo a vedere il codice di gestione del click:
La prima cosa che facciamo è quella di creare un oggetto XMLHttprequest e controllare che la creazione sia andata a buon fine. Se tutto è ok si chiama una funzione che si preoccuperà di effettuare la richiesta HttpRequest, passando i parametri essenziali quali l'xmlhttp object innanzitutto e poi il valore digitato nella textbox contenente il simbolo del titolo di borsa da recuperare (si noti l'uso della funzione DOM getElementById() supportata dal browser Mobile).
La funzione imposta la url a cui chiedere la risorsa, dopodichè prepara una GET (con xmlhttpopen). Sino a qui non si è spedito nulla. Prima di fare la send si predispone la funzione (anonima) di callback che al variare dello stato dell'oggetto xmlhttp sul valore 4 va a impostare i risultati tramite la funzione harvestResults. Il valore 4 significa che la risposta è arrivata tutta (non che la risorsa sia stata trovata però). Infine si invia la httprequest e si attende la risposta dal server. Ecco cosa accade quando arriva la risposta:
Si controlla se la risorsa è stata davvero trovata (status == 200). Se si, si recupera l'XML di risposta e si valorizza il div target con il valore degli attributi 'name' e 'last' del tag 'ticker' all'interno dell'XML inviatoci dal server. Si ricorda che per poter accedere alla rete da parte del widget è necessario configurare correttamente il manifest e fornire esplicitamente il consenso al momento in cui verrà chiesto. Tutto il codice lo trovate naturalmente qui.
bye!
sv.
Subscribe