Effettuare richieste Ajax usando JQuery

Ajax è l'arte di effettuare richieste http in background per poi aggiornare parte di una pagina web senza doverla ricaricare completamente.

E' possibile usare direttamente le funzioni Ajax tramite JavaScript puro, come descritto nel sito del W3Schools. Una valida alternativa è sfruttare le funzioni ajax fornite da JQuery.

In questo esempio si vedrà una pagina web con un pulsante; cliccando su questo pulsante vengono mostrati i nomi degli impiegati, senza ricaricare tutta la pagina.

Pagina Html

La pagina html deve includere la librera JQuery.
Nel corpo sono presenti un pulsante, un div usato come contenutore e un'immagine con un'animazione per indicare il caricamento.

<html>
    <head>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            //...
        </script>
    </head>
    <body>
        <h1>Test Ajax/JQuery</h1>
        <input id="btnJSonDB" type="button" value="Get JSon" />
        <div id="lblJSonDB"></div>
        <p id="spinnerJSonDB" class="spinner"><img src="img/ajax-loader.gif" /></p>
    </body>
</html>

Scambio dati in formato JSon

Inizialmente per lo scambio di dati si usava Xml (da cui deriva il nome Ajax), ma quando possibile è preferibile usare JSon in quanto è più compatto e più facilmente convertibile in JavaScript.
Questo è un esempio di codice JSon valido:

{
    "employees":
    [
        {"firstName":"Mick","lastName":"Jagger" },
        {"firstName":"Ronnie","lastName":"Wood"},
        {"firstName":"Keith","lastName":"Richards"},
        {"firstName":"Charlie","lastName":"Watts"}
    ]
}

Solitamente questi dati non si trovano in un file di testo statico ma vengono generati da una pagina web la quale legge le informazioni da un data base.
Di seguito una pagina PHP che legge i nomi degli impiegati, crea un array e lo trasforma in JSon con la funzione json_encode.

<?php
$strJSon = "{\"employees\":{}}";
$employees = array();
$result = mysqli_query($con, "SELECT id, first_name AS fn, last_name AS ln FROM employees ORDER BY first_name ASC");
while($row = mysqli_fetch_array($result))
{
    $employees[] = array("id" => $row['id'], "fn" => $row['fn'], "ln" => $row['ln']);
}
mysqli_close($con);
if (count($employees) > 0) {
    $strJSon = "{\"employees\":" . json_encode($employees) . "}";
}
echo $strJSon;
?>

Notare che se non ci sono risultati non si restituisce una stringa vuota bensì una stringa JSon valida nel formato:
{"employees": {}}

Qualora si desideri usare invece una pagina Asp.Net per restituire i dati in formato JSon si può usare la classe JavaScriptSerializer disponibile a partire dalla versione 3.5 del .Net framework.

Codice Javascript/JQuery

Al click del pulsante viene resa visibile l'immagine per indicare che c'è un caricamento in corso.
Poi viene inviata una richiesta http di tipo GET alla pagina out_json_db.php la quale restituisce una stringa JSon come spiegato in precedenza.
Si converte la stringa in un array JavaScript, si fa un ciclo per leggere i valori e creare una stringa html che sarà poi iniettata nel div contenitore.
Infine si nasconde l'immagine di caricamento.

$(document).ready(function () {
    //associo una funzione al click del pulsante
    $("#btnJSonDB").bind("click", function () {
        
        //rendo visibile l'immagine di caricamento
        timeoutID = setTimeout(function(){ $('#spinnerJSonDB').show(); }, 300);
        
        var request = $.ajax({
            url: "out_json_db.php",
            type: "GET",    //meglio usare GET quando si tratta di sola lettura
            data: { id : $(this).value },    //in questo caso non è necessario passare dati
            contentType: "application/json; charset=utf-8",
            dataType: "json",    //se fosse semplice testo userei dataType: "html"
            success: function(result) {
                
                //converto il JSon risultante in un array bidimensionale JavaScript
                var arr = eval('(' + JSON.stringify(result) + ')');
                var strOutput = '';
                
                //itero gli elementi dell'array per leggere i dati
                for (var i=0; i < arr.employees.length; i++) {
                    strOutput += arr.employees[i].id + " - " + arr.employees[i].firstName + " ";
                    strOutput += arr.employees[i].lastName + "<br />";
                }
                
                //inietto nel div la stringa html risultante
                $('#lblJSonDB').html(strOutput);
            }
        }); //end ajax
        
        //specifico cosa succede se la richiesta non va a buon fine
        request.fail(function( jqXHR, textStatus ) {
            alert( "Request failed: " + textStatus );
        });
        
        //questo viene eseguito in ogni caso
        request.always(function( jqXHR, textStatus ) {
            //nascondo l'immagine di caricamento
            window.clearTimeout(timeoutID);
            $('#spinnerJSonDB').hide();
        });
    }); //end click
    
 }); //end ready

Autore: Sergio Roberto Boarina