Exemple d'utilisation d'ajax et history.pushState pour modifier l'URL de la page sans rapport avecfresh

Exemple d'utilisation d'ajax et history.pushState pour modifier l'URL de la page sans rapport avecfresh_AJAX

亚连

Libérer： 2018-05-25 15:21:56

original

1672 Les gens l'ont consulté

Cet article présente principalement l'exemple d'utilisation d'ajax et history.pushState pour modifier l'URL de la page sans actualiser. Les amis qui en ont besoin peuvent se référer à

Performance

. Si vous utilisez Lorsque des navigateurs tels que Chrome ou Firefox visitent ce blog, github.com, plus.google.com et d'autres sites Web, si vous faites attention, vous constaterez que les clics entre les pages sont demandés de manière asynchrone via ajax, et en même temps , l'URL de la page a changé. Et il peut très bien prendre en charge le navigateur en avant et en arrière.

Qu'est-ce qui a une fonction si puissante ?

HTML5 fait référence à de nouvelles API, history.pushState et history.replaceState, qui sont utilisées pour modifier l'URL de la page sans actualiser.
Différences par rapport à l'AJAX traditionnel

L'ajax traditionnel présente les problèmes suivants :

1. Le contenu de la page peut être modifié sans actualisation, mais l'URL de la page ne peut pas être modifiée.

2. Pour une meilleure accessibilité, après la modification du contenu, le hachage de l'URL est généralement modifié

3 La méthode de hachage ne peut pas bien gérer les problèmes de transfert en avant et en arrière du navigateur !

4. Le navigateur a introduit l'interface onhashchange. Les navigateurs qui ne la prennent pas en charge ne peuvent déterminer que périodiquement si le hachage a changé

Mais cette méthode est très peu conviviale pour les moteurs de recherche

6. Twitter et Google ont convenu d'utiliser #!xxx (c'est-à-dire que le premier caractère du hachage est !), et les moteurs de recherche le prennent en charge.

Afin de résoudre les problèmes causés par l'ajax traditionnel, de nouvelles API ont été introduites dans HTML5, à savoir : history.pushState, history.replaceState

Vous pouvez exploiter l'historique du navigateur via pushState et interfaces replaceState et modifiez l'URL de la page actuelle.

pushState consiste à ajouter l'URL spécifiée à l'historique du navigateur, et replaceState consiste à remplacer l'URL actuelle par l'URL spécifiée.

Comment utiliser

<strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">var state = { 
title: title, 
url: options.url, 
otherkey: othervalue 
}; 
window.history.pushState(state, document.title, url);</strong>

Copier après la connexion

En plus du titre et de l'URL, vous pouvez également ajouter d'autres données à l'objet d'état, telles que : vous souhaitez également envoyer un peu d'ajax Enregistrez la configuration.

replaceState et pushState sont similaires, je ne les présenterai donc pas ici.

Comment répondre aux opérations avant et arrière du navigateur

L'événement onpopstate est fourni sur l'objet window. L'objet state passé ci-dessus deviendra un sous-objet de l'événement, de sorte que le titre stocké et L'URL peut être obtenue.

window.addEventListener(&#39;popstate&#39;, function(e){ 
if (history.state){ 
var state = e.state; 
//do something(state.url, state.title); 
} 
}, false);

Copier après la connexion

De cette façon, vous pouvez combiner ajax et pushState pour une navigation parfaite sans actualisation.

Quelques restrictions

1. L'URL transmise doit être dans le même domaine et ne peut pas traverser de domaines

2 Bien que l'objet d'état puisse stocker de nombreux attributs personnalisés, il n'est pas sérialisable. Les objets ne le peuvent pas. être stockés, tels que : les objets DOM.

Quelques traitements correspondant au backend

Dans ce mode, en plus d'utiliser ajax pour naviguer sans rafraîchir, il faut également s'assurer que l'URL modifiée peut être parcourue normalement après l'avoir directement demandée, donc le le backend doit les traiter.

1. Envoyez un en-tête spécial à ajax en utilisant pushState, tel que : setRequestHeader('PJAX', 'true').

2. Lorsque le backend obtient l'en-tête avec PJAX=true, les parties communes de la page ne seront pas affichées. Par exemple : PHP peut porter les jugements suivants

function is_pjax(){ 
return array_key_exists(&#39;HTTP_X_PJAX&#39;, $_SERVER) && $_SERVER[&#39;HTTP_X_PJAX&#39;] === &#39;true&#39;; 
}

Copier après la connexion

Bien que l'interface n'ait que pushState, replaceState et onpopstate, de nombreux traitements doivent être effectués lors de son utilisation.

Un plug-in basé sur jquery a été écrit pour cela. L'article suivant présentera en détail comment utiliser pjax (ajax+pushState) pour modifier la navigation dans les URL sans actualiser.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.