Как FB обновляет страницу, не перезагружая ее (xmlHttpRequest), но кнопка «Назад» по-прежнему работает?

Question

Как FB обновляет страницу, не перезагружая ее (xmlHttpRequest), но кнопки «Назад» и «Вперед» все еще работают как обычно?

Речь идет не об использовании history.pushState() методов.PushState() только изменяет строку URL, но ничего не делает для получения предыдущей страницы после нажатия кнопки «Назад».Так что это что-то другое.

Вот мой код и пример.

У меня есть такой сайт (посмотрите на картинку ниже).Заголовок-div и Content-div.В начале, когда вы впервые открываете его, URL-адрес mysite.com/page1.php. Я хочу изменить содержимое в Content-div без перезагрузки страницы.Просто новая информация должна появиться в Content-div.И URL должен измениться на mysite.com/page2.php.

Вот HTML-код.

<div id="content"></div>

<a href="" id="relaodLink">Reload Content</a>

Вот код JS к нему.

document.getElementById("relaodLink").onclick = function() {
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open("GET", "page2.php", true);
    xmlHttp.send();

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("content").innerHTML = xmlHttp.responseText;
        }
    }
    return false;
}

Так что заголовок не долженперезагрузите после нажатия relaodLink, только содержание в Content-div изменится.И самое главное: URL-адрес должен измениться, как будто страница действительно была перезагружена.Кнопка «Назад» позволяет перейти к mysite.com/page1.php, а затем кнопка «Вперед» позволяет снова вернуться к mysite.com/page2.php.С history.pushState() методами это не работает.Но в FB кнопки Назад и Вперед работают нормально.Как это сделать?

занятой кот http://www.ljplus.ru/img4/a/_/a_ya_vishe/primer-xmlhttp_3.jpg

Answer 1

Это отличный вопрос. Если вы заметили, вы можете заметить, что кнопки «Назад» и «Вперед» будут работать в Gmail, хотя он полностью построен на Ajax.

Кнопки браузера назад и вперед работают над сохранением того, что есть в адресной строке. Так что в Ajax, если вы никогда не измените то, что есть в адресной строке, это не войдет в историю и, следовательно, кнопки назад и вперед не работают.

Чтобы это работало, вам нужно постоянно что-то добавлять в адресную строку.
Например: В Gmail ,
При нажатии папки «Входящие» - https://mail.google.com/mail/?tab=mm#inbox
При нажатии Starred - https://mail.google.com/mail/?tab=mm#starred
При щелчке «Отправлено» - https://mail.google.com/mail/?tab=mm#sent

Таким образом, gmail продолжает добавлять в адресную строку. Следовательно, история сохраняется. То же самое относится и к facebook . Хотя страница не обновляется, местоположение в адресной строке изменилось - это ключ здесь !!

Надеюсь, это вам поможет!