pushState+Ajax réalise le changement de page sans actualisation

Cette fois, je vais vous présenter pushState+Ajax pour réaliser un changement de page sans actualiser. Quelles sont les précautions à propos de pushState+Ajax pour réaliser un changement de page sans actualisation. Ce qui suit est un cas pratique, prenons un. regarder.

Avant-propos

De tels besoins sont très courants : cliquer sur le numéro de page pour mettre à jour partiellement la page (pas la rafraîchir dans son ensemble), et générer une gestion de l'historique. Le rafraîchissement partiel est facile à mettre en œuvre. Ajax peut répondre à nos besoins, mais cela ne produit pas de gestion historique. Heureusement, HTML5 nous fournit plusieurs API utiles pour résoudre ce problème, voir ci-dessous.

Texte

1. API

1. () prend trois paramètres : un objet d'état, un titre (maintenant ignoré) et une adresse URL facultative.

titre : vide
chaîne
(peut être utile plus tard). url : adresse URL vers laquelle accéder, ne peut pas traverser le domaine.

Fonction : Ajoutez l'URL actuelle et history.state à l'historique, et remplacez l'actuel par le nouvel état et l'URL. Cela n’entraînera pas l’actualisation de la page. 2. replaceState

L'opération history.replaceState() est similaire à history.pushState(), sauf que la méthode replaceState() modifiera l'entrée actuelle de l'historique au lieu de créer une nouvelle entrée. .

3. window.onpopstate

history.go et history.back (y compris l'utilisateur qui appuie sur les boutons avant et arrière de l'historique du navigateur) sont déclenchés et la page n'est pas actualisée (en raison du l'utilisation de pushState pour modifier l'historique) déclenchera l'événement popstate

Lorsque l'événement se produit, le navigateur supprimera l'URL et l'objet d'état correspondant de l'historique pour remplacer l'URL actuelle et history.state. History.state peut également être obtenu via event.state.

2. La mise en œuvre du scénario est très simple. Cliquez sur le p sous le bouton pour voir différentes

et. titres. Utilisez ajax pour actualiser et générer la gestion de l’historique.

<p class="page">
  <a href="javascript:;">[ <span>1</span> ]</a>
  <a href="javascript:;">[ <span>2</span> ]</a>
  <a href="javascript:;">[ <span>3</span> ]</a>
  <a href="javascript:;">[ <span>4</span> ]</a>
</p>
<p>
  <img />
  <p class="title"></p>
</p>

  function setUrl(page){
    var url = location.pathname + '?page=' + page;
    history.pushState({
      url : url
    },'',url);
  }
//每次点击按钮的时候就往历史记录里面增加一个条目

  (function(){
    //默认显示第一页
    var url = location.pathname + '?page=1';
    //修改当前的历史记录
    history.replaceState({
      url : url
    },'',url); 
  })()

  window.addEventListener('popstate',function(){
    var page = getPage();
    xhr(page);
  })

Lecture recommandée :

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!