In questo articolo presenteremo RSH (Really Simple History), una libreria Javascript Open Source, molto leggera e funzionale, per la gestione dei bookmark e della cronologia del browser in applicazioni Ajax.
Questa libreria, tramite l'utilizzo di un form HTML nascosto, è grado di inizializzare una cache locale legata alla sessione HTTP dell'utente; questa cache continuerà ad essere aggiornata ad ogni richiesta di dati, creando cosi svariati stati dell'applicazione che andranno a far parte della cronologia del browser, cronologia che sarà poi navigabile utilizzando i bottoni "Avanti" e "Indietro".
Come chiunque può confermare in base alla sua esperienza, la possibilità di aggiungere una pagina ai preferiti e la navigazione avanti/indietro sono due strumenti utilissimi quando si ha a che fare con applicazioni web suddivise su più livelli (e non solo). Durante la navigazione, la barra degli indirizzi mostra l'URL corrente, che può quindi essere copiato (per esempio in una mail), o inserito nei bookmark per poterlo richiamare in seguito facilmente.
Le applicazioni Ajax, tuttavia, presentano da questo punto di vista, dei problemi, visto che la loro implementazione il più delle volte utilizza una singola pagina web caratterizzata da un singolo URL.
Prendendo come esempio GMail nella prima versione, l'URL visualizzato nella barra dell'indirizzo del browser rimaneva sempre lo stesso, anche quando l'utente selezionava una delle funzioni previste dall'applicazione modificando quindi ciò che veniva visualizzato.
In questo modello applicativo, la creazione di bookmark legati a stati particolari dell'applicazione è impossibile.
Inoltre, se l'utente clicca sul bottone Indietro del browser, l'applicazione Ajax cessa di esistere e verrà sostituita dall'ultima pagina visualizzata in precedenza dall'utente, che normalmente è una pagina completamente diversa dal contesto che ci si aspettava.
La libreria RSH è stata creata per risolvere questi problemi, rendendo cosi gli applicativi Ajax più user friendly.
Attualmente la libreria è giunta alla versione 0.6. Pesa poco più di 27kb ed è scaricabile da questa pagina ospitata su Google Code.
Come è possibile leggere in rete, questa versione funziona egregiamente con Firefox, Netscape, Opera, Safari, presentando invece alcuni problemi con IE.
Ma non preoccupatevi, a breve è prevista una nuova versione che promette una buona compatibilità con tutti i principali browser presenti sul mercato.
Ma guardiamo un po' più nel dettaglio il codice per l'implementazione di questa libreria:
<script type="text/javascript" src="json2007.js"></script>
<script type="text/javascript" src="rsh.js"></script>
<script type="text/javascript">
window.dhtmlHistory.create();
var yourListener = function(newLocation, historyData)
{
//azione da eseguire;
}
window.onload = function()
{
dhtmlHistory.initialize();
dhtmlHistory.addListener(yourListener);
};
</script>
Come prima cosa, qualsiasi pagina volesse utilizzare la libreria RSH deve importare il file rsh.js:
<script type="text/javascript" src="rsh.js"></script>
Bisogna inserire poi nella stessa directory in cui è ospitata la nostra applicazione Ajax un file di nome blank.html. Questo file è già contenuto nel pacchetto di distribuzione della libreria e viene utilizzato da Internet Explorer come target url per l'iframe. Infatti IE, a differenza di altri browser, per gestire la cronologia si avvale di un iframe nascosto che deve puntare verso un url reale per il corretto funzionamento.
La libreria, al termine del caricamento della pagina, inizializza un oggetto globale di nome DhtmlHistory (dhtmlHistory.initialize();) che servirà per la manipolazione della cronologia dei siti visitati.
Ora tramite il metodo dhtmlHistory.addListener(); registrerete una funzione Javascript di callback che avrà il compito di intercettare gli eventi legati alla gestione della cronologia. Questa funzione accetterà due argomenti: il nuovo indirizzo della pagina ed ogni altro eventuale dato da associare all'evento.
Come si può notare dal codice visto sopra, l'implementazione standard di questa libreria si avvale della libreria json2007; ma esistono altri tipi di implementazioni che utilizzano diverse librerie Javascript (per esempio Prototype). Per maggiori informazioni consultate queste istruzioni.
Vediamo ora come possiamo interagire con la cronologia del browser utilizzando le principali classi Javascript che ci mette a disposizione la libreria RSH.
La libreria si avvale in due classi Javascript: DhtmlHistory e HistoryStorage. La prima implementa una cronologia di navigazione adatta ad essere utilizzata nelle applicazioni Ajax. La seconda invece permette di memorizzare una quantità arbitraria di stati dell'applicazione e di associarli alla cronologia.
Esaminiamo insieme i principali metodi che queste due classi mettono a disposizione.
DhtmlHistory
add(nuovo_url,dati): accetta come argomenti l'ancora da anteporre all'url per la generazione di un nuovo stato della pagina nella cronologia (es. http://www.esempio.it/index.html#pagina1) e dei dati aggiuntivi in diversi formati.
IsFirstLoad(): permette di distinguere il vero caricamento iniziale della pagina da quelli generati da eventi associati ai bottoni di navigazione del browser.
HistoryStorage
put(chiave_nome,chiave_valore): questo metodo permette di salvare dei dati (ad esempio oggetti Javascript, dati XML etc, nella cronologia del browser, identificandoli con una chiave in formato stringa per il successivo recupero.
get(chiave_nome): permette di estrarre dei dati presenti in cronologia conoscendo la chiave di riferimento con cui sono stati salvati.
hasKey(chiave_nome): verifica la presenza di dati salvati nella cronologia utilizzando la loro chiave di riferimento.
Ricordate che i dati sono persistenti solo nell'ambito della cronologia del browser; se il browser viene chiuso, o se l'utente apre una nuova finestra e ricarica l'applicazione Ajax ridigitandone l'indirizzo, gli stati precedentemente memorizzati andranno persi.
