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

Question

Ich habe ein Problem festgestellt, dass, wenn ich jQuery Get-Methode verwenden, um einige Inhalte zu erhalten, wenn ich zurückklicke, anstatt tatsächlich eine Seite im Verlauf zurückgeht, wird es stattdessen angezeigt der von der Ajax-Abfrage zurückgegebene Inhalt.

Irgendwelche Ideen?

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

auf der oben genannten Seite, wenn Sie die Paginierung unter der Liste der Kommentare verwenden Sie bemerken, wenn nach dem Wechseln der Seite klicken zurück, dass es zeigt den HTML-Inhalt verwendet, um die Liste der Kommentare zu generieren.

Ich habe bemerkt, es tut es nicht immer, aber wenn Sie auf eine andere Seite ein paar Mal klicken und klicken Sie auf die Schaltfläche Zurück, es zeigt einfach JSON Text innerhalb des Fensters anstelle der Website.

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

Answer 1

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

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

Answer 2

ich nicht verschiedene URLs für jeden Ajax-Request geben könnte, wie es eine Ajax-Paginierung, keinen Cache auf Header tat nichts erklärt war, so dass ich nur enthalten einen wenig Javascript in der Ansicht, wenn Header für die waren ajax-Anfrage:

<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 wird, hat der Behälter Jquery geladen, so dass es nichts tut. Aber wenn Sie den Ajax-Inhalt ohne den umgebenden Inhalt laden, fehlt Jquery (zumindest in meinem Fall), so dass ich auf die aktuelle Seite umschreibe und eine normale GET-Seite mit allen Überschriften und Skripten anfordere.

Wenn Sie es in der Spitze der Seite setzen, bemerkt der Benutzer nicht, weil es nicht bis in die Seite geladen wird warten, wird es so schnell umleiten, wie der Browser diese 4 Zeilen bekommt ...

Hier ersetzen; ?> durch die aktuelle URL in Ihrer APP, das war ein CakePhp 2.X

Answer 3

Nur für den Fall, dass Sie jQuery mit History API (oder eine Bibliothek wie history.js) verwenden, sollten Sie $ .getJSON zu $ ​​ändern. ajax mit Cache auf false gesetzt:

Answer 4

Sie können auch einen zufälligen Wert am Ende der AJAX-URL hinzufügen. Dadurch wird die vorherige Chrom Cache ignorieren und eine neue Version

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

Answer 5

Eigentlich ist dies das erwartete Verhalten von Caching-System nach Spezifikationen und keinem Chrom Problem fordern. Der Cache unterscheidet nur Anfragen basierend auf URL und Request-Methode (get, post, ...), keiner der Request-Header.

Aber es gibt eine Vary Header zu Browser sagen, einige Header beim Überprüfen des Cache zu berücksichtigen. Zum Beispiel durch Hinzufügen Vary: X-Requested-With der Server-Antwort der Browser weiß, dass diese Antwort variieren, wenn Anfrage X-Requested-With Header geändert wird.Oder durch Hinzufügen Variant: Content-Type der Server-Antwort der Browser weiß, dass diese Antwort variieren, wenn Anfrage Content-Type Header geändert wird.

Sie können diese Linie an Ihren Router für PHP hinzufügen:

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

und eine Middleware in node.js verwenden:

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

Answer 6

Die Antwort des @ abraham richtig ist. Ich wollte nur eine Lösung für Rails posten: alles, was Sie brauchen, ist nur einen anderen Pfad zu routes.rb hinzuzufügen.

In Beispiel habe ich resource :people und ich möchte Indexseite von Ajax Teile einer dieser Liste von Personen zu komponieren. Der einfache Weg besteht darin, index.js.erb zu erstellen und partiell über Ajax mit url: people_path zu laden. Aber hier tritt das Problem auf.

Also, für Rails, braucht es nur eine andere Route hinzufügen, wie

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

Answer 7

einfach auf den folgenden Header an den Header Antwort hinzufügen:

Vary: Accept