Modifier l'URL de la barre d'adresse dans l'application AJAX pour faire correspondre l'état actuel

J'écris une application AJAX, mais au fur et à mesure que l'utilisateur se déplace dans l'application, j'aimerais que l'URL de la barre d'adresse soit mise à jour malgré l'absence de rechargement de page. Fondamentalement, je voudrais qu'ils soient en mesure de marquer à tout moment et revenir ainsi à l'état actuel.

Comment les gens manipulent-ils le maintien de RESTfulness dans les applications AJAX?

0
J'ai édité la réponse pour faire ressortir l'approche de pushState.
ajouté l'auteur jasonjwwilliams, source
window.history.pushState (null, 'hi', 'page1? id = 32')
ajouté l'auteur Omu, source
Il est utilisé pour maîtriser l'état de vos applications, mais n'a rien à voir avec "RESTfulness".
ajouté l'auteur Mohamed, source
la réponse acceptée a été écrite il y a 5 ans et pendant ce temps, nous avons eu window.history.pushState, tout comme @Omu a dit. La location.hash a apporté de nombreux problèmes et il est préférable de l'éviter.
ajouté l'auteur peteroak, source

6 Réponses

La façon de le faire est de manipuler location.hash lorsque les mises à jour AJAX entraînent un changement d'état que vous aimeriez avoir une URL discrète. Par exemple, si l'URL de votre page est:

http://example.com/

Si une fonction côté client a exécuté ce code:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

Ensuite, l'URL affichée dans le navigateur serait mise à jour pour:

http://example.com/#foo

Cela permet aux utilisateurs de mettre en signet l'état "foo" de la page et d'utiliser l'historique du navigateur pour naviguer entre les états.

Avec ce mécanisme en place, vous devrez alors analyser la partie hash de l'URL côté client en utilisant JavaScript pour créer et afficher l'état initial approprié, car les identifiants de fragment (la partie après le #) ne sont pas envoyés au client. serveur.

Ben Alman's hashchange plugin makes the latter a breeze if you're using jQuery.

0
ajouté
@buymeasoda Merci pour le montage; Je ne suis pas sûr de ce que je pensais quand j'ai écrit cette partie.
ajouté l'auteur Dave Ward, source
@Neil: J'ai utilisé volontairement la structure / questions / page à l'époque, mais je ne suis pas entièrement sûr pourquoi. Vous avez probablement raison de dire que c'est plus simple. J'ai mis à jour la réponse en conséquence.
ajouté l'auteur Dave Ward, source
@Pascal Vous pouvez, mais seulement dans les navigateurs qui supportent pushState de HTML5. Bonne info là-dessus: diveintohtml5.info/history.html
ajouté l'auteur Dave Ward, source
On dirait que tu as raison. C'est la seule approche. Cela semble être une bonne explication détaillée de votre conseil: << a href = "http://ajaxpatterns.org/Unique_URLs>" rel = "nofollow noreferrer"> ajaxpatterns.org/Unique_URLs> ;
ajouté l'auteur jasonjwwilliams, source
Wow, cette réponse a été très utile. Bien que les exemples d'URL soient un peu confus, SO pourrait remplacer automatiquement les liens avec des titres. Que diriez-vous de remplacer ceux avec quelque chose comme example.com et example.com/#foo, de sorte que nous pouvons voir l'URL entière en texte clair.
ajouté l'auteur Neil, source
J'ai fini par être un grand fan de history.js pour couvrir les bases de la compatibilité avec les navigateurs github.com/andreasbernhard /history.js
ajouté l'auteur jocull, source
@Dave je veux le #foo sans le hash-char est-ce possible?
ajouté l'auteur Pascal, source

Si OP ou d'autres cherchent toujours un moyen de modifier l'historique du navigateur pour activer l'état, l'utilisation de pushState et replaceState, comme suggéré par IESUS, est la bonne façon de le faire maintenant. Son principal avantage par rapport à location.hash semble être qu'il crée des URL réelles, pas seulement des hachages. Si l'historique du navigateur utilisant des hachages est enregistré, puis revisité avec JavaScript désactivé, l'application ne fonctionnera pas, car les hachages ne sont pas envoyés au serveur. Cependant, si pushState a été utilisé, la route entière sera envoyée au serveur, que vous pourrez ensuite construire pour répondre de manière appropriée aux routes. J'ai vu un exemple où les mêmes modèles moustache ont été utilisés sur le serveur et le côté client. Si le client avait JavaScript activé, il obtiendrait des réponses rapides en évitant l'aller-retour au serveur, mais l'application fonctionnerait parfaitement bien sans le javascript. Ainsi, l'application peut facilement se dégrader en l'absence de javascript.

Aussi, je crois qu'il y a un cadre là-bas, avec un nom comme history.js. Pour les navigateurs qui prennent en charge HTML5, il utilise pushState, mais si le navigateur ne le supporte pas, il retombe automatiquement en utilisant des hachages.

0
ajouté

C'est semblable à ce que Kevin a dit. Vous pouvez avoir l'état de votre client en tant qu'objet JavaScript et lorsque vous souhaitez enregistrer l'état, vous sérialisez l'objet (en utilisant l'encodage JSON et base64). Vous pouvez ensuite définir le fragment de l'href à cette chaîne.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

La première manière traitera le nouvel état comme un nouvel emplacement (ainsi le bouton de retour les conduira à l'emplacement précédent). Ce dernier ne le fait pas.

0
ajouté
faire document.location.replace redirigera également le navigateur vers cette URL (juste essayé dans la console chrome)
ajouté l'auteur Omu, source
Est-il possible d'ajouter une entrée à l'historique des signets sans actualiser la page? Définir l'emplacement (comme dans votre premier exemple) provoquera une actualisation, n'est-ce pas?
ajouté l'auteur Drew Noakes, source

Vérifiez si l'utilisateur est «dans» la page, lorsque vous cliquez sur la barre d'URL, JavaScript indique que vous êtes hors de la page. Si vous changez la barre d'URL et appuyez sur 'ENTER' avec le symbole '#', vous retournez dans la page, sans cliquer sur la page manuellement avec le curseur de la souris, puis une commande d'événement keyboad (document.onkeypress) de JavaScript être en mesure de vérifier si elle est entrée et active le JavaScript pour la redirection. Vous pouvez vérifier si l'utilisateur est dans la page avec window.onfocus et vérifiez s'il est sorti avec window.onblur.

Oui, c'est possible.

;)

0
ajouté
C'est la façon dont j'ai vu élégant de changer la page lorsque l'utilisateur éditer barre d'URL avec le symbole #.
ajouté l'auteur Marcelo, source

Regardez des sites comme book.cakephp.org. Ce site change l'URL sans utiliser le hash et utilise AJAX. Je ne sais pas exactement comment ça fonctionne mais j'ai essayé de le comprendre. Si quelqu'un le sait, faites le moi savoir.

Aussi github.com en regardant une navigation dans un certain projet.

0
ajouté
J'ai remarqué cela avec GitHub il y a environ une semaine. Comment diable font-ils cela? Doit revenir en arrière et vérifier.
ajouté l'auteur Drew Noakes, source
Merci pour cela, c'était exactement ce que je cherchais. Je me demandais comment github l'avait fait. Au début, je pensais que ça devait être rechargé mais il n'y avait que des requêtes AJAX. Dans Opera, il a rechargé la page.
ajouté l'auteur kamranicus, source
Une technique similaire est utilisée par fb lors de la navigation à travers des pages de différents groupes. Vous avez une colonne de navigation à gauche dans laquelle les différents groupes sont mentionnés. Lorsque vous cliquez sur un nom de groupe particulier, l'URL change et seul le contenu du volet de contenu principal change avec l'URL (pas de hachage). Ainsi, lorsque l'utilisateur recharge la page, il n'est pas redirigé vers la page d'accueil mais vers la page des groupes.
ajouté l'auteur Madeyedexter, source
Ils semblent utiliser la fonction JavaScript pushState (). Cela ajoute à l'historique de votre navigateur. Regarde dedans; c'est plutôt intéressant et cool.
ajouté l'auteur daniel.wright, source

Il est peu probable que l'auteur souhaite recharger ou rediriger son visiteur lors de l'utilisation d'Ajax. Mais pourquoi ne pas utiliser le code pushState / replaceState du HTML5?

You'll be able to modify the addressbar as much as you like. Get natural looking urls, with AJAX.

Check out the code on my latest project: http://iesus.se/

0
ajouté