Ajax è una tecnica di sviluppo software che permette lo scambio dei dati in background tra il browser e il server e l'aggiornamento dinamico di una pagina web senza doverla ricaricare esplicitamente.
In pratica allo scatenarsi di un evento (il click del mouse o il caricamento di una form..) viene richiesta una azione sul server e può venire mostrato il risultato senza interferire con il comportamento della pagina esistente o passare da una pagina ad un'altra.
Esistono numerose librerie javascript che permettono di effettuare chiamate Ajax, la maggior parte gratuite e opensource, come ad esempio JQuery, SAjax, Prototype o Google Web Toolkit. In questo tutorial vedremo l'uso di Prototype JS.
La funzione di ricerca di Google, ad esempio, fa ampio uso di Ajax. Il testo di ricerca suggerito che compare mentre digitiamo la parola da cercare viene restituito da una chiamata Ajax, oppure le pagine successive quando per esempio ricerchiamo immagini vengono caricate tramite chiamate Ajax.
Il modo migliore di illustrare una chiamata Ajax è con un esempio.
Supponiamo di voler caricare una immagine in un riquardo selezionandone il nome tramite un menu a tendina.
In HTML costruiamo la SELECT, e vi associamo la funzione Javascript che effettuerà la chiamata Ajax al cambio della voce selezionata.
Normalmente la SELECT è inserita in un FORM ma nel nostro esempio non serve.
La funzione javascript cambiafoto() è quella che si occupa di effettuare la chiamata Ajax e di caricare la foto in base al risultato.
La funzione recupera il valore del record selezionato, il value della option, e chiama il programma sul server passandogli tale valore.
Il programma elabora la richiesta restituendo il nome del file contenente l'immagine da visualizzare.
Quindi una nuova funzione javascript, ottenuto il nome dell'immagine, la carica all'interno del riquadro div.
Per comodità e per chiarezza del codice, abbiamo diviso il funzionamento javascript in 3 funzioni:
- la preparazione dell'input (funzione cambiafoto)
- la chiamata ajax (funzione getNomeFoto)
- la presentazione del risultato (funzione mostraFoto)
[IMPORT]
<script src="prototype.js"></script>
[JAVASCRIPT]
<script type="text/javascript">
function cambiafoto() {
var idFoto = document.getElementById("nfoto").value;
getNomeFoto(idFoto);
}
function getNomeFoto(id) {
new Ajax.Request('beCaricaFoto.php', {
method: 'get',
parameters: { idfoto: id,
},
onSuccess: function(transport){
var dati = transport.responseText;
if (dati.includes("ERRORE")) {
alert(dati);
} else {
mostraFoto(dati);
}
},
onFailure: function(){
alert("Errore generico");
}
});
}
function mostraFoto(nomefoto) {
document.getElementById("portafoto").innerHTML = '<img src=" + nomefoto + " width="120" height="80">';
}
</script>
Esaminiamo la funzione getNomeFoto.
Questa funzione non fa altro che effettuare una chiamata ad una funzione Ajax.Request della libreria Prototype, che ha bisogno di 5 parametri, nell'ordine indicato:
- il programma da chiamare, in questo caso "caricafoto.php"
- il tipo di chiamata, "get" o "post"
- i parametri da passare al programma, in questo caso l'ID della foto, ma possono essere anche più di uno, separati dalla virgola
- una funzione, "onSuccess, da chiamare in caso di esecuzione senza errori
- una funzione, "onFailure, da chiamare in caso di errori nella chiamata Ajax
Non ci addentreremo nello specifico del programma "caricafoto.php", probabilmente va a cercare il nome della immagine in un database, in un file o in una lista in suo possesso, ma ci aspettiamo che riceva l'ID della foto e ne restituisca il nome che la libreria Ajax ci rende disponibile all'interno della variabile "transport.responseText".
Abbiamo previsto che il programma sul server possa anche restituire un errore, ad esempio qualora non riesca a trovare la foto, e allora stamperemo il messaggio ricevuto.
Questo sotto è quello che ci aspettiamo sulla nostra pagina.