Modifier adresse URL de la barre dans AJAX App Associez État actuel

voix
160

J'écris une application AJAX, mais comme l'utilisateur se déplace à travers l'application, je voudrais l'URL dans la barre d'adresse de mise à jour malgré l'absence de rechargements de page. Au fond, je voudrais pour eux d'être en mesure de signet à tout moment et revenir ainsi à l'état actuel.

Comment les personnes qui manipulent le maintien restfulness dans les applications AJAX?

Créé 04/08/2008 à 18:53
source utilisateur
Dans d'autres langues...                            


8 réponses

voix
116

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

http://example.com/

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

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

location.hash = 'foo';

Ensuite, l'URL affichée dans le navigateur sera mis à jour:

http://example.com/#foo

Cela permet aux utilisateurs de signet l'état « foo » de la page, et utiliser l'historique du navigateur pour naviguer entre les états.

Avec ce mécanisme en place, vous aurez alors besoin d'analyser la partie de hachage de l'URL du côté client en utilisant JavaScript pour créer et afficher l'état initial approprié, comme des identifiants de fragments (la partie après le #) ne sont pas envoyés à la serveur.

Plugin hashchange Ben Alman fait ce dernier un jeu d' enfant si vous utilisez jQuery.

Créé 04/08/2008 à 19:04
source utilisateur

voix
18

Regardez des sites comme book.cakephp.org. Ce site modifie l'URL sans utiliser le hachage et utiliser AJAX. Je ne sais pas comment il le fait exactement, mais je l'ai essayé de le comprendre. Si quelqu'un sait, laissez-moi savoir.

github.com aussi quand on regarde un certain naviguant dans un projet.

Créé 13/02/2011 à 20:47
source utilisateur

voix
17

Il est peu probable que l'écrivain veut recharger ou rediriger son visiteur lors de l' utilisation d' Ajax. Mais pourquoi ne pas utiliser HTML5 pushStatele / replaceState?

Vous serez en mesure de modifier la barre d' adresses autant que vous le souhaitez. Obtenez urls aspect naturel, avec AJAX.

Consultez le code sur mon dernier projet: http://iesus.se/

Créé 27/04/2011 à 09:09
source utilisateur

voix
12

Ceci est similaire à ce que Kevin a dit. Vous pouvez avoir votre état client comme un objet javascript, et quand vous voulez enregistrer l'état, vous sérialiser l'objet (en utilisant le codage JSON et base64). Vous pouvez ensuite définir le fragment de 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 traitera le nouvel état comme un nouvel emplacement (donc le bouton de retour les conduira à l'emplacement précédent). Ce dernier ne fonctionne pas.

Créé 04/08/2008 à 19:02
source utilisateur

voix
3

Si OP ou d'autres cherchent encore un moyen de faire modifier l'historique du navigateur pour activer l'état, à l'aide pushState et replaceState, comme le suggère IESUS, est la voie « droit » de le faire maintenant. Son principal avantage sur location.hash semble que cela crée urls réels, non seulement hash. Si l'historique du navigateur à l'aide hash est enregistré, puis revisité avec javascript qui est désactivé, l'application ne fonctionnera pas, car les hash ne sont pas envoyés au serveur. Toutefois, si pushState a été utilisé, l'itinéraire complet sera envoyé au serveur, que vous pouvez ensuite construire pour répondre de façon appropriée aux routes. J'ai vu un exemple où les mêmes modèles de moustache ont été utilisés sur le serveur et du côté client. Si le client avait javascript activé, il obtiendrait des réponses percutantes en évitant l'aller-retour au serveur, mais l'application fonctionnerait parfaitement bien sans le javascript. Ainsi, l'application peut dégrader avec grâce en l'absence de javascript.

En outre, je crois qu'il ya un certain 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 supporte pas, il revient automatiquement à l'aide de hash.

Créé 23/06/2011 à 10:20
source utilisateur

voix
3

La méthode window.location.hash est la meilleure façon de faire les choses. Pour une explication de la façon de le faire, Modèles Ajax - URL uniques .

YUI a une mise en œuvre de ce modèle en tant que module, qui comprend arounds de travail spécifique IE pour obtenir le bouton de retour de travail avec re-écrire l'adresse en utilisant le hachage. YUI Browser History Manager .

D'autres cadres ont des implémentations similaires aussi bien. Le point important est de savoir si vous voulez que l'histoire de travailler avec le re-écrire l'adresse, les différents navigateurs ont besoin de différentes façons de le manipuler. (Ceci est détaillé dans le premier article de lien.)

IE a besoin d'une entaille à base iframe, où Firefox produira histoire double en utilisant la même méthode.

Créé 31/03/2009 à 06:54
source utilisateur

voix
3

SWFAddress fonctionne dans des projets Flash et Javascript et vous permet de créer des URL Bookmarkable (en utilisant la méthode de hachage mentionné ci-dessus), ainsi que de vous donner un soutien en arrière-bouton.

http://www.asual.com/swfaddress/

Créé 01/09/2008 à 14:43
source utilisateur

voix
2

Vérifiez si l'utilisateur est 'dans la page lorsque vous cliquez sur la barre d'URL, javascript dit que vous êtes sur la page. Si vous changez la barre d'URL et appuyez sur « ENTRER » avec le symbole « # » en son sein, alors vous allez dans la page à nouveau, sans clic sur la page manuellement avec le curseur de la souris, puis une commande d'événement keyboad (document.onkeypress) de javascript sera être en mesure de vérifier si elle est active et entrer le javascript pour la redirection. Vous pouvez vérifier si l'utilisateur est dans la page avec window.onfocus et vérifier s'il est avec window.onblur.

Oui, il est possible.

;)

Créé 14/10/2010 à 00:18
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more