Vuoi implementare delle funzionalità in ajax ma non sai come fare?
Ajax è sempre più diffuso e presente nei siti web, a volte anche dove non è necessario, ma del resto questo capita un po’ con tutto. Se sei affascinato da questa tecnologia ma non sai da dove iniziare, questo articolo fa per te. Con due esempi molto semplici ne apprenderai le basi e vedrai che grazie all’utilizzo dei moderni framework non è così difficile come si potrebbe immaginare. Non mi credi?
Cos’è una chiamata asincrona?
Se non utilizziamo ajax, ogni scambio di dati tra il server e il client necessita di una richiesta tradizionale che prevede il refresh o il caricamento di una nuova pagina.
Quando compiliamo un form e premiamo su “invia“, ad esempio, viene richiesta al server la pagina di elaborazione che si occuperà di intercettare i dati che abbiamo inserito nel form, di elaborarli, ed infine di mostrare un risultato.
Questa pagina viene caricata come un nuovo documento che andrà a sostituire completamente la pagina precedente (quella del form) nel nostro browser.
Grazie ad ajax invece, server e client possono comunicare “in background“ a intervalli di tempo oppure al verificarsi di un determinato evento.
Potremo così ad esempio prevedere che cliccando sul bottone “invia” di un form (quindi al verificarsi dell’evento submit), parta una richiesta che verrà elaborata dal server il quale invierà il risultato al browser che lo mostrerà, il tutto senza che la pagina venga ricaricata.
Questo è proprio quello che faremo insieme tra poco. Utilizzeremo jQuery, la potente libreria javascript che è già stata oggetto di alcuni articoli e grazie alla quale la realizzazione di una chiamata asincrona risulterà estremamente semplificata.
Se non disponi ancora di jQuery (male), scaricalo dal sito ufficiale.
Preparazione del form
Creiamo la pagina ajax.html ed inseriamo un semplice form che richieda “nome” e “cognome”.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<form id="input_form" action="?">
Inserisci il nome:<br />
<input type="text" name="nome" id="nome"/><br />
Inserisci il cognome:<br>
<input type="text" name="cognome" id="cognome"/><br/ ><br/ >
<input type="submit" value="invia">
</form>
<div id="result"></div>
</body>
</html>
In questo markup HTML abbiamo aggiunto l’elemento “result” che rappresenta il punto in cui verranno inseriti i risultati dell’elaborazione del server.
Preparazione della pagina di elaborazione sul server
Creiamo ora la pagina result.php che provvederà alla ricezione ed elaborazione dei dati passati dal form:
<?php echo "Hai inserito i seguenti dati: Nome-><strong>$_POST[nome]</strong> e Cognome-><strong>$_POST[cognome]</strong>. Hai eseguito una chiamata ascinrona!"; ?>
Come vedi si tratta semplicemente di stampare a video i dati passati dal form all’interno di una frase.
Inclusione di jQuery e preparazione della funzione
Torniamo ora al file ajax.html. Includiamo la libreria jQuery e predisponiamo la funzione necessaria al nostro scopo modificando l’head in questo modo:
<head>
<script type="text/javascript" src="jquery-1.4.1.js"></script> <!-- La versione potrebbe essere differente -->
<script type="text/javascript">
$(document).ready(function() {
<!—Qui scriveremo il codice necessario -->
});
</script>
</head>
Realizziamo ora il codice jQuery necessario che in seguito spiegherò nel dettaglio.
$("#input_form").submit(function(){
var nome = $("#nome").attr('value');
var cognome = $("#cognome").attr('value');
$.post("result.php", {nome:nome, cognome:cognome}, function(data){
$("div#result").html(data);
});
return false;
});
Dunque, nella prima riga diciamo:
$("#input_form").submit(function(){
Nell’elemento con id “input_form“, al verificarsi dell’evento “submit“, esegui questa funzione.
Alla seconda e terza riga:
var nome = $("#nome").attr('value');
var cognome = $("#cognome").attr('value');
valorizziamo le variabili nome e cognome prelevando l’attributo “value” dagli elementi con id “nome” e “cognome” (che sono i relativi campi del form).
A questo punto si procede con la chiamata ajax. jQuery dispone principalmente di tre metodi per la gestione delle chiamate asincrone, $.post, $.get, ed $.ajax. In questo primo esempio utilizzeremo $.post che come è ovvio invierà i dati al server con il metodo POST.
La sintassi è semplice:
$.post(“nome_del_file”, {nome:valore,cognome:valore(i parametri passati)}, function(data){
— quello che vogliamo fare con la risposta che ci ha inviato il server e che sarà contenuta nel parametro “data“.
});
Nel nostro caso, inviamo la richiesta a result.php passando come parametro nome la variabile nome (precedentemente valorizzata con il contenuto del campo nome del form) e come parametro cognome la variabile cognome.
Il risultato lo inseriamo nell’elemento “result“.
Infine, se utilizziamo i form, dobbiamo sempre ricordare di interrompere l’esecuzione del submit con return false.
Provando questo codice (vedi l’esempio) sotto il form visualizzerai la frase senza che vi sia stato un refresh o la richiesta di caricamento di una nuova pagina. I dati sono stati inviati in maniera asincrona al server che ha eseguito la pagina php. L’output di questa pagina è stato quindi inviato al client ed inserito nel DOM.
Se volessi utilizzare $.ajax per fare esattamente la stessa cosa, dovrei riscrivere la funzione in questo modo:
$.ajax({
url: 'result.php',
type: "POST",
data: "nome="+nome+"&cognome="+cognome,
success: function(data) {
$("div#result").html(data);
}
});
Come vedi $.ajax ha una sintassi diversa e leggermente più complessa. Questo in quanto ci permette di passare una lunga serie di parametri (è infatti molto più configurabile di $.post e $.get); troverai la lista completa dei parametri nella documentazione.
Facciamo ora un altro esempio. Qualche tempo fa Nicolas ha scritto un articolo molto dettagliato dal titolo “Vuoi utilizzare Json ma non sai da dove iniziare?“. Ebbene, se sei a digiuno del formato Json, ti consiglio di rileggere quell’articolo, altrimenti procedi pure nella lettura.
Come gestire il formato json nelle chiamate ajax?
In questo secondo esempio, utilizzeremo il bottone submit di un form per fare una richiesta al server. Nello specifico chiederemo di inviarci il timestamp, l’ora e la data attuali. Il risultato lo puoi vedere in questa pagina di esempio. Iniziamo dalla pagina php (result2.php).
<?php
$time = time();
$hour = date("H:i:s");
$day = date("j/n/Y");
echo "{'timestamp':'$time','hour':'$hour','day':'$day'}";
?>
Preleviamo il timestamp, l’ora e la data ed in seguito eseguiamo l’output a video nel formato Json (nome:valore).
Passiamo ora alla pagina ajax-json.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style>
#result{
width: 250px;
height: 100px;
border: 1px solid gray;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// qui scriveremo la funzione
});
</script>
</head>
<body>
<form id="input_form" action="?">
<input type="submit" value="richiedi dati">
</form>
<div id="result">
Il timestamp attuale è: <span id="timestamp"></span><br />
Che corrisponde alle ore: <span id="ora"></span><br />
Del giorno: <span id="giorno"></span>
</div>
</body>
</html>
Come vedi, il form è composto unicamente dal bottone. Nell’elemento #result ho preparato le frasi che in seguito alla richiesta al server verranno completate con i dati inviati. Vediamo come.
$("#input_form").submit(function(){
$.ajax({
url: 'result2.php',
dataType: "json",
success: function(data) {
$("#timestamp").html(data.timestamp);
$("#ora").html(data.hour);
$("#giorno").html(data.day);
}
});
return false;
});
Cosa significa questo codice?
Nell’elemento #input_form, al verificarsi dell’evento submit, esegui la seguente funzione:
Fai una richiesta ajax alla pagina result2.php.
Ora nota che abbiamo impostato la proprietà dataType con il valore “json“. Questo segnala a jquery che deve aspettarsi una risposta in questo formato, dunque la risposta del server verrà inserita nell’oggetto “data”. Quindi ad esempio il valore che abbiamo passato con il nome day (‘day’:’$day’) lo recupereremo in data.day.
In questo modo possiamo inserire i tre valori (la cosa interessante è che diversamente dall’esempio precedente, dove il risultato era un blocco unico, ora possiamo gestire i dati singolarmente) nella posizione stabilita in base all’id assegnato.
Ajax e usabilità
Dobbiamo sempre prestare molta attenzione all’usabilità quando utilizziamo ajax. Poniamo che la richiesta sia molto complessa e/o che il server sia particolarmente lento o congestionato. Il processo potrebbe durare anche diversi secondi.
Con una richiesta tradizionale, in basso a sinistra del browser vediamo dei messaggi: “In attesa di www…..”, “Trasferimento dati da www….”, eccetera. Se la richiesta è fatta in ajax questo non avviene. Di conseguenza l’utente potrebbe avere l’impressione che non stia succedendo nulla e magari premerebbe nuovamente il bottone di invio diverse volte.
Questo è un errore di usabilità in contraddizione con il paragrafo uno (visibilità e stato del sistema) e paragrafo cinque (prevenzione dell’errore) del decalogo di Nielsen.
Dunque disabilitiamo il bottone per l’intera durata della richiesta e facciamo comparire un’immagine che indichi chiaramente che sta avvenendo qualcosa, ad esempio questa:
Utilizziamo l’ultimo esempio (ajax-json.html) e modifichiamolo come segue:
Inseriamo l’immagine a fianco del bottone
<input type="submit" value="richiedi dati" class="button"> <img src="loading.gif" border="0" class="loading">
Rendiamolo invisibile aggiungendo questa classe nel nostro foglio di stile:
.loading{
display: none;
}
Ora al verificarsi dell’evento submit disabilitiamo il bottone e mostriamo l’immagine:
$(".button").attr("disabled", "disabled");
$(".loading").show();
Ed una volta terminato il processo, abilitiamo il bottone e nascondiamo l’immagine:
$(".button").removeAttr("disabled");
$(".loading").hide();
Ecco la pagina modificata:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style>
#result{
width: 250px;
height: 100px;
border: 1px solid gray;
}
.loading{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#input_form").submit(function(){
$(".button").attr("disabled", "disabled");
$(".loading").show();
$.ajax({
url: 'result2.php',
dataType: "json",
success: function(data) {
$("#timestamp").html(data.timestamp);
$("#ora").html(data.hour);
$("#giorno").html(data.day);
$(".button").removeAttr("disabled");
$(".loading").hide();
}
});
return false;
});
});
</script>
</head>
<body>
<form id="input_form" action="?">
<input type="submit" value="richiedi dati" class="button"> <img src="loading.gif" border="0" class="loading">
</form>
<div id="result">
Il timestamp attuale è: <span id="timestamp"></span><br>
Che corrisponde alle ore: <span id="ora"></span><br>
Del giorno: <span id="giorno"></span>
</div>
</body>
</html>
Chiaramente la nostra richiesta é così semplice che probabilmente non ci si accorgerà nemmeno della comparsa dell’immagine e della disattivazione del bottone. Ma se vuoi testarla, puoi aggiungere all’inizio di result2.php questa istruzione.
sleep(2);
L’esecuzione verrà sospesa per due secondi simulando così un server lento (come in questo esempio).
Conclusione
In questo articolo abbiamo visto due esempi molto semplici di chiamate asincrone con l’utilizzo di jQuery. Come hai potuto notare, l’utilizzo di questo framework ci permette di raggiungere l’obiettivo con pochissime e chiare righe di codice.
Nel prossimo articolo il menù sarà molto gustoso: vedremo un’applicazione più avanzata e molto richiesta, ovvero il concatenamento di select. Mi spiego: hai presente quei form dove viene richiesto ad esempio di scegliere una marca di automobili tramite una select ed una volta fatta la scelta la seconda select (dove ti viene richiesto di scegliere il modello) si popola dinamicamente (e anche un po’ magicamente) con i modelli della marca che hai scelto? Bene, faremo qualcosa del genere.
Pensavi che fosse più difficile implementare ajax, vero?
DownloadL'autore
24 commenti
Trackback e pingback
-
How and when to use jQuery’s serialize method? | Your Inspiration Web
[...] wanting to send these data through an asynchronous call (if you are a bit unfamiliar with ajax, in this… -
AJAX in WordPress: Best Practice | Your Inspiration Web
[…] “Vuoi implementare delle funzionalità in ajax ma non sai come fare?” […]
Ottimo articolo! Complimenti!
Ti faccio solo una piccola segnalazione Maurizio: per prelevare (o impostare) i dati dalle input/select/textarea dei form, jQuery mette a disposizione il metodo val(), molto più comodo. Quindi possiamo scrivere:
var nome = $(“#nome”).val();
var cognome = $(“#cognome”).val();
Grazie Daniele.
Rispetto all’uso del metodo val() ritengo (ma é una mia opinione) che didatticamente sia meglio partire da lontano ed in un secondo tempo introdurre semplificazioni, le comodità, eccetera.
Imparare a guidare con il cambio automatico e il parktronic potrebbe rivelarsi controproducente. Ma é una mia idea :-)
Stupendo. Ho sempre avuto un debole per l’ajax, questo articolo cade a puntino. Grazie mille :)
Ps. Hai mica in programma un articolo sulla realizzazione di un modulo contatti con controllo errori in ajax? eh eh
Ciao mery.
Hai visto questo articolo?
https://www.yourinspirationweb.com/2010/02/12/jquery-come-creare-un-plugin-per-validare-i-nostri-form/
Dovrebbe bastari.
Davvero complimenti Maurizio: gli argomenti sono veramente ben spiegati :)
@mery
Dai un’occhiata anche alla guida sulla creazione dei form ;)
Grazie Just! Poi detto da te che sei un’autorità in materia vale doppio.
@mery: aggiungo questo
https://www.yourinspirationweb.com/2010/01/15/come-realizzare-un-modulo-contatti-in-php/
Ciao mery,
Mi servirebbero delle informazioni su ajax, tu mi puoi aiutare ??? Ti prego contattami per favore. la mia email è: paperini4@gmail.com. Grazie, aspetto una tua risposta.
Sono perfettamente d’accordo con te Maurizio.
Ma se ci pensi, il metodo che hai proposto funziona solo con i campi di tipo input.
Che succede se il tuo collega grafico decide che un campo di tipo textarea o select è meglio del campo input che hai previsto tu? Il sistema non funziona più, semplicemente perché non esiste l’attributo value=”” per textarea e select.
Se, invece, avessi usato il metodo val() per prelevare il dato, non avresti avuto alcun problema :)
È una cavolata, ma sono quelle piccole cose che ti fanno risparmiare tempo in futuro :D
Sì, sì daccordo, stiamo dicendo la stessa cosa
Complimenti, un chiaro ed ottimo articolo!!
Grazie Dranzer!
Avrei una domanda, uso AJAX da molto ed AJAX con jQuery da un bel po’ ormai, ma ho un problema, molte chiamate restituiscono il risultato corretto, non fosse che mi aggiungono sopra uno spazio decisamente fastidioso, che non ho ben capito da cosa derivi, faccio un esempio:
Risposta corretta:
TITOLO
Risposta dal server
Risposta errata:
TITOLO
Risposta dal server
Lo spazio tra TITOLO e Risposta dal server non dovrebbe esserci ma non so come evitarlo, non lo fa sempre ma non riesco a capire il motivo.
Ciao Andrea. non ho idea del perchè. Probabilmente c’è qualcosa nel codice che utilizzi. Andrebbe analizzato interamente
Ho trovato il problema alla fine, dipende dal PHP, grazie comunque ^^
Ottimo ed estremamente chiaro articolo. Grande Maurizio
Grazie Alessio
Salve,
mi sono incuriosito con l’Ajax, se vorrei implementare qualche script utile sul mio sito in quale sezione è consigliabile aggiungere il codice? Nell’HEAD o nel BODY?
Ottimi articoli.
Sono molto interessanti, facili da capire e invitano ad approfondire gli argomenti.
Bravo
Bellissimo articolo.
Sono un novello di ajax e mi sto incasinando da giorni la vita senza trovare soluzione (immagino banale).
Ho un form in una pagina contatti.html realizzata con bootstrap, vorrei inviare le info(nome telefono e messaggio) via mail, e senza uscire dalla pagina far comparire un alert di messaggio inviato.
C’è un articolo che spiega anche questo metodo?
Grazie mille in anticipo
Ciao Maurizio. Grazie per il tutorial molto chiaro.
Dimmi se sbaglio, ma se volessi passare quelle le tre variabili in questione a tre corrispondenti variabil in PHP dopo aver premuto il bottone submit dovrei aprire nel file prova2.php una connessione ad un database salvare i valori in una tabella e poi sempre nel file prova2.php richiamare i valori nelle variabili?
Grazie
Ciao Maurizio incontro un problema utilizzando il checkbox e il radio. Ho creato un form con vari campi come input e select ecc e quando invio la richiesta a ajax che poi lui lo rimanda al file .php funziona correttamente e mi ritrovo nel database i dati corretti. Per quanto riguarda il campo checkbox se io seleziono la casella o meno mi ritrovo nel database sempre on. Invece per il campo radio non mi passa nessun valore al database.
form di inserimento:
Impresa
Privato
javascript:
$(document).ready(function() {
//al click sul bottone del form
$(“#bottone”).click(function(){
//associo variabili
var ragionesociale = $(“#ragionesociale”).val();
var attivo = $(“#attivo”).attr(‘value’);
var privato = $(“#privato”).val();
//chiamata ajax
$.ajax({
//imposto il tipo di invio dati (GET O POST)
type: “POST”,
//Dove devo inviare i dati recuperati dal form?
url: “insert_conf.php”,
//Quali dati devo inviare?
data: “ragionesociale=” + ragionesociale + “&attivo=” + attivo + “&privato=” + privato + “&privato=” +
privato,
dataType: “html”,
//Inizio visualizzazione errori
success: function(msg)
{
$(“#risultato”).html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert(“Aggiunto, grazie!”);
},
error: function()
{
alert(“Chiamata fallita, si prega di riprovare…”); // callback in caso di fallimento
}
});
});
});
Aiuto grazie anticipatamente….
scusate se riscrivo un nuovo commento volevo precisare che in questa sezione del codice:
var attivo = $(“#attivo”).attr(‘value’);
nel database mi ritrovo nel campo il seguente errore “undefined”.
Se invece cambio in questo modo:
var attivo = $(“#attivo”).val();
nel database mi ritrovo sempre “on” se dal form lo seleziono o meno…