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

голоса
160

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

Как люди обработки поддерживать в AJAX, стабильность, спокойствие приложений?

Задан 04/08/2008 в 18:53
источник пользователем
На других языках...                            


8 ответов

голоса
116

Способ сделать это , чтобы манипулировать , 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 плагин Бен Alman в делает последний ветер , если вы используете JQuery.

Ответил 04/08/2008 в 19:04
источник пользователем

голоса
18

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

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

Ответил 13/02/2011 в 20:47
источник пользователем

голоса
17

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

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

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

Ответил 27/04/2011 в 09:09
источник пользователем

голоса
12

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

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

Ответил 04/08/2008 в 19:02
источник пользователем

голоса
3

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

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

Ответил 23/06/2011 в 10:20
источник пользователем

голоса
3

Window.location.hash метод является предпочтительным способом делать вещи. Для объяснения того , как сделать это, Ajax Patterns - Уникальные URL - адреса .

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

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

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

Ответил 31/03/2009 в 06:54
источник пользователем

голоса
3

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

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

Ответил 01/09/2008 в 14:43
источник пользователем

голоса
2

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

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

;)

Ответил 14/10/2010 в 00:18
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more