Ajax progress bar

by Michele

Probabilmente avrete già trovato una libreria del genere su Internet, ma questa versione è proprio piccola e semplice da usare. L’ho realizzata utilizzando Prototype, la famosa libreria/framework che permette di velocizzare lo sviluppo JavaScript. La libreria in questione è stata realizzata per aggiungere la funzionalità di progress bar aggiornabile via Ajax ialle vostre applicazioni web ricche.

La libreria JavaScript è composta da appena 70 righe (di cui 25 sono di commenti ;-) ) ed è utilizzabile con estrema semplicità. Prima di tutto è necessario importarla dopo Prototype:

poi creare una istanza della classe AjaxProgressBar con tutti i parametri di configurazione:

<script type="text/javascript">
//<![CDATA[
    var progress = new AjaxProgressBar("progress-bar", "bar", {
        frequency: 5,
        total: 1540,
        url: "update.php"
    });
    progress.start();
//]]>
</script>

Il costruttore prevede tre parametri:

  1. id del div contenitore esterno (quello che disegna lo sfondo della progress bar)
  2. id del div contenitore interno (quello che disegna il progresso)
  3. array associativo contenente la lista dei parametri di configurazione

I parametri di configurazione sono i seguenti:

  • frequency – frequenza di aggiornamento (in secondi)
  • total – totale da confrontare con il valore restituito dalle risposte Ajax, per calcolare la percentuale di progresso
  • url – url delle richieste Ajax

La risposta alle richieste Ajax deve essere XML, ecco un esempio:

<?xml version="1.0" encoding="ISO-8859-1"?>
<value>45</value>

I due div possono essere disegnati applicando i stili:

<style type="text/css">
    #progress-bar {
        width: 200px;
        height: 19px;
        background: url("aquabarright.gif");
        background-position: right center;
    }
    #bar {
        background: url("aquabarleft.gif");
        width: 0%;
        height: 100%;
    }
</style>

Questo è il risultato grafico:

Ajax progress bar

Modificando i stili dei due div è possibile avere un qualsiasi effetto grafico.

La libreria è scaricabile da qui: ajaxprogressbar.js – 3kb
Il pacchetto con tutti i file è scaricabile da qui: ajaxprogressbar.zip – 39kb