Chrome отображает ответ ajax при нажатии кнопки возврата

Я столкнулся с проблемой, что, если я использую метод jQuery Get для получения некоторого контента, если я нажму "назад", вместо того, чтобы он действительно возвращался на одну страницу в истории, вместо этого отображается содержимое, возвращаемое запросом Ajax.

Любая идея?

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

На приведенной выше странице, если вы используете разбивку на страницы под списком комментариев, которые вы заметите при нажатии на ссылку после изменения страницы, она показывает содержимое HTML, используемое для создания списка комментариев.

Я заметил, что это не всегда так, но если вы несколько раз нажмете на другую страницу и нажмите кнопку "Назад", она просто отобразит текст json внутри окна, а не на веб-сайте.

По какой-то причине это влияет только на Chrome, поскольку IE и Firefox работают нормально.

Ответ 1

Убедитесь, что ваши запросы AJAX используют другой URL из всех HTML-документов. Chrome кэширует самый последний запрос, даже если он является частичным.

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

Ответ 2

На всякий случай, когда вы используете jQuery с API истории (или в какой-либо библиотеке, например history.js), вы должны изменить $.getJSON на $.ajax с кешем, установленным в false:

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

Ответ 3

На самом деле это ожидаемое поведение системы кеширования в соответствии со спецификациями, а не проблема с хромом. Кэш только дифференцирует базу запросов на URL и метод запроса (get, post,...), а не какие-либо заголовки запросов.

Но есть заголовок Vary, чтобы сообщить браузеру о некоторых заголовках при проверке кеша. Например, добавив Vary: X-Requested-With ответ сервера, браузер знает, что этот ответ меняется, если изменяется заголовок X-Requested-With. Или, добавив Vary: Content-Type к ответу сервера, браузер знает, что этот ответ меняется, если изменяется заголовок Content-Type.

Вы можете добавить эту строку в свой маршрутизатор для PHP:

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

И используйте промежуточное ПО в node.js:

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

Ответ 4

Вы также можете добавить случайное значение в конец URL-адреса ajax. Это будет игнорировать предыдущий хром-кеш и запросит новую версию

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

Ответ 5

Я не мог указывать разные URL-адреса для каждого запроса ajax, так как это была ajax-разбивка на страницы, объявив, что кеш в заголовках ничего не сделал, поэтому я включил в JavaScript небольшой javascript только тогда, когда заголовки были для запроса ajax:

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

Это грязный трюк, но он работает, если содержимое ajax обычно загружается, в контейнер загружен Jquery, поэтому он ничего не делает. Но если вы загружаете предполагаемый контент ajax без окружающего контента, Jquery отсутствует (по крайней мере, в моем случае), поэтому я перенаправляюсь на текущую страницу, запрашивая обычную страницу GET со всеми заголовками и сценариями.

Если вы поместите его в верхнюю часть страницы, пользователь не заметит, потому что он не будет ждать загрузки страницы, он будет перенаправляться, как только браузер получит эти 4 строки...

Замените здесь;? > по текущему URL-адресу вашего APP, это был CakePhp 2.X

Ответ 6

Просто добавьте следующий заголовок в заголовки Response:

Vary: Accept

Ответ 7

Ответ на @abraham прав. Я просто хотел опубликовать решение для Rails: все, что вам нужно, это просто добавить другой путь к routes.rb.

В примере у меня есть resource :people, и я хочу составить индексную страницу из частей ajax, один из которых - список людей. Прямым способом является создание index.js.erb и частичная загрузка с помощью ajax с помощью url: people_path. Но здесь возникает проблема.

Итак, для Rails нужно просто добавить другой маршрут, например

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