Chrome muestra una respuesta ajax al presionar el botón Atrás
google-chrome back-button (7)
Asegúrese de que sus solicitudes AJAX utilicen una URL diferente de los documentos HTML completos. Chrome almacena en caché la solicitud más reciente, incluso si es solo parcial.
Me he encontrado con un problema que si uso el método Get de jQuery para obtener algo de contenido, si hago clic atrás, en lugar de retroceder una página en el historial, en su lugar muestra el contenido devuelto por la consulta Ajax.
¿Algunas ideas?
http://www.dameallans.co.uk/preview/allanian-society/news/56/Allanian-test
En la página anterior, si usa la paginación debajo de la lista de comentarios, al hacer clic nuevamente después de cambiar una página, verá que muestra el contenido HTML utilizado para generar la lista de comentarios.
Me he dado cuenta de que no siempre lo hace, pero si hace clic en una página diferente varias veces y hace clic en el botón Atrás, simplemente muestra el texto json dentro de la ventana en lugar del sitio web.
Por alguna razón, esto solo afecta a Chrome, ya que IE y Firefox funcionan bien.
En caso de que esté utilizando jQuery con History API (o alguna biblioteca como history.js), debe cambiar $ .getJSON por $ .ajax con el caché establecido en falso:
$.ajax({
dataType: "json",
url: url,
cache: false,
success: function (json) {...}
});
En realidad, este es el comportamiento esperado del sistema de caché de acuerdo con las especificaciones y no es un problema de Chrome. La memoria caché solo diferencia las solicitudes de base en URL y el método de solicitud (get, post, ...), no en ninguno de los encabezados de solicitud.
Pero hay un encabezado Vary para indicar al navegador que considere algunos encabezados al verificar el caché. Por ejemplo, al agregar Vary: X-Requested-With a la respuesta del servidor, el navegador sabe que esta respuesta varía si se cambia la solicitud X-Requested-With . O al agregar Vary: Content-Type a la respuesta del servidor, el navegador sabe que esta respuesta varía si se cambia el encabezado Content-Type de la solicitud.
Puede agregar esta línea a su enrutador para PHP:
header(''Vary:X-Requested-With'');
Y use un middleware en node.js:
app.use(function(req, res) {
res.header(''Vary'', ''X-Requested-With'');
});
La respuesta de @ abraham es correcta. Solo quería publicar una solución para Rails: todo lo que necesita es simplemente agregar una ruta diferente a routes.rb .
Por ejemplo, tengo resource :people y quiero componer páginas de índice de partes de Ajax. Una de ellas es la lista de personas. La manera directa es crear index.js.erb y cargar partial a través de ajax usando url: people_path . Pero aquí ocurre el problema.
Entonces, para Rails, solo necesita agregar una ruta diferente, como
get ''people_list'', to: ''people#index'', as: :people_list, format: :js
No pude dar URL diferentes para cada solicitud de Ajax, ya que era una paginación de Ajax, declarando que no había caché en los encabezados, no hice nada, así que incluí un pequeño javascript en la vista solo cuando los encabezados eran para la solicitud de ajax:
<script>
if (typeof jQuery == ''undefined'') {
window.location = "<?php echo $this->here; ?>";
}
</script>
Es un truco sucio, pero funciona, si el contenido de ajax se carga normalmente, el contenedor tiene Jquery cargado, por lo que no hace nada. Pero si carga el supuesto contenido de Ajax sin el contenido que lo rodea, Jquery falta (al menos en mi caso), así que me redirige a la página actual solicitando una página GET normal con todos los encabezados y scripts.
Si lo coloca en la parte superior de la página, el usuario no se dará cuenta porque no esperará hasta que la página se cargue, se redireccionará tan pronto como el navegador obtenga estas 4 líneas ...
Reemplazar aquí; ?> por la URL actual en su APLICACIÓN, esto era un CakePhp 2.X
Simplemente agregue el siguiente encabezado a los encabezados de respuesta :
Vary: Accept
También puede agregar un valor aleatorio al final de la url ajax. Esto ignorará la memoria caché de Chrome anterior y solicitará una nueva versión
url = ''/?''+Math.random()