JSON e AJAX: come riempire dinamicamente una select HTML

In molti siti web o applicazioni web-based, quando selezioniamo una voce in una select, vengono caricati dinamicamente in un'altra select successiva, dei dati che dipendono dalla scelta fatta sulla prima. Questo succede soprattutto quando compiliamo dei form per la spedizione di merce, ad esempio, per la scelta della nostra provincia e del nostro comune. Tale effetto è reso possibile grazie a varie tecnologie che non ricaricano la pagina, ma chiedono al server alcuni dati dopo che l'utente ha fatto una scelta sulla prima select. Le tecnologie impiegate sono l'AJAX e il JSON (in questo caso usiamo il JSON che garantisce velocità e leggerezza dell'applicazione) oppure invece del JSON un normale array associativo in PHP lato server.

Innanzitutto vediamo il codice HTML delle select e il Javascript che procede con la chiamata AJAX quando l'utente effettua la scelta sulla prima select (provincia):

HTML

<select id="provincia" name="provincia" onchange="getComune(this.value)">
    <option value="-">-</option>
    <option value="Chieti">Chieti</option>
    <option value="L'Aquila">L'Aquila</option>
    <option value="Teramo">Teramo</option>
    <option value="Pescara">Pescara</option>
</select>

<select id="comune" name="comune">
    <option value="-">-</option>
</select>

JAVASCRIPT

function getComune(provincia){
            var http = new XMLHttpRequest();
                var url = "json_comuni.php";
                var params = "provincia="+ provincia;
                http.open("GET", url+"?"+params, true);
                http.onreadystatechange = function() {
                    if(http.readyState === 4 && http.status === 200) {
                        var response = http.responseText;
                        var json = JSON.parse(response); //parsa la stringa JSON che restituisce lo script json_comuni.php
                        //elimina options
                        $("#comune").children("option").remove(); // elimina tutte le select che ci sono già
                        for(var i=0; i<json.length;i++){// ciclo che riempie di nuovo la select con id "comune" con le nuove option
                            $('#comune').append('<option value="' + json[i].nome + '">' + json[i].nome + '</option>'); //nome è definito nella stringa JSON
                        }
                    }
                };
                http.send(null);
        }

Il codice sopra in Javascript realizza una chiamata AJAX allo script json_comuni.php passando come parametro il nome della provincia scelto dalla prima select poi, con i dati ricevuti dallo script codificati in JSON, realizza l'append delle nuove option nella select "comuni". Il risultato è che avremo tutti i comuni della provincia selezionata nella seconda select con id "comuni". Non ci resta che vedere lo script in PHP lato server, molto semplice:

PHP

<?php

$provincia=addslashes($_GET['provincia']);

$comuni=getComuni($provincia);

echo json_encode($comuni); //codifica array in json

?>

L'esempio illustrato è avanzato, perché comporta la conoscenza delle tecnologie che ho riportato sopra, ma è molto gettonato tra i web developers che lo utilizzano in più punti nelle loro applicazioni. E' importante dire che il codice esempio dato va rifinito, ma questo spetta allo stile personale di ogni sviluppatore. Per chiarimenti commentate sotto! A presto.