CSSREVOLT - blog personale di Filippo Buratti

Una delle caratteristiche più interessanti di ajax nello sviluppo di applicazioni web è il livello di interattività che è possibile portare agli utenti. E forse uno degli aspetti più decisivi di questo processo è l'aggiunta di indicatori di attività (le fantastiche gif di Ajaxload) per consentire di sapere al navigatore che qualcosa sta accadendo. 

Se nel nostro sito utilizziamo numerose chiamate ajax (per aggiornare i contenuti della pagina, per inviare dati al server in caso di un form...etc), si rischia di scrivere del codice ridondante e superfluo per visualizzare e nascondere nella posizione stabilita i diversi indicatori di ogni chiamata.

Prototype dispone di un oggetto globale che fornisce delle funzioni di chiamata a tutte le richieste: Ajax.Responders, che offre 2 metodi register e unregister. Tramite le funzioni onCreate e onComplete mantiene aggiornato Ajax.ActiveRequestCount, che ricordo fornisce il numero delle richieste in esecuzione. 

Tramite Ajax.Responders possiamo quindi implementare un indicatore di caricamento unico per ogni chiamata ajax  che appare sempre nello stesso punto della pagina. Innanzitutto, per non sporcare l'html della pagina inseriremo il loader della pagina con javascript attraverso il D.O.M.; a differenza del mio esempio, potremmo anche evitare di scomodare Scriptaculous per mostrare/nascondere un semplice loader,  rinunciando all'effetto fade/appear. Ricorrendo semplicemente agli strumenti di Prototype (show(), update(), hide(), insert()) forse otterremo una esecuzione più veloce dello script.

Nella demo ho utlizzato una piccola classe per creare la navigazione e la riposta ajax.