web-dev-qa-db-de.com

Chrome zeigt beim Drücken der Zurück-Taste eine Ajax-Antwort an

Ich bin auf ein Problem gestoßen: Wenn ich die Get-Methode von jQuery verwende, um etwas Inhalt abzurufen, wenn ich zurückklicke, anstatt eine Seite im Verlauf zurückzublättern, wird stattdessen der von der Ajax-Abfrage zurückgegebene Inhalt angezeigt.

Irgendwelche Ideen?

http://www.dameallans.co.uk/preview/allanian-society/news/56/Allanian-test

Wenn Sie auf der obigen Seite die Paginierung unter der Liste der Kommentare verwenden, werden Sie beim Ändern der Seite feststellen, dass der HTML-Inhalt angezeigt wird, der zum Generieren der Kommentarliste verwendet wird.

Ich habe festgestellt, dass dies nicht immer der Fall ist. Wenn Sie jedoch mehrmals auf eine andere Seite klicken und auf die Schaltfläche "Zurück" klicken, wird einfach json-Text innerhalb des Fensters anstelle der Website angezeigt.

Aus irgendeinem Grund betrifft dies nur Chrome, da IE und Firefox funktionieren.

48
Gavin

Stellen Sie sicher, dass Ihre AJAX-Anforderungen eine andere URL als die vollständigen HTML-Dokumente verwenden. Chrome speichert die letzte Anforderung, auch wenn es sich nur um eine unvollständige Anfrage handelt.

https://code.google.com/p/chromium/issues/detail?id=108425

43
abraham

Für den Fall, dass Sie jQuery mit der History-API (oder einer Bibliothek wie history.js) verwenden, sollten Sie $ .getJSON in $ .ajax ändern, wobei der Cache-Speicher auf false gesetzt ist:

$.ajax({
    dataType: "json",
    url: url,
    cache: false,
    success: function (json) {...}
});
16
Dmitrii Sorin

Eigentlich ist dies das erwartete Verhalten des Zwischenspeichersystems gemäß den Spezifikationen und kein Chromproblem. Der Cache unterscheidet nur die Anforderungen nach URL und Anforderungsmethode (get, post, ...), nicht nach den Anforderungsheadern. 

Es gibt jedoch einen Vary -Header, der Browser anweist, bei der Überprüfung des Caches einige Header zu berücksichtigen. Zum Beispiel durch Hinzufügen von Vary: X-Requested-With zur Serverantwort weiß der Browser, dass diese Antwort variiert, wenn der Befehl request X-Requested-With geändert wird. Oder durch Hinzufügen von Vary: Content-Type zur Serverantwort weiß der Browser, dass diese Antwort variiert, wenn der Request Content-Type -Header geändert wird.

Sie können diese Zeile zu Ihrem Router für PHP hinzufügen:

header('Vary:X-Requested-With');

Und verwenden Sie eine Middleware in node.js:

app.use(function(req, res) {
    res.header('Vary', 'X-Requested-With');
});
13
Ali

Sie können auch einen zufälligen Wert am Ende der Ajax-URL hinzufügen. Dadurch wird der vorherige Chrome-Cache ignoriert und eine neue Version angefordert

url = '/?'+Math.random()
5
astroanu

Fügen Sie den Response -Header den folgenden Header hinzu:

Vary: Accept
2
Anis Hamidi

Ich konnte keine unterschiedlichen URLs für jede Ajax-Anforderung angeben, da es sich um eine Ajax-Paginierung handelte, die besagte, dass kein Cache für Header nichts ausrichtete. Daher habe ich nur ein kleines Javascript in die Ansicht eingefügt, wenn die Header für die Ajax-Anforderung waren:

<script>
if (typeof jQuery == 'undefined') {
    window.location = "<?php echo $this->here; ?>";
}
</script>

Es ist ein schmutziger Trick, aber es funktioniert, wenn der Ajax-Inhalt normalerweise geladen ist, hat der Container Jquery geladen, so dass er nichts tut. Wenn Sie jedoch den vermeintlichen Ajax-Inhalt ohne den umgebenden Inhalt laden, fehlt Jquery (zumindest in meinem Fall). Daher leite ich zur aktuellen Seite um und fordere eine normale GET-Seite mit allen Kopfzeilen und Skripts an.

Wenn Sie ihn oben auf der Seite platzieren, wird der Benutzer dies nicht bemerken, da er nicht wartet, bis die Seite geladen wird. Er wird umgeleitet, sobald der Browser diese 4 Zeilen erhält ...

Hier ersetzen; Durch die aktuelle URL in Ihrer APP war dies ein CakePhp 2.X

1
Gestudio Cloud

Die Antwort von @ abraham ist richtig. Ich wollte nur eine Lösung für Rails veröffentlichen: Sie müssen lediglich einen anderen Pfad zu routes.rb hinzufügen.

Im Beispiel habe ich resource :people und ich möchte eine Indexseite aus ajax-Teilen zusammenstellen, von denen eine Liste von Personen ist. Der einfachste Weg ist, index.js.erb zu erstellen und Partial über ajax mit url: people_path zu laden. Aber hier tritt das Problem auf.

Für Rails muss also einfach eine andere Route hinzugefügt werden

get 'people_list', to: 'people#index', as: :people_list, format: :js

0
atlascoder