Обновить URL-адрес при вызове AJAX?

В настоящее время самой большой проблемой, с которой я столкнулся с AJAX, является тот факт, что если я использую AJAX на странице, перейдите на другую страницу, а затем используйте кнопку "Назад" браузера, чтобы вернуть все, что было изменено, когда AJAX исчез.

Я подумал об использовании jQuery Addresss для решения этой проблемы, но мне не нравится, как он только изменяет URL-адрес с помощью "# whatever.html" вместо того, чтобы полностью его изменять.

В идеале, я бы хотел, чтобы URL-адрес перешел от: "www.example.com/p:2/" к "www.example.com/p:3/", когда я делаю соответствующий вызов AJAX.

Возможно ли это?

Ответ 1

Нет, это невозможно. Обновление: теперь это возможно через API истории HTML5 - см. ответ razbakov.

Надеюсь, вы поймете, что пытаетесь решить чрезвычайно трудную проблему.

Скажем, ваш url выглядит как

http://example.com/mypage/

Если вы измените расположение окна программно на

http://example/mypage/1/

Браузер возьмет верх и попытается перейти на эту страницу, там будет ваш фантастический аякс-код!

Так какая альтернатива? Вы используете фрагмент URL.

Скажем, у вас есть такой URL,

http://example.com/anotherpage/#section

Браузер сначала загрузит http://example.com/anotherpage/ и попытается найти якорь с именем "раздел" и прокрутите его до этого места. Это поведение используется плагином "Адреса". Это похоже на то, как работают ссылки "Scroll To Top".

Итак, если вы находитесь на странице

http://example.com/mypage/

и измените URL-адрес на

http://example.com/mypage/#1

Браузер не загрузит новую страницу, а попытается найти якорь с именем "1" и прокрутите до этого якоря.

Даже если вам удалось добавить фрагменты к URL-адресу, это не означает, что работа выполнена. Если пользователь нажимает кнопку "Назад", DOM будет reset, и вам придется разбирать эти фрагменты и воссоздавать DOM. Это определенно нетривиально.

Ответ 2

Это возможно с помощью HTML5. Вы можете протестировать, например, сайт GitHub или Vkontakte.

Лучший ответ здесь: Изменить URL-адрес в браузере без загрузки новой страницы с помощью JavaScript

В нем говорится, что вы можете использовать функцию history.pushState для этих целей. Но это решение будет работать только в совместимых с HTML5 браузерах. В противном случае вам нужно использовать хэш-метод.

Ответ 3

Эта проблема может быть решена с помощью history.js. https://github.com/browserstate/history.js

Ответ 4

pjax обрабатывает это изящно в современном браузере.

Ответ 5

После выполнения вызова AJAX мы можем обновить URL-адрес клиента, используя history.pushState. Ниже приведен синтаксис и пример ниже.

Синтаксис: history.pushState(obj, obj.Title, obj.Url);

Пример:

var url = "http://example.com/mypage/" + "newParameter=newValue"
history.pushState(undefined, '', url);