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.

state : informations d'état correspondant à l'URL vers laquelle accéder.

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

images

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

Core Code

<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>

Notez que lors du premier chargement, vous devez charger et remplacer l'enregistrement de l'historique

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

Écouter le événement popstage de la fenêtre, événement Lorsqu'il se produit, récupérez le numéro de page correspondant à l'historique actuel, puis exécutez ajax

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'informations intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

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

Lecture recommandée :

Comment implémenter un tableau de requêtes AJAX

Comment vider le cache en Ajax

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!