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

Question

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

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

Answer 1

Способ сделать это - манипулировать 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, чтобы создать и отобразить соответствующее начальное состояние, поскольку идентификаторы фрагментов (часть после #) не отправляются на сервер.

Плагин Ben Alman's hashchange от Ben Alman's делает последнее несложным, если вы используете jQuery.

Answer 2

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

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

Answer 3

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

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

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

Answer 4

Это похоже на то, что сказал Кевин.Вы можете иметь состояние вашего клиента как некоторый объект 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

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

Answer 5

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

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

Answer 6

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

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

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

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

Answer 7

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

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

Answer 8

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

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

;)