Beispiel für die Verwendung von Ajax und History.pushState zum Ändern der Seiten-URL ohne Aktualisierung von_AJAX

In diesem Artikel wird hauptsächlich das Beispiel der Verwendung von Ajax und History.pushState zum Ändern der Seiten-URL ohne Aktualisierung vorgestellt. Freunde, die dies benötigen, können sich auf

Leistung

beziehen Wenn Sie diesen Blog, github.com, plus.google.com und andere Websites mit Browsern wie Chrome oder Firefox besuchen und vorsichtig sind, werden Sie feststellen, dass Klicks zwischen Seiten asynchron und gleichzeitig über Ajax angefordert werden , die URL der Seite hat sich geändert. Und es kann den Browser vorwärts und rückwärts sehr gut unterstützen.

Was hat eine so mächtige Funktion?

HTML5 referenziert die neuen APIs „history.pushState“ und „history.replaceState“, die zum Ändern der Seiten-URL ohne Aktualisierung verwendet werden.
Unterschiede zum herkömmlichen AJAX

Traditionelles Ajax weist die folgenden Probleme auf:

1. Der Seiteninhalt kann ohne Aktualisierung geändert werden, die Seiten-URL kann jedoch nicht geändert werden

2. Zur besseren Zugänglichkeit wird der Hash der URL normalerweise geändert

3 Die Hash-Methode kann die Vorwärts- und Rückwärtsprobleme des Browsers nicht gut bewältigen!

4. Der Browser hat die Onhashchange-Schnittstelle eingeführt. Browser, die diese nicht unterstützen, können nur regelmäßig feststellen, ob sich der Hash geändert hat.

Diese Methode ist jedoch für Suchmaschinen sehr unfreundlich >

6. Twitter und Google haben sich darauf geeinigt, #!xxx (das erste Zeichen von Hash) zu verwenden, und Suchmaschinen unterstützen dies.

Um die durch herkömmliches Ajax verursachten Probleme zu lösen, wurden in HTML5 neue APIs eingeführt, nämlich: History.pushState, History.replaceState

Sie können den Browserverlauf über PushState und bedienen replaceState-Schnittstellen und Ändern der URL der aktuellen Seite.

pushState dient dazu, die angegebene URL zum Browserverlauf hinzuzufügen, und replaceState dient dazu, die aktuelle URL durch die angegebene URL zu ersetzen.

So verwenden Sie

<strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">var state = { 
title: title, 
url: options.url, 
otherkey: othervalue 
}; 
window.history.pushState(state, document.title, url);</strong>

Zusätzlich zu Titel und URL können Sie dem Statusobjekt auch andere Daten hinzufügen, zum Beispiel: Sie möchten auch etwas Ajax konfigurieren Konfigurationen zum Speichern.

replaceState und pushState sind ähnlich, daher werde ich sie hier nicht vorstellen.

So reagieren Sie auf die Vorwärts- und Rückwärtsoperationen des Browsers

Das onpopstate-Ereignis wird für das Fensterobjekt bereitgestellt. Das oben übergebene Statusobjekt wird zum Unterobjekt des Ereignisses, sodass der gespeicherte Titel und URL kann abgerufen werden.

window.addEventListener('popstate', function(e){ 
if (history.state){ 
var state = e.state; 
//do something(state.url, state.title); 
} 
}, false);

Auf diese Weise können Sie Ajax und PushState für perfektes, aktualisierungsfreies Surfen kombinieren.

Einige Einschränkungen

1. Die übergebene URL muss in derselben Domäne liegen und darf nicht domänenübergreifend sein

2. Obwohl das Statusobjekt viele benutzerdefinierte Attribute speichern kann, ist es nicht serialisierbar gespeichert werden, etwa DOM-Objekte.

Einige Verarbeitungen entsprechen dem Backend

In diesem Modus muss zusätzlich zur Verwendung von Ajax zum Durchsuchen ohne Aktualisierung auch sichergestellt werden, dass die geänderte URL nach direkter Anforderung normal durchsucht werden kann, sodass die Das Backend muss diese verarbeiten.

1. Senden Sie einen speziellen Header an Ajax mit pushState, wie zum Beispiel: setRequestHeader(‘PJAX’, ‘true’).

2. Wenn das Backend den Header mit PJAX=true erhält, werden die gemeinsamen Teile der Seite nicht ausgegeben. Beispiel: PHP kann das folgende Urteil fällen

function is_pjax(){ 
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true'; 
}

Obwohl es auf der Schnittstelle nur pushState, replaceState und onpopstate gibt, muss bei der Verwendung viel Verarbeitung durchgeführt werden.

Hierfür wurde ein auf jquery basierendes Plug-in geschrieben. Im folgenden Artikel wird detailliert beschrieben, wie Sie mit pjax (ajax+pushState) das URL-Browsing ohne Aktualisierung ändern können.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

3-Punkte-Zusammenfassung der technischen Prinzipien von Ajax_AJAX-bezogen

Anleitung zur Verwendung der AJAX-Kapselungsklasse

Erste Einführung in AJAX im AJAX-Tutorial

Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung von Ajax und History.pushState zum Ändern der Seiten-URL ohne Aktualisierung von_AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!