Comment puis-je mettre en œuvre un filtrage dynamique purement avec AJAX tout en conservant un historique utilisable ?

Question

J'essaie de mettre en œuvre le filtrage AJAX sur mon propre site de commerce électronique et je cherche la meilleure solution.

Avec ce que j'ai trouvé :

Faire en sorte que tout le contenu soit généré de manière statique (construit par le serveur, puis appel à une requête ajax sur la même page, mais avec des paramètres). Le seul inconvénient est que l'utilisateur n'a pas d'historique car sa page URL ne change pas.

Je voulais essayer d'implémenter history.api, etc. mais je viens de voir ce filtrage génial juste ici : http://trendygolf.com/shop?brand[]=15&brand[]=27&price-min=0&pricemax=2000&sort=newest

D'après ce que je vois, il fait des appels AJAX ET change l'URL sans recharger la page, comment est-ce possible ?

Et bien sûr, il remplace simplement l'ancienne page html par la nouvelle page issue de la requête.

J'aimerais avoir de l'aide à ce sujet, quelles sont les meilleures pratiques, les avantages et les inconvénients, et comment trendygolf.com s'y prend-il.

Answer 1

En ce qui concerne la mise à jour de l'URL en place, cela fait partie du HTML5, mais je ne suis pas sûr à 100% de la prise en charge par IE. Ceci fonctionnera :

window.history.pushState(“object or string”, “Title”, “/new-url”);

Pour en savoir plus sur ce genre de choses, consultez la documentation de Mozilla : https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

Answer 2

En complément de la réponse donnée par newmu
lorsque vous avez besoin de maintenir l'historique/état des appels ajax, vous devez utiliser hashtags
qui font partie de l'url après le symbole hash('#'). tout ce que vous écrivez après # dans une url n'est pas envoyé au serveur
dans les navigateurs où l'API de l'historique n'est toujours pas prise en charge, les hashtags sont utilisés pour maintenir l'état.
les hashtags peuvent aussi être changés sans recharger la page

Answer 3

On dirait que vous pourriez utiliser le Histoire.js qui vous permet de modifier l'état/URL du navigateur à partir de JavaScript. Fondamentalement, cette bibliothèque utilise l'API HTML5 History si elle est disponible, mais peut l'émuler dans les navigateurs qui ne la prennent pas en charge. History.js est cependant une API de bas niveau, et vous pouvez vouloir utiliser une abstraction Router par-dessus, ce qui simplifie considérablement votre programmation. Dans ce but, j'ai implémenté le StateRouter.js bibliothèque.

Un exemple simple de la façon dont on peut utiliser StateRouter.js :

function getHome() {
}
function getPersons() {
}
function getPerson(id) {
}

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);

$(document).ready(function () {
    // Perform initial routing
    router.perform();

    // Navigate to a URL
    router.navigate('/persons/1');

    // Go back
    router.back();

    // Go forward
    router.go(1);
});