Verwenden Sie Ajax, um den Seiteninhalt und die URL der Adressleiste ohne Aktualisierung zu ändern

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von Ajax und window.history.pushState zum Ändern des Seiteninhalts und der Adressleisten-URL ohne Aktualisierung vorgestellt

Beim Besuch der jetzt beliebten Google Plus: Vorsichtige Benutzer stellen möglicherweise fest, dass Klicks zwischen Seiten asynchron über Ajax angefordert werden und sich gleichzeitig die URL der Seite ändert. Und es kann die Vorwärts- und Rückwärtsbewegung des Browsers sehr gut unterstützen. Die Leute fragen sich: Was hat eine so mächtige Funktion?

HTML5 referenziert neue APIs, nämlich History.pushState und History.replaceState. Über diese Schnittstelle kann die Seiten-URL ohne Aktualisierung geändert werden.

Unterschiede zum herkömmlichen AJAX

Traditionelles Ajax weist die folgenden Probleme auf:

Obwohl Ajax den Seiteninhalt ohne Aktualisierung ändern kann, kann er nicht geändert werden. Seiten-URL

Zweitens ändern Sie für eine bessere Zugänglichkeit den Hash der URL, nachdem sich der Inhalt geändert hat. Allerdings kann die Hash-Methode die Vorwärts- und Rückwärtsprobleme des Browsers nicht sehr gut bewältigen.

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

Darüber hinaus ist die Verwendung von Ajax für Suchmaschinen sehr unfreundlich und die von Spinnen durchsuchten Bereiche sind oft leer

Um die durch herkömmliches Ajax verursachten Probleme zu lösen, wurde in HTML5 eine neue API eingeführt, nämlich: Verlauf .pushState, Verlauf.replaceState

Sie können den Browserverlauf über die Schnittstellen pushState und replaceState bedienen und die URL der aktuellen Seite ändern.

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

So rufen Sie

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

auf

Zusätzlich zu Titel und URL kann das Statusobjekt auch andere Daten hinzufügen, zum Beispiel: Sie möchten auch einige Konfigurationen zum Senden speichern Ajax steht auf.

replaceState und pushState sind ähnlich und es ist keine weitere Erklärung erforderlich.

So reagieren Sie auf die Vorwärts- und Rückwärtsvorgänge 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. Es ist unvermeidlich, dass es nicht domänenübergreifend sein kann. Um ein klassisches Sprichwort zu zitieren, das ich einmal im Internet gesehen habe: „Wenn Javascript domänenübergreifend sein kann, dann kann es unglaublich sein!“

2 Obwohl das Statusobjekt viele benutzerdefinierte Attribute speichern kann, kann der Wert kein Objekt sein .

Entspricht einer Back-End-Verarbeitung

In diesem Modus muss zusätzlich zur Verwendung von Ajax zum Durchsuchen ohne Aktualisierung auch sichergestellt werden, dass dies auch beim normalen Durchsuchen möglich ist Dies kann nach direkter Anforderung der geänderten URL erfolgen, sodass das Backend diese verarbeiten muss.

1. Ein spezieller Header kann in Kombination mit pushState an Ajax gesendet werden, 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 die Schnittstelle nur pushState, replaceState und onpopstate hat, erfordert sie bei ihrer Verwendung dennoch viel Verarbeitung.

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

Verwandte Artikel:

So beheben Sie einen Ajax-Fehler im Google Chrome-Browser

Klicken Sie auf „Laden basierend auf Ajax“, um weitere Ladevorgänge ohne Aktualisierung anzuzeigen Gehen Sie zu dieser Seite

Zwei Lösungen für domänenübergreifende Ajax-Probleme

Das obige ist der detaillierte Inhalt vonVerwenden Sie Ajax, um den Seiteninhalt und die URL der Adressleiste ohne Aktualisierung zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!