Inviare dati

Nel capitolo precedente abbiamo visto come creare l'oggetto XMLHttpRequest che sarà il responsabile delle connessioni asincrone.

Prima di vedere i metodi adibiti all'invio dei dati, diamo un'occhiata al codice che ci consentirà di organizzare, memorizzare e preparare i dati prima dell'invio vero e proprio al server.
Per fare questo ci serviremo di un Array che memorizzerà tutti i dati e di due metodi (funzioni):

• makeRequest : apre la connessione attraverso XMLHttpRequest e la configura
• sendRequest : prende i parametri dall'array e li invia al server

Memorizzazione dei dati

L'attributo che memorizzerà i nostri dati, sarà un'array di nome params.
Vediamo di seguito il codice ed un metodo per ripulirlo, che verrà automaticamente richiamato dalla classe alla fine di ogni invio dati.

AjaxModule.prototype.params = [];

AjaxModule.prototype.clearParams = function()
{ AjaxModule.prototype.params = []; }

Per aggiungere un nuovo parametro da inviare nella prossima richiesta, è sufficiente aggiungerlo a params mediante la classica sintassi utilizzata per assegnare i valori negli array associativi, avendo cura di riferirsi all'array attraverso il puntatore this.

this.params['nome_variabile'] = 'valore_variabile';

Aprire la connessione AJAX e inviare i dati

Vedremo ora il metodo che dovrà aprire e configuare la connessione.
All'interno del metodo noterete l'introduzione di una variabile doLoading. Questa variabile verrà controllata quando verrà ricevuta la risposta dal server per decidere se deve essere visualizzata una barra di caricamento o meno.

La sua utilità la vedremo quindi più avanti, ora concentriamoci sul metodo makeRequest:

AjaxModule.prototype.doLoading = false;

AjaxModule.prototype.makeRequest = function(sPage, mL)
{
	if (mL === true)
		AjaxModule.prototype.doLoading = false;
	else AjaxModule.prototype.doLoading = true;

	AjaxModule.prototype.xmlhttp.open("POST", sPage, true);
	AjaxModule.prototype.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	AjaxModule.prototype.xmlhttp.onreadystatechange = AjaxModule.prototype.handleResponse;
	AjaxModule.prototype.sendRequest();
}

Le ultime quattro sono le istruzioni che ci interessano.
La prima riga utilizza il metodo open dell'oggetto XMLHttpRequest. Questo metodo apre la connessione con la pagina desiderata, impostando il metodo di comunicazione che verrà utilizzato per inviare i dati, ossia GET o POST.

Nella seconda riga vediamo il metodo setRequestHeader che serve per impostare gli header che verranno utilizzati per la chiamata al server.
Nel nostro caso lo utilizzeremo solamente per impostare li tipo di contenuto ed il charset usato. E' possibile impostare altre opzioni per l'header semplicemente chiamando il metodo per ogni impostazione rispettando la coppia "nome header", "valore".

Nella terza riga specifichiamo il metodo che verrà utilizzato per gestire la risposta del server. Vi ricordo che abbiamo esplicitamente dichiarato che effettueremo una richiesta di tipo asincrona grazie ad open.

L'ultima riga utilizza invece il metodo sendRequest che fa parte della stessa classe AjaxModule. Vediamo di seguito il suo codice:

AjaxModule.prototype.sendRequest = function()
{
	var pars = new String();

	for (var i in AjaxModule.prototype.params)
	{
	    pars += encodeURIComponent(i) + "=";
	    pars += encodeURIComponent(AjaxModule.prototype.params[i]) + "&";
	}

	AjaxModule.prototype.clearParams();
	pars = pars.substr(0, (pars.length - 1));
	AjaxModule.prototype.xmlhttp.send(pars);
}