Ajax und HTML5 ändern die Seiten-URL ohne Aktualisierung

Leistung

Wenn Sie Chrome oder Firefox und andere Browser zum Besuch dieses Blogs, github.com, plus.google.com und anderer Websites verwenden und vorsichtig sind, werden Sie feststellen, dass es zu Klicks zwischen den Seiten kommt werden asynchron über Ajax angefordert und gleichzeitig hat sich die URL der Seite 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. Darüber hinaus hat der Browser die Onhashchange-Schnittstelle eingeführt. Browser, die diese nicht unterstützen, können nur in regelmäßigen Abständen feststellen, ob sich der Hash geändert hat

5. Diese Methode ist jedoch für Suchmaschinen sehr unfreundlich

. Twitter und Google haben sich darauf geeinigt, #!xxx zu verwenden (das heißt, das erste Zeichen von Hash ist!), 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

var state = {
    title: title,
    url: options.url,
    otherkey: othervalue
};
window.history.pushState(state, document.title, url);

Zusätzlich zum Titel und der URL können Sie dem Statusobjekt auch andere Daten hinzufügen. Beispielsweise möchten Sie auch einige Konfigurationen für den Ajax-Versand 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 zu einem Unterobjekt des Ereignisses, sodass Sie kann den gespeicherten Titel und die URL abrufen.

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 keine Domänen überschreiten

2. Obwohl das Statusobjekt viele benutzerdefinierte Attribute speichern kann, handelt es sich um Objekte die nicht serialisierbar sind, können nicht gespeichert werden, wie zum Beispiel DOM-Objekte.

Entsprechend einer Verarbeitung im 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 Anfrage normal durchsucht werden kann es, also muss das Backend diesen Behandlungen unterliegen.

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 Folgendes beurteilen:

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 und ajax History.pushState wurde in pjax gekapselt. Projektadresse: https://github.com/welefen/pjax. Unterstützt derzeit jquery und qwrap , Kissy 3-Versionen

Wenn Sie außerdem die Auswirkungen von HTML4 und HTML5 berücksichtigen möchten, können Sie sich auf History.js beziehen. Die Projektadresse lautet: https://github.com/browserstate/history .js.

Referenzmaterialien:

Einführung in die HTML5-Verlaufs-API

2. Sitzungsverlauf und Navigation