Per la sola tecnologia ASP.NET vale la pena spendere qualche parola in più riguardo lo sviluppo di applicativi AJAX poiché gli esempi proposti in questa guida, strutturati spesso forzatamente in modo analogo agli stessi più idonei per l'interfacciamento con PHP, non presentano il modo più naturale di sfruttare questo tipo di interazione.
Principalmente, oltre a permettere un confronto per gli interessati dell'una o dell'altra tecnologia, si è mostrato volutamente come una pagina aspx possa comunque rispettare gli standards senza dover utilizzare necessariamente le comode automazioni presenti all'interno dell'ambiente di sviluppo, in questo caso Visual Web Developer, il quale seppur modifichi prepotentemente il layout mette a disposizione degli sviluppatori un'interfaccia dedicata e la possibilità di gestire al meglio i vari eventi.
Il codice JavaScript viene generato direttamente dal server ed aggiunto alla pagina, mentre il controllo sullo stato delle operazioni supporta nativamente la gestione delle eccezioni generate eventualmente dai metodi o funzioni addette a manipolare lo scambio dei dati.
La scelta in questo caso è sicuramente complessa poiché rinunciare alla possibilità di gestire eccezioni o sfruttare il controllo messo a disposizione dall'ambiente, a favore della pulizia del codice, della degradabilità strutturata o della più mirata accessibilità potrebbe non essere la soluzione migliore, soprattutto qualora l'applicativo dovesse essere mediamente complesso.
Quanto appena detto potrebbe essere mostrato attraverso questo esempio dedicato al solo ambiente ASP.NET, che spieghiamo commentando il codice.
Listato 32. Esempio di ASP.NET + AJAX
<%@ Page Language="C#" debug="true" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>
<script runat="server">
// per sfruttare il codice messo a disposizione dal Framework
// è necessario implementare l'interfaccia
// System.Web.UI.ICallbackEventHandler
// a questo punto è possibile utilizzare una variabile
// di tipo stringa per memorizzare nell'evento
// dedicato quanto inviato dal javascript
private System.String __nomeUtente;
// tale variabile verrà assegnata al richiamo
// dell'evento callback, gestito in automatico da ASP.NET
void ICallbackEventHandler.RaiseCallbackEvent(System.String stringaEvento)
{
// assegnazione della stringa inviata all'evento
__nomeUtente = stringaEvento;
}
// è possibile dichiarare il metodo GetCallbackResult
// il quale avrà il compito di effettuare le operazioni
// necessarie prima che la funzione dedicata javascript
// riceva il risultato dell'interazione
System.String ICallbackEventHandler.GetCallbackResult()
{
// in questo caso si restituisce una stringa
// differente a seconda che il nome sia
// stato scritto o meno ...
System.String risultato;
if (__nomeUtente.Length > 0)
risultato = "Ciao <strong>" + __nomeUtente + "</strong>,
benvenuto in AJAX!";
else
risultato = "Non vuoi dirmi il tuo nome ?";
// ... per poi inviare quanto assegnato
// alla funzione javascript, richiamata sempre
// in automatico
return risultato;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" >
<head>
<title>AJAX :: Esempio dedicato per C# ed ASP.NET</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="guida ajax, esempio ASP.NET" />
<meta name="keywords" content="guida, ajax, remote scripting, esempio, esempi" />
<meta name="author" content="Andrea Giammarchi per HTML.IT" />
<script type="text/javascript" src="utility.js"><!--// ajax utility //--
></script>
<script type="text/javascript"><!--//
// funzione dedicata a questa interazione
// riceve una stringa contenente il nome
// inviato dall'utente e l'elemento
// che ha richiamato l'interazione asincrona
function OnCallback(risultato, elemento) {
// messaggio risultante
prendiElementoDaId('contenuto-dinamico').innerHTML = risultato;
};
// funzione richiamata qualora
// dovessero esserci eccezioni durante l'interazione
function OnException(messaggioEccezione) {
// messaggio risultante
prendiElementoDaId('contenuto-dinamico').innerHTML =
"Problemi durante l'interazione asincrona." +
messaggioEccezione;
};
//--></script>
<style type="text/css" media="all">@import "semplice.css";</style>
</head>
<body>
<div>
<!--//
Per poter usufruire della libreria integrata
e permettere a questa pagina di implementare il
codice utile per effettuare l'interazione
asincrona è necessario processare la form sul server
//-->
<form runat="server">
<fieldset>
<legend>Permettimi di salutarti</legend>
<label for="nome-utente">Scrivi il tuo nome</label>
<input
tabindex="1"
id="nome-utente"
name="nome-utente"
type="text"
value="come ti chiami ?"
onfocus="this.value = '';"
/>
<label for="risultato">Leggi il saluto</label>
<!--//
Il bottone addetto alla chiamata asincrona, se presente all'interno di un form,
non deve essere di tipo submit, altrimenti la pagina verrà ricaricata senza attendere
l'esito dell'interazione.
A gestire l'evento onclick ci penserà il metodo GetCallbackEventReference il quale accetta
come parametri
* l'elemento di controllo oppure il target che implementa
* l'interfaccia ICallbackEventHandler ed in questo caso la pagina stessa,
* l'argomento da inviare all'evento RaiseCallbackEvent,
* il nome della funzione javascript da richiamare a fine operazioni,
* il pulsante o il contesto, che ha effettuato queste operazioni
* eventualmente la funzione javascript dedicata alla gestione errori di
callback richiamata qualora il server generi una eccezione
* infine un valore booleano che specifica se la chiamata è asincrona oppure no.
//-->
<input
tabindex="2"
id="risultato"
type="button"
value="invia"
onclick="<%=
ClientScript.GetCallbackEventReference(
this,
"prendiElementoDaId('nome-
utente').value",
"OnCallback",
"this",
"OnException",
true
)
%>"
/>
</fieldset>
</form>
<div id="contenuto-dinamico"></div>
</div>
</body>
</html>
La pagina proposta è presente all'interno di questo archivio, comprensivo dei file JavaScript e CSS.
Ciò che salta agli occhi, andando a spulciare il sorgente generato dopo aver processato la pagina, l'aggiunta di tag <script>, assieme a diversi input di tipo hidden, sempre generati e gestiti automaticamente dal server.
Per capire invece quanto sia semplice gestire eccezioni basterà aggiungere un throw new Exception("eccezione") all'interno del metodo GetCallbackResult, così da rendersi conto del controllo automatizzato permesso da questa piattaforma.
Certo è che la libreria da 20 Kb generata in automatico da ASP.NET sembra essere veramente ben fatta e le possibilità di sfruttarla al meglio sono diverse. L'accoppiata con JSON potrebbe già permettere interazioni molto avanzate, vale anche per l'accoppiata ajax e PHP, e se ne consiglia un approfondimento.
Non è questo comunque l'unico modo di implementare uno scambio dati asincrono in una applicazione, esistono infatti tools aggiuntivi appositi in grado di semplificare le operazioni ed aggiungere ancora più debug durante lo sviluppo del sistema.
Tra i più famosi si ricordano atlas, gratuito e ben documentato, ed ajax.NET gratuito anch'esso e ricco di esempi pratici in diverse comunità di sviluppatori.
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |