3. Gestire le risposte

Posted Dom, 09/06/2009 - 22:12 by Francesco Casula

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.

  • Share this