So stellen Sie sicher, dass sich der Browser Ajax-Anfragen merkt und den Browser vorwärts und rückwärts steuert

Dieses Mal werde ich Ihnen zeigen, wie Sie den Browser dazu bringen, sich an Ajax-Anfragen zu erinnern und die Vorwärts- und Rückwärtsbewegung des Browsers zu steuern. Das Folgende ist ein praktischer Fall, schauen wir uns das an. Wenn wir verschiedene Webseiten durchsuchen, können wir die Vor- und Zurück-Tasten des Browsers verwenden, um zu den Seiten zu gelangen, die wir vorher und nachher besucht haben. Allen gemeinsam ist, dass sich die Adresse in der Adressleiste des Browsers geändert hat. Der Browser selbst verwaltet einen Stapel, der den Verlauf der von Benutzern besuchten Seiten aufzeichnet. Der Stapel zeichnet die Reihenfolge auf, in der Benutzer auf verschiedene Seiten zugreifen.

Aber in der Entwicklung verwenden wir häufig Ajax-Technologie, um die Benutzererfahrung von Webseiten zu verbessern. Ajax selbst ändert jedoch nicht die URL in der Adressleiste des Browsers. Es wird auf derselben Webseite ausgeführt. Zu diesem Zeitpunkt zeichnet der Browser die Ajax-Anfrage nicht auf. In diesem Fall fordert der Browser, nachdem der Benutzer nach fünf von einer Seite ausgelösten Ajax-Anfragen auf die Schaltfläche „Zurück“ geklickt hat, die vorherige Ajax-Anfrage nicht erneut an, sondern kehrt zur vorherigen Seite zurück.

Die erste Möglichkeit, dieses Problem zu lösen, besteht darin, den Hash-Wert des Standorts zu verwenden. Wenn sich der Hash-Wert der URL ändert, springt die Seite nicht, aber der Browser zeichnet die gehashte URL im Verlaufsdatensatz auf. Mit dieser Funktion können wir Ajax-Anfragen mit Verlaufsfunktionalität künstlich simulieren. Unten finden Sie eine Demo dieser Methode.

Erstellen Sie zunächst zwei Schaltflächen. Wenn Sie auf die Schaltfläche klicken, wird eine Anfrage an den Server gesendet und die Daten-ID über Parameter an den Server übermittelt. Der Server gibt das den Daten entsprechende Ergebnis zurück -Ausweis.

ul{
 margin:0;
 padding:0;
}
li{
 list-style: none;
 display: block;
 float: left;
 border: 1px solid #000;
 padding: 10px;
 margin-right: 20px;
 cursor: pointer;
}
li.active{
 background-color: #000000;
 color: #fff;
}
<ul>
 <li data-id="1">1</li>
 <li data-id="2">2</li>
</ul>

Ändern Sie gleichzeitig den Schaltflächenstatus und den Hash-Wert des Standorts in den Wert der Daten-ID. Überwachen Sie abschließend die Änderungen des Standort-Hash-Werts und wiederholen Sie die obigen Schritte.

Wenn wir auf die Schaltflächen in der Reihenfolge „1-2-1“ klicken, ist die Ausgabe der Konsole wie folgt

function sendAjax(hash){
 console.log("recived data:" + hash);
}
function btnStatus(hash){
 $("li").removeClass('active');
 $("li[data-id="+hash+"]").addClass('active');
}
function onHashChange(){
 var curHash = window.location.hash.replace("#","");
 if(curHash){
  btnStatus(curHash);
  sendAjax(curHash);
 }
}
window.onhashchange = onHashChange;
$("li").click(function(){
 var id = $(this).attr('data-id');
 window.location.hash = id;
});

Zu diesem Zeitpunkt drücken wir die Eingabetaste dreimal hintereinander die Taste drücken. Die Konsolenausgabe lautet wie folgt

recived data:1
recived data:2
recived data:2

Es ist ersichtlich, dass dies die Funktion der Browser-Aufzeichnung von Ajax-Anfragen simuliert.

recived data:1
recived data:2
recived data:1

Ich glaube, dass Sie die Methode beherrschen, 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:

Ausführliches Tutorial zum Erstellen eines Warenkorbs mit Ajax+PHP

So implementieren Sie den AJAX-Paging-Effekt

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass sich der Browser Ajax-Anfragen merkt und den Browser vorwärts und rückwärts steuert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!