Chrome visualizza una risposta ajax quando si preme il pulsante Indietro

Question

Ho riscontrato un problema che se utilizzo il metodo Get di jQuery per ottenere del contenuto, se faccio clic su Indietro, anziché tornare indietro di una pagina nella cronologia, mostra invece il contenuto restituito dalla query Ajax.

Qualche idea?

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

Nella pagina di cui sopra, se si utilizza l'impaginazione di seguito l'elenco dei commenti che si nota quando si clicca di nuovo dopo aver cambiato una pagina, che mostra il contenuto HTML utilizzato per generare l'elenco dei commenti.

Ho notato che non sempre lo fa, ma se si fa clic su una pagina diversa un paio di volte e si fa clic sul pulsante Indietro, viene semplicemente visualizzato il testo di JSON all'interno della finestra invece del sito Web.

Per qualche motivo, questo ha effetto solo su Chrome poiché IE e Firefox funzionano correttamente.

Answer 1

Assicurati che le tue richieste AJAX utilizzino un URL diverso dai documenti HTML completi. Chrome memorizza nella cache la richiesta più recente anche se è solo parziale.

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

Answer 2

non ho potuto dare URL diversi per ogni richiesta AJAX come è stato un impaginazione ajax, dichiarando nessuna cache sulle intestazioni non ha fatto nulla, così ho inserito un po 'di javascript nella vista solo quando le intestazioni sono stati per la ajax richiesta:

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

E 'uno sporco trucco, ma funziona, se il contenuto ajax è normalmente caricata, il contenitore ha caricato Jquery così non si fa nulla. Ma se si carica il contenuto presunto di ajax senza il contenuto circostante, manca Jquery (almeno nel mio caso), quindi reindirizzamento alla pagina corrente richiedendo una normale pagina GET con tutte le intestazioni e gli script.

Se lo metti nella parte superiore della pagina, l'utente non si accorgerà perché non aspettare che il caricamento della pagina, che reindirizzerà non appena il browser ottiene questo 4 linee ...

Sostituisci qui; ?> dall'URL corrente nella tua APP, questo era un CakePhp 2.X

Answer 3

Nel caso in cui si utilizzi jQuery con History API (o qualche libreria come history.js), si dovrebbe cambiare $ .getJSON in $. ajax con cache impostata su false:

Answer 4

È anche possibile aggiungere un valore casuale alla fine dell'URL ajax. Questo ignorerà la cache Chrome precedente e richiederà una nuova versione

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

Answer 5

In realtà questo è il comportamento previsto del sistema di caching in base alle specifiche e non un problema di cromo. La cache differenzia solo le richieste di base sull'URL e il metodo di richiesta (get, post, ...), non le intestazioni delle richieste.

Ma c'è un'intestazione Vary per indicare al browser di prendere in considerazione alcune intestazioni durante il controllo della cache. Ad esempio aggiungendo Vary: X-Requested-With alla risposta del server, il browser sa che questa risposta varia se viene richiesta l'intestazione X-Requested-With X-Requested With.O aggiungendo Vary: Content-Type alla risposta del server, il browser sa che questa risposta varia se viene richiesta l'intestazione Content-Type.

è possibile aggiungere questa linea al router per PHP:

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

e utilizzare un middleware in node.js: risposta

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

Answer 6

L'@ di Abramo è giusto. Volevo solo pubblicare una soluzione per Rails: tutto ciò che serve è aggiungere semplicemente un percorso a routes.rb.

Nell'esempio, ho resource :people e voglio comporre la pagina indice da parte di ajax una di queste è l'elenco delle persone. Il modo semplice è quello di creare index.js.erb e caricare parziale tramite ajax utilizzando url: people_path. Ma qui si verifica il problema.

Così, per Rails, ha solo bisogno aggiungere un percorso diverso, come

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

Answer 7

Basta aggiungere la seguente intestazione al risposta intestazioni:

Vary: Accept