Как динамически изменять URL без перезагрузки?

Хорошо, это то, что я пытаюсь сделать (я думаю, Google в основном делает это также):

Сценарий A:

На странице /Main_Page скажем, что есть 3 раздела. Когда пользователь нажимает на ссылку "Ссылка", содержимое section A загружается через AJAX и внедряется в страницу.

Сценарий B:

Когда загружается /Main_Page/Section_A, мы фактически переходим на ту же страницу (как в сценарии A) - /Main_Page и загружаем section A через AJAX - как и раньше.

Проблема:

У нас есть две идентичные результирующие страницы, но URL-адрес отличается (в первом случае это будет всего лишь /Main_Page, а во втором - /Main_Page/Section_A).

Что я хочу сделать:

В сценарии A после загрузки section A через AJAX, как мне сделать это, чтобы отображаемый URL (в адресной строке браузера) был /Main_Page/Section_A (или что-то еще в этом случае) без какого-либо перенаправления, перезагрузка страницы и т.д.

Ответ 1

Ваша проблема может быть решена путем реализации API истории, особенно с помощью метода pushState(), Я рекомендую читать об этом в MDN. Также существует решение "все-в-одном" под названием History.js, это поможет вам легко реализовать его x-браузер (он будет возвращаться к хешам URL #, если браузер не поддерживает его).

Вот пример:

history.pushState('', 'New Page Title', newHREF);

Не возбуждено достаточно? Здесь demo, который поможет вам реализовать его.

Ответ 2

Я только что нашел учебник, и это сработало для меня,

$('a').click(function(){
var value = $(this).attr('id');
window.location.hash = value; // it appends id to url without refresh
});


$(window).bind('hashchange' function() {
    var newhash = window.location.hash.substring(1) // it gets id of clicked element
    // use load function of jquery to do the necessary...
});

Я получил приведенный выше код из http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/