Utilisez ajax pour modifier le contenu de la page et l'URL de la barre d'adresse sans actualiser

Cet article présente principalement en détail la méthode d'utilisation d'ajax et window.history.pushState pour modifier le contenu de la page et l'URL de la barre d'adresse sans actualiser. Les amis dans le besoin peuvent s'y référer

Lors de la visite du désormais populaire. Google Plus, les utilisateurs prudents peuvent constater que les clics entre les pages sont demandés de manière asynchrone via ajax et que l'URL de la page change en même temps. Et il peut très bien prendre en charge l'avant et l'arrière du navigateur. Les gens ne peuvent s’empêcher de se demander : qu’est-ce qui a une fonction si puissante ?

HTML5 référence de nouvelles API, à savoir history.pushState et history.replaceState C'est grâce à cette interface que l'URL de la page peut être modifiée sans actualisation.

Différences par rapport à l'AJAX traditionnel

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

Bien que l'ajax puisse modifier le contenu de la page sans l'actualiser, il ne peut pas être modifié. URL de la page

Deuxièmement, pour une meilleure accessibilité, modifiez le hachage de l'URL après les modifications du contenu. Cependant, la méthode de hachage ne peut pas très bien gérer les problèmes d'avant et d'arrière du navigateur

Certains navigateurs ont 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é

. De plus, l'utilisation d'ajax est très peu conviviale pour les moteurs de recherche, et les zones explorées par les robots sont souvent vides

Afin de résoudre les problèmes causés par l'ajax traditionnel, une nouvelle API a été introduite en HTML5, à savoir : history .pushState, history.replaceState

Vous pouvez utiliser l'historique du navigateur via les interfaces pushState et replaceState et modifier 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 appeler

var state = {
 title: title,
 url: options.url,
 otherkey: othervalue
};
window.history.pushState(state, document.title, url);

En plus du titre et de l'url, l'objet state peut également ajouter d'autres données, par exemple : vous souhaitez également envoyer du ajax configurations Enregistrez-le.

replaceState et pushState sont similaires et aucune explication supplémentaire n'est nécessaire.

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, afin que vous puissiez le faire. peut obtenir le titre et l'URL stockés.

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

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

Quelques restrictions

1 Il est inévitable qu'il ne puisse pas traverser de domaine. Pour citer un dicton classique que j'ai vu une fois sur Internet : "Si javascript peut traverser des domaines, alors cela peut être incroyable !" 2 Bien que l'objet d'état puisse stocker de nombreux attributs personnalisés, la valeur ne peut pas être un objet. .

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

1. Un en-tête spécial peut être envoyé à ajax combiné avec 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 juger à travers les éléments suivants

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

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

Articles connexes :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!