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

Question

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

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

Плагин hashchange Бена Алмана делает последний быстрым, если вы используете 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

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

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

Answer 6

Метод window.location.hash является предпочтительным способом работы. Для объяснения того, как это сделать, Шаблоны Ajax - уникальные URL .

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

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

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

Answer 7

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

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

Answer 8

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

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

;)