4. Esempio pratico

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

Esempio pratico

Arrivati a questo punto del tutorial, la libreria AjaxModule è completa e pronta per essere utilizzata.
Vediamo quindi un esempio pratico che vi sia utile per ricreare rapidamente un ambiente semplice, usabile e funzionale.

Nel nostro esempio interrogheremo uno script PHP che ci restituirà la lista degli ultimi impiegati, aspettandosi come parametro num_impiegati che utilizzerà per limitare la lista.
Passandogli quindi 0 (ZERO) come valore per num_impiegati, lo script ci restituirà una lista vuota, mentre se gli passeremo 3 (TRE) lo script restituirà la lista degli ultimi tre impiegati inseriti (se ci sono).

Non vedremo qui il codice PHP, ma sarà scaricabile a fine tutorial così potrete analizzarne il codice di esempio. Vediamo il codice JavaScript che eredita da AjaxModule per sfruttarne le funzionalità.

Impiegati.js

function Impiegati()
{
	this.setTargets = function(target_div)
	{
		this.setTarget(document.getElementById(target_div));
		this.setErrorTarget(document.getElementById(target_div));
		this.setLoadingTarget(document.getElementById(target_div));
	}

	this.carica = function()
	{
		this.setTargets('target');
		this.params['num_impiegati'] = document.getElementById('num_impiegati').value;
		this.makeRequest('script/impiegati.php');
	}
}

Impiegati.prototype = new AjaxModule();
Impiegati.prototype.constructor = Impiegati;

Il metodo setTargets non fa altro che impostare lo stesso target per la barra di caricamento, la risposta del server e gli errori di connessione.
Il metodo carica richiama setTargets, poi legge il numero di impiegati da un campo input nella pagina memorizzandolo nell'array params.
A questo punto utilizza makeRequest specificando il percorso della pagina PHP da interrogare.

Il metodo makeRequest apre automaticamente la connessione e invia i parametri trovati in params.
Ora vediamo la pagina HTML che includerà ed utilizzerà lo script "Impiegati" che ci consentirà di creare un'istanza della suddetta classe.
Attraverso l'istanza potremo effettuare la chiamata vera e propria al server per leggere la famigerata lista degli ultimi impiegati.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Ajax Module</title>

		<script type="text/javascript" language="JavaScript" src="script/AjaxModule.js"></script>

		<script type="text/javascript" language="JavaScript" src="script/Impiegati.js"></script>
		<script type="text/javascript" language="JavaScript">

			// <!--
			var imp = new Impiegati();
			// -->
		</script>
	</head>
	<body>
		<a href="javascript:;" onclick="imp.carica();">Carica lista impiegati</a>

		<br />
		Numero massimo di ultimi impiegati da visualizzare:
		<input type="text" id="num_impiegati" name="num_impiegati" value="2" />

		<br />
		<div id="target" name="target"></div>
	</body>
</html>

Abbiate cura di includere i fogli JavaScript nell'ordine giusto per non generare incompatibilità con qualche browser.

Il tutorial non è ancora finito. Nel prossimo caiptolo vedremo alcuni strumenti utili per la lettura veloce di form HTML.