Я пишу приложение AJAX, но по мере того, как пользователь перемещается через приложение, мне бы хотелось, чтобы URL-адрес в адресной строке обновлялся, несмотря на отсутствие перезагрузки страниц. В принципе, я бы хотел, чтобы они могли добавлять закладки в любой момент и тем самым возвращаться к текущему состоянию.
Как люди занимаются поддержкой RESTfulness в приложениях AJAX?
Способ сделать это - манипулировать location.hash, когда обновления AJAX приводят к изменению состояния, которое вы хотели бы иметь сдержанный URL. Например, если ваш URL-адрес страницы:
Если функция на стороне клиента выполнила этот код:
// AJAX code to display the "foo" state goes here.
location.hash = 'foo';
Затем URL, отображаемый в браузере, будет обновлен до:
Это позволяет пользователям закладок "foo" состояния страницы и использовать историю браузера для перемещения между состояниями.
Используя этот механизм, вам нужно будет проанализировать хэш-часть URL-адреса на стороне клиента с помощью JavaScript для создания и отображения соответствующего начального состояния, поскольку идентификаторы фрагментов (часть после #) не являются отправляется на сервер.
Ben Alman hashchange plugin делает последнее легким, если вы используете jQuery.
Посмотрите на сайты, такие как book.cakephp.org. Этот сайт изменяет URL-адрес без использования хэша и использует AJAX. Я не уверен, как это происходит, но я пытался понять это. Если кто знает, дайте мне знать.
Также github.com при просмотре навигации по определенному проекту.
Вряд ли автор захочет перезагрузить или перенаправить своего посетителя при использовании Ajax.
Но почему бы не использовать HTML5 pushState/replaceState?
Вы сможете изменить адресную строку столько, сколько хотите. Получить естественные URL-адреса с помощью AJAX.
Ознакомьтесь с кодом моего последнего проекта: http://iesus.se/
Это похоже на то, что сказал Кевин. Вы можете иметь состояние своего клиента как некоторый объект 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-адреса для закладок (с использованием метода хеширования, упомянутого выше), а также поддерживать обратную связь.
Метод window.location.hash является предпочтительным способом выполнения действий. Для объяснения того, как это сделать, Шаблоны Ajax - уникальные URL.
YUI имеет реализацию этого шаблона в качестве модуля, который включает в себя работу с IE, предназначенную для того, чтобы вернуть кнопку "Назад" вместе с повторной записью адреса с помощью хэша. Менеджер истории браузера YUI.
Другие структуры имеют аналогичные реализации. Важным моментом является то, что если вы хотите, чтобы история работала вместе с повторной записью адреса, разные браузеры нуждаются в разных способах обработки. (Это подробно описано в первой статье ссылки.)
IE нуждается в взломе на основе iframe, где Firefox будет генерировать двойную историю, используя тот же метод.
Если OP или другие пользователи все еще ищут способ изменить историю браузера, чтобы включить состояние, использование pushState и replaceState, как было предложено IESUS, - это "правильный" способ сделать это сейчас. Это главное преимущество над location.hash, похоже, что он создает реальные URL-адреса, а не только хеши. Если история браузера, использующая хеши, сохраняется, а затем пересматривается с отключенным javascript, приложение не будет работать, поскольку хеши не отправляются на сервер. Однако, если используется pushState, весь маршрут будет отправлен на сервер, который затем можно построить для правильного ответа на маршруты. Я видел пример, где те же самые шаблоны усов использовались как на сервере, так и на стороне клиента. Если у клиента был включен javascript, он получал бы быстрые ответы, избегая обратного перехода к серверу, но приложение будет отлично работать без javascript. Таким образом, приложение может изящно деградировать в отсутствие javascript.
Кроме того, я считаю, что существует некоторая структура, с именем, таким как history.js. Для браузеров, поддерживающих HTML5, он использует pushState, но если браузер не поддерживает это, он автоматически возвращается к использованию хэшей.
Проверьте, находится ли пользователь на странице, когда вы нажимаете на строку url, javascript говорит, что вы находитесь вне страницы. Если вы измените строку url и нажмите 'ENTER' с символом "#" внутри нее, вы снова войдете в страницу, не нажимая на страницу вручную с помощью курсора мыши, тогда команда события keyboad (document.onkeypress) из javascript будет быть в состоянии проверить, вводит ли он и активировать javascript для перенаправления. Вы можете проверить, находится ли пользователь на странице с помощью window.onfocus и проверить, не вышел ли он с помощью window.onblur.
Да, возможно.
;)