Изменить URL-адрес адресной строки в приложении AJAX в соответствии с текущим состоянием

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

Как люди справляются с поддержанием спокойствия в приложениях AJAX?

161
address-bar ajax rest url

8 ответов

способ сделать это, чтобы манипулировать location.hash когда обновления AJAX приводят к изменению состояния, которое вы хотели бы иметь скрытый URL. Например, если url вашей страницы:

http://example.com/

Если функция на стороне клиента выполнила этот код:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

затем URL-адрес, отображаемый в браузере, будет обновлен до:

http://example.com/#foo

этот позволяет пользователям пометить состояние страницы "foo" и использовать историю браузера для навигации между состояниями.

С помощью этого механизма вам нужно будет разобрать хэш-часть URL-адреса на стороне клиента с помощью JavaScript для создания и отображения соответствующего начального состояния, поскольку идентификаторы фрагментов (часть после #) не отправляются на сервер.

плагин hashchange Бена Альмана делает последний ветерок, если вы используете на jQuery.

116

посмотрите на такие сайты, как book.cakephp.org - ... Этот сайт изменяет URL без использования хэша и использует AJAX. Я не уверен, как это происходит, но я пытался понять это. Если кто знает, дайте мне знать.

также github.com при просмотре навигации в рамках определенного проекта.

18

маловероятно, что писатель хочет перезагрузить или перенаправить своего посетителя при использовании Ajax. Но почему бы не использовать в HTML5 pushState/replaceState?

вы сможете изменять адресную строку столько, сколько захотите. получить естественные URL-адреса, с AJAX.

проверьте код на моем последнем проекте: http://iesus.se/

17

Это похоже на то, что сказал Кевин. Вы можете иметь состояние клиента как некоторый объект javascript, и когда вы хотите сохранить состояние, вы сериализуете объект (используя кодировку JSON и base64). Затем вы можете установить фрагмент href в эту строку.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

первый способ будет рассматривать новое состояние как новое местоположение (поэтому кнопка "Назад" перенесет их в предыдущее местоположение). Последнее не.

12

SWFAddress работает в проектах Flash & Javascript и позволяет создавать заметные URL-адреса (используя метод хэша, упомянутый выше), а также дает вам поддержку кнопки "Назад".

http://www.asual.com/swfaddress/

3

окне.местоположение.метод хэша является предпочтительным способом делать вещи. Для объяснения того, как это сделать, Шаблоны Ajax-Уникальные URL-Адреса.

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

другие фреймворки также имеют аналогичные реализации. Важный момент если вы хотите, чтобы история работала вместе с переписыванием адреса, разные браузеры нуждаются в разных способах ее обработки. (Это подробно описано в первой статье ссылке.)

IE нуждается в взломе на основе iframe, где Firefox будет создавать двойную историю с использованием того же метода.

3

Если OP или другие все еще ищут способ изменить историю браузера, чтобы включить состояние, используя pushState и replaceState, как предложено IESUS, это "правильный" способ сделать это сейчас. Это главное преимущество перед местоположением.хэш, похоже, создает фактические URL-адреса, а не только хэши. Если история браузера с использованием хэшей сохраняется, а затем возвращается с отключенным javascript, приложение не будет работать, так как хэши не отправляются на сервер. Однако, если pushState был использован, весь маршрут будет будет отправлен на сервер, который затем можно построить, чтобы соответствующим образом реагировать на маршруты. Я видел пример, когда одни и те же шаблоны усов использовались как на сервере, так и на стороне клиента. Если бы у клиента был включен javascript, он бы получил быстрые ответы, избегая туда и обратно на сервер, но приложение будет отлично работать без javascript. Таким образом, приложение может изящно деградировать в отсутствие javascript.

кроме того, я считаю, что есть некоторые рамки там, с таким именем, как история.js. Для браузеров, поддерживающих HTML5, он использует pushState, но если браузер не поддерживает это, он автоматически возвращается к использованию хэшей.

3

проверьте, находится ли пользователь на странице, когда вы нажимаете на строку url, javascript говорит, что вы вышли из страницы. Если вы измените строку url и нажмите "ENTER" с символом " # " внутри него, то вы снова перейдете на страницу, без нажатия на страницу вручную курсором мыши, а затем командой события keyboad (документ.onkeypress) из javascript сможет проверить, введен ли он и активен javascript для перенаправления. Вы можете проверить, находится ли пользователь на странице с окном.onfocus и проверить, если он с окном.onblur.

Да, это возможно.

;)

2