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

Question

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

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

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

Это вообще возможно?

Answer 1

Это возможно с HTML5. Вы можете протестировать в качестве примера сайт GitHub или Вконтакте.

Лучший ответ здесь: Измените URL в браузере, не загружая новую страницу, используя JavaScript

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

Answer 2

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

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

Допустим, ваш URL выглядит как

http://example.com/mypage/

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

http://example/mypage/1/

Браузер вступит во владение и попытается перейти на эту страницу, там идет ваш причудливый код ajax!

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

Допустим, у вас есть такой URL,

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

Браузер сначала загрузит http://example.com/anotherpage/ и попытается найти якорь с именем 'section' и прокрутить до этого места. Это поведение используется плагином «Адреса». Это похоже на работу этих ссылок «Прокрутка вверх».

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

http://example.com/mypage/

и измените URL на

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Пример:

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