HTML and CSS Reference
In-Depth Information
Con la diffusione di AJAX, infatti, la classica modalità di esplorazione descritta in pre-
cedenza è in buona parte decaduta: una sola pagina è in grado di mostrare diversi contenuti
e intere applicazioni o siti web vengono esplorati senza cambiare contesto (URL), impe-
dendo di fatto all'utente di “tornare sui propri passi” muovendosi avanti e indietro nella
cronologia come è abituato a fare.
Supponiamo di voler gestire la consultazione di un catalogo prodotti utilizzando la clas-
sica visualizzazione master-details, dove i dettagli dei singoli prodotti siano ottenuti dal
server via AJAX. La
figura 8.4
mostra la struttura della pagina ipotizzata.
Figura 8.4
- Catalogo prodotti con visualizzazione master-details in un'unica pagina.
Quando l'utente seleziona un prodotto dall'elenco (indicato con la lettera “M” nella figura),
l'applicazione richiede al server i dettagli del prodotto per visualizzarne la scheda (indicata
con la lettera “D” nella figura) mediante una chiamata asincrona con
XMLHttpRequest
.
Utilizzando le API per la navigazione, possiamo memorizzare i prodotti visualizzati
dall'utente, consentendogli di muoversi all'interno della cronologia di navigazione come
se avesse effettivamente visitato URL diversi. Il listato 8.13 presenta il codice JavaScript
necessario.
Esempio 8.13
- Utilizzo delle History API
window.onload = function ()
{
if (!Modernizr.history)
{
alert("Il tuo browser non supporta History API");
return;
}
trackProductClick(document.getElementById("product1"));
trackProductClick(document.getElementById("product2"));
// omissis: intercettare i link di tutti i prodotti
