Proseguendo sulla scia di ieri, vediamo come gestire via AJAX l’invio di dati via form. AJAX si rivela utilissimo per questo tipo di operazioni. Pensate ad una pagina piena di form. L’invio dei dati da un singolo form richiede per l’elaborazione la ricarica di tutta la pagina. Invece, utilizzando una richiesta in background, possiamo gestire singole richieste senza che l’utente perda temporaneamente l’accesso alla pagina dei form.
I vantaggi? Enorme usabilità e velocità di gestione di web application complesse, destinate a continue richieste GET e/o POST dell’utente.
Al momento faremo una cosa semplice, giusto per capire come gestire la cosa. Più in là vedremo come trattare meglio i dati inviati.
Come prima cosa di serve un form. Ecco il form semplice semplice, con codice molto simile a quello che troviamo in vari blog nella sezione dedicata ai commenti.
<form method="post" action="getform.php" onsubmit="InviaDati(); return false;">
<label>Nick</label>: <input type="text" name="nick"><br />
<label>Email</label>: <input type="text" name="email"><br />
<label>Link</label>: <input type="text" name="link"><br />
<input type="submit" name="submit" value="Invia Dati" />
</form>
Cominciamo subito a vedere qualcosa di interessante. In primis il form verrà trattato dalla funzione InviaDati() e successivamente stoppato nel successivo loading dal "return false;" inserito subito dopo. Questo mi permette di inserire un action diverso dal solito "javascritp:void(0)".
Non sono sicuro che il client abbia javascript abilitato nel browser e non voglio provocare mal funzionamenti del form, che in caso di uso impossibile di AJAX verrà gestito dal file "getform.php" con i metodi soliti.
Sta in questo tipo di accorgimenti il concetto di degradabilità di cui si è già parlato qualche post fa.
[MORE]
Prepariamo i dato per l’invio.
La prima cosa da fare è creare una stringa di dati da poter inviare facilmente ed in modo logico allo script che si occuperà di trattare i dati in background.
Possiamo pensare ad una funzione del genere.
function PreparaDati(){
stringa = "";
var form = document.forms[0];
var numeroElementi = form.elements.length;
for(var i = 0; i < numeroElementi; i++){
if(i < numeroElementi-1){
stringa += form.elements[i].name+"="+encodeURIComponent(form.elements[i].value)+"&";
}else{
stringa += form.elements[i].name+"="+encodeURIComponent(form.elements[i].value);
}
}
}
La funzione creerà una variabile stringa di questo tipo:
nick=valorenick&email=valoreemail&link=valorelink&submit=Invia%20Dati
Inviamo i dati.
Vi ricordate la funzione AJAXReq vista nel post precedente? Vediamola di nuovo. Anche perchè la useremo anche qui:
function AJAXReq(method,url,bool){
if(window.XMLHttpRequest){
myReq = new XMLHttpRequest();
} else
if(window.ActiveXObject){
myReq = new ActiveXObject("Microsoft.XMLHTTP");
if(!myReq){
myReq = new ActiveXObject("Msxml2.XMLHTTP");
}
}
if(myReq){
execfunc(method,url,bool);
}else{
alert("Impossibilitati ad usare AJAX");
}
}
Nel nostro handler, se tutto va bene facciamo eseguire la funzione "execfunc()". E’ questa che invierà la stringa. Ed allora dobbiamo pensare alla funzione in modo tale che possa inviare in POST la stringa "stringa".
function execfunc(method,url,bool){
myReq.onreadystatechange = handleResponse;
myReq.open(method,url,bool);
myReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
myReq.send(stringa);
}
Noterete l’utilizzo della proprità "setRequestHeader". Propria di XMLHttpRequest, è utile per settare un header di output. Difatti con myReq.send(stringa) inviamo la stringa impostata dalla funzione PreparaDati(), ma prima diciamo alla pagina di destinazione di ricevere questi valori come dati POST.
Avviamo il tutto.
Una volta che è tutto pronto. Possiamo formalizzare la funzione InviaDati() nel seguente modo.
function InviaDati(){
PreparaDati();
AJAXReq("POST","getform.php",true);
}
Niente di più facile. Prepariamo i dati e dopo avviamo la richiesta AJAX che in questo caso invierà i dati via POST al file getform.php.
All’interno di questo file potrei scrivere qualsiasi tipo di codice PHP per manipolare i dati ricevuti via POST. In questo caso ho deciso di stampare l’array di debug dei dati in post.
<?php
print_r($_POST);
?>
E per mostrare il risultato mi creo una funzione handleResponse() adeguata. Niente di che, il solito alert al momento 🙂
function handleResponse(){
if(myReq.readyState == 4){
if(myReq.status == 200){
alert(myReq.responseText);
}else{
alert("Niente da fare, AJAX non funziona :(");
}
}
}
Come sempre e a vostra disposizione un esempio pratico on line. Per chi fosse interessato, il codice javascript completo è in chiaro e facilmente prelevabile.