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

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

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

Ответов (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.

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

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

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

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

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

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

Метод window.location.hash - предпочтительный способ работы. Для объяснения того, как это сделать, Ajax Patterns - Unique URLs .

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

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

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

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

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

;)

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

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

Посмотрите код моего последнего проекта: http://iesus.se/

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

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