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" "https://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" "https://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" "https://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?

Download
Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

24 commenti

Trackback e pingback

  1. 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…
  2. AJAX in WordPress: Best Practice | Your Inspiration Web
    […] “Vuoi implementare delle funzionalità in ajax ma non sai come fare?” […]