HTML and CSS Reference
In-Depth Information
// intercetto la navigazione della cronologia:
onpopstate = function (event) { showProductDe-
tails(event.state); }
};
function trackProductClick(link)
{
link.addEventListener("click", function (e)
{
// omissis: ottenere i dati del prodotto dal server via
AJAX
var product = { id: "...", url: "http://...",
name: "...", description: "...", price: "..." };
history.pushState(product, product.name, product.url);
showProductDetails(product);
e.preventDefault();
}, false);
};
function showProductDetails(product)
{
if (product != null)
{
// omissis: mostrare i dati di product nella scheda pro-
dotto
}
};
Come possiamo notare nell'esempio, risulta molto semplice rendere un'applicazione
AJAX compatibile con la classica modalità di navigazione attraverso la cronologia: è suf-
ficiente aggiungere all'oggetto history , tramite il metodo pushState , le informazioni
del prodotto visualizzato e intercettare l'evento onpopstate per aggiornare la visualiz-
zazione della scheda prodotto quando l'utente si muove avanti e indietro nella cronologia.
Con poche semplici righe di codice aggiuntivo, grazie alle History API, possiamo dunque
aumentare sensibilmente l'usabilità delle nostre applicazioni che usano AJAX.
Search WWH ::




Custom Search