pushState+Ajax realisiert den Seitenwechsel ohne Aktualisierung

Dieses Mal bringe ich Ihnen pushState+Ajax, um einen Seitenwechsel ohne Aktualisierung zu erreichen. Was sind die Vorsichtsmaßnahmen über pushState+Ajax, um einen Seitenwechsel ohne Aktualisierung zu erreichen? sehen.

Vorwort

Solche Anforderungen kommen sehr häufig vor: Klicken Sie auf die Seitenzahl, um die Seite teilweise zu aktualisieren (nicht als Ganzes zu aktualisieren) und eine Verlaufsverwaltung zu generieren. Eine teilweise Aktualisierung ist einfach zu implementieren, aber dies führt nicht zu einer historischen Verwaltung. Glücklicherweise stellt uns HTML5 mehrere nützliche APIs zur Verfügung, um dieses Problem zu lösen.

Text

1. pushStatepushState () benötigt drei Parameter: ein Statusobjekt, einen Titel (jetzt ignoriert) und eine optionale URL-Adresse.

Status: Statusinformationen, die der URL entsprechen, zu der gesprungen werden soll.

Titel: leere

Zeichenfolge

(kann später nützlich sein).
URL: URL-Adresse, zu der gesprungen werden soll, nicht domänenübergreifend.

Funktion:

Fügen Sie die aktuelle URL und „history.state“ zum Verlauf hinzu und ersetzen Sie die aktuelle durch den neuen Status und die neue URL. Die Seite wird dadurch nicht aktualisiert. 2. replaceState Die Operation „history.replaceState()“ ähnelt der Operation „history.pushState()“, mit der Ausnahme, dass die Methode „replaceState()“ den aktuellen Verlaufseintrag ändert, anstatt einen neuen Eintrag zu erstellen .

3. window.onpopstate

history.go und History.back (einschließlich des Benutzers, der die Schaltflächen „Vorwärts“ und „Zurück“ des Browserverlaufs drückt) werden ausgelöst und die Seite wird nicht aktualisiert (aufgrund der Die Verwendung von pushState zum Ändern des Verlaufs löst das Popstate

-Ereignis

aus. Wenn das Ereignis auftritt, entfernt der Browser die URL und das entsprechende Statusobjekt aus dem Verlauf, um die aktuelle URL und „history.state“ zu ersetzen. History.state kann auch über event.state abgerufen werden.

2. Die Implementierung des

-Szenarios ist sehr einfach. Klicken Sie auf das p unter der Schaltfläche, um verschiedene Bilder anzuzeigen Titel. Verwenden Sie Ajax, um die Verlaufsverwaltung zu aktualisieren und zu generieren.

Kerncode

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

Beachten Sie, dass Sie beim ersten Laden den Verlaufsdatensatz laden und ersetzen müssen

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

Anhören Popstage-Ereignis des Fensters, Ereignis Wenn es auftritt, rufen Sie die Seitenzahl ab, die dem aktuellen Verlauf entspricht, und führen Sie dann Ajax aus.

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

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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

So implementieren Sie ein AJAX-Anforderungsarray

So leeren Sie den Cache in Ajax

Das obige ist der detaillierte Inhalt vonpushState+Ajax realisiert den Seitenwechsel ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!