Prise en charge du bouton d'historique AJAX sans devenir fou

Question

J'ai utilisé l'adresse jQuery plusieurs fois pour prendre en charge le bouton de retour dans les petites applications asynchrones.

Lorsque toutes les requêtes AJAX font la même chose (c'est-à-dire, demander une page de manière asynchrone et remplacer un élément HTML par la requête), l'implémentation peut être facile. Lorsque les requêtes AJAX peuvent faire des choses différentes, disons ouvrir une superposition dans un cas et changer le contenu de la page entière dans un autre cas, les choses deviennent compliquées.

Je me suis retrouvé avec un code vraiment merdique pour le fait que j'ai dû passer par beaucoup d'instructions if pour analyser la valeur de hachage (#/somepage/someotherpage). J'ai toujours répété à moi-même: il doit y avoir une meilleure façon de le faire.

Quelqu'un a-t-il rencontré le même problème et peut-il suggérer une solution?

Sinon, vérifiez mon idée et dites-moi ce que vous en pensez.

Mon idée est de créer un objet qui émule l'objet window.history, mais seulement pour l'histoire AJAX, appelons-le "ajaxhistory". Chaque fois qu'une page est demandée de manière asynchrone quelque chose comme cela se produit:

ajaxhistory[i] = { 
    url: 'here the url', 
    type: 'overlay' 
    otherusefulinfo: 'whatever' 
} 
i++ 

Ainsi, par exemple:

if(moving back or forward){ 
    if(currenturl == ajaxhistory[i-1].url){ 
     // i'm going back 
     // i'm able to know what type of action i should take thanks to 
     // ajaxhistory[i-1].type and ajaxhistory[i-1].otherusefulinfo 
    } 
} 

J'aime cette idée, car cela rendrait mon code beaucoup plus facile à lire, mantenir et changement . Supposons que je veux ajouter de nouvelles fonctionnalités ... Je peux ajouter un nouveau type et je travaille avec cela, alors que normalement je devrais éditer beaucoup de déclarations si merdiques.

Qu'en pensez-vous? Y aurait-il des problèmes d'un point de vue performance?

Answer 1

Vérifiez ce travail par Ben Alman

http://benalman.com/projects/jquery-bbq-plugin/

Il a un plugin pour aider à soutenir le bouton retour.

Espérons que cela soit utile.

Bob

Answer 2

Vous pouvez utiliser la fonction de html5:
window.history.pushState({type: 'overlay'}, title, url), où le premier objet JS est param.

Vous pouvez accéder à cet objet comme ça:

window.onpopstate = function(event) { 
    alert(event.state.overlay); 
} 

Pour plus d'informations, consultez https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history