Impostare la destinazione
Per prima cosa diamo un'occhiata agli attributi che dovranno memorizzare le
impostazioni su cui si baseranno i metodi della classe una volta ricevuta la
risposta dal server.
AjaxModule.prototype.loadingSrc = "immagini/loading.gif";
AjaxModule.prototype.loadingTarget = document.body;
AjaxModule.prototype.target = document.body;
AjaxModule.prototype.errorTarget = document.body;
Gli attributi target, errorTarget e
loadingTarget memorizzano rispettivamente
gli oggetti di destinazione che ospiteranno o gestiranno la risposta del server,
un'eventuale errore (es. richiesta fallita, pagina non trovata) e la barra di caricamento.
Più avanti vedremo che sarà possibile assegnare ad essi un oggetto del DOM
(es. un DIV) oppure una funzione che manipolerà direttamente l'output.
Di default la destinazione di entrambi sarà il body della pagina.
L'attributo loadingSrc memorizza semplicemente il percorso dove risiede
l'immagine che verrà visualizzata durante i caricamenti.
Ora vedremo i metodi che ci consentiranno di assegnare dei valori agli attributi
appena esposti.
AjaxModule.prototype.setLoadingTarget = function(new_target)
{
if (typeof(new_target) == "object")
{
try { AjaxModule.prototype.loadingTarget = new_target; }
catch (e) { throw new Error(err); }
}
else throw new Error(new String("Target non valido, impossibile gestire correttamente la risposta!"));
}
La funzione setLoadingTarget consente di impostare come target per la barra
di caricamento solamente un oggetto. Se quindi vogliamo che il contenitore per
la barra sia un DIV con id loader, utilizzeremo il seguente codice:
<div id="loader"></div>
<script type="text/javascript" language="JavaScript">
// <!--
Esempio.setLoadingTarget(document.getElementById('loader'));
// -->
</script>
Vi consiglio di strutturare la IF con il typeof
secondo le precise esigenze della vostra applicazione.
Volendo potete mettere l'istruzione getElementById direttamente all'interno
della funzione in modo da passargli solo l'id del contenitore in formato stringa.
Vediamo ora come il metodo setTarget sarà in grado di gestire sia oggetti che
funzioni per manipolare l'output, aggiungendo semplicemente una condizione alla IF: |
|
AjaxModule.prototype.setTarget = function(new_target)
{
var err = new String("Target non valido, impossibile gestire correttamente la risposta!");
if (typeof(new_target) == "object" || typeof(new_target) == "function")
{
try { AjaxModule.prototype.target = new_target; }
catch (e) { throw new Error(err); }
}
else throw new Error(err);
}
In questo caso sarà possibile specificare come destinazione anche una funzione
a cui sarà devoluto l'intero output per un'eventuale manipolazione, come può
essere ad esempio il parsing di un file XML o la trasformazione di una stringa
url-encoded in un'array.
Anche qui vi consiglio di personalizzare il più possibile il metodo per le vostre
esigenze.
Vediamo si seguito il metodo setErrorTarget, praticamente uguale a
setTarget.
Ho lasciato volontariamente le due funzioni separate in modo da potrele personalizzarle
al meglio per le esigenze dell'applicazione che servirà.
Ricordatevi che potete sempre ridefinire la funzione una volta che ereditate da
AjaxModule, senza quindi obbligarvi a riscrivere AjaxModule, sfruttando così il
vantaggio di avere del codice riusabile in ogni caso.
AjaxModule.prototype.setErrorTarget = function(new_target)
{
var err = new String("Target non valido, impossibile gestire correttamente la risposta!");
if (typeof(new_target) == "object" || typeof(new_target) == "function")
{
try { AjaxModule.prototype.errorTarget = new_target; }
catch (e) { throw new Error(err); }
}
else throw new Error(err);
}
Gestione della risposta
Il metodo cruciale è handleResponse.
Qualunque sia la risposta del server, passerà di qua.
Principalmente il metodo controllerà gli stati della comunicazione ed agirà di
conseguenza fino a che non si concluderà la comunicazione. A quel punto, se non
ci sono stati intoppi, handleResponse devolverà la risposta del
server a un oggetto o ad una funzione, secondo come voi lo avete impostato attraverso i metodi visti
in precendenza: setTarget e setLoadingTarget.
AjaxModule.prototype.handleResponse = function()
{
if (AjaxModule.prototype.xmlhttp.readyState >= 1 &&
AjaxModule.prototype.xmlhttp.readyState <= 3)
{
if (AjaxModule.prototype.doLoading === true)
AjaxModule.prototype.loadingGIF();
}
else if (AjaxModule.prototype.xmlhttp.readyState == 4)
{
if (AjaxModule.prototype.xmlhttp.status == 200)
{
var response = AjaxModule.prototype.xmlhttp.responseText;
if (typeof(AjaxModule.prototype.target) == "object")
AjaxModule.prototype.target.innerHTML = response;
else if (typeof(AjaxModule.prototype.target) == "function")
AjaxModule.prototype.target(response);
else throw new Error("Target non valido, impossibile gestire correttamente la risposta!");
}
else
{
try
{
if (typeof(AjaxModule.prototype.errorTarget) == "object")
{
var contentHTML = "<b>Errore durante il trasferimento dati.</b>";
contentHTML += "<br />" + AjaxModule.prototype.xmlhttp.statusText;
contentHTML += " (" + AjaxModule.prototype.xmlhttp.status + ")";
document.getElementById(AjaxModule.prototype.errorTarget).innerHTML = contentHTML;
}
else (typeof(AjaxModule.prototype.errorTarget) == "function")
{
AjaxModule.prototype.errorTarget
(
AjaxModule.prototype.xmlhttp.statusText,
AjaxModule.prototype.xmlhttp.status
);
}
} catch (e) {}
}
}
}
In tutti i browser, gli stati da 1 a 3 vengono richiamati pi&uagrave; volte e sono
precedenti al completamento della comunicazione (stato 4),
possiamo quindi usarli per visualizzare un'eventuale barra di caricamento.
