Я пишу 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 для создания и отображения соответствующего начального состояния, так как идентификаторы фрагмента (часть после #) не отправляются в сервер.
Плагин hashchange Бена Алмана делает последний легким, если вы используете 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 Patterns - Уникальные 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.
Да, это возможно.
;)
window.history.pushState(null,'hi','page1?id=32')