Lösen Sie das Problem der Browser-Ajax-Anfrage und der Möglichkeit, vorwärts und rückwärts zu gehen_AJAX bezogen

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. In diesem Artikel wird hauptsächlich die Methode (1) vorgestellt, mit der sich der Browser an die Ajax-Anfrage erinnern und sich vorwärts und rückwärts bewegen kann. Freunde, die sie benötigen, können darauf verweisen

Wenn wir verschiedene Webseiten durchsuchen, können wir sie verwenden Mit der Zurück-Taste gelangen Sie zu den vorher und nachher besuchten Seiten. 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 innerhalb derselben Webseite ausgeführt. Zu diesem Zeitpunkt zeichnet der Browser die Ajax-Anfrage nicht auf. In diesem Fall fordert der Browser die vorherige Ajax-Anfrage nicht erneut an, nachdem der Benutzer auf die Schaltfläche „Zurück“ geklickt hat, nachdem er fünf Ajax-Anfragen auf einer Seite ausgelöst hat, 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.

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>

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

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;
});

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

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

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

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

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem der Browser-Ajax-Anfrage und der Möglichkeit, vorwärts und rückwärts zu gehen_AJAX bezogen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!