Heim > Artikel > Web-Frontend > 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.replaceStateSie 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
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
Einige Verarbeitungen entsprechen dem Backend
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!