Я работаю над системой билета, имея следующее требование:
Домашняя страница разделена на два раздела:
Секунда 1. Некоторые варианты фильтра показываются здесь. (как закрытые билеты, открытые билеты, все-билеты, tickets-assigned-to-me и т.д.). Можно выбрать один или несколько из этих фильтров.
секунда 2. Список билетов, удовлетворяющих выше фильтров, будет отображен здесь.
Теперь это - то, что я хочу: Поскольку я изменяю фильтры
-> изменение должно быть отражено в URL, так, чтобы каждый смог отметить его.
-> запрос ajax пойдет, и список билетов, удовлетворяющих выбранные фильтры, будет обновлен в секунду 2.
Я хочу, чтобы тот же код использовался для загрузки билетов обоими способами -
(a) путем выбора того набора фильтров и
(b) при помощи закладки для перезагрузки страницы.
Я имею смутное представление относительно того, как сделать это:
URL будет содержать выбранные фильтры. (добавленный после #)
изменение фильтров на странице изменит часть хеша URL и вызовет функцию (скажите что ajaxHandler ()) проанализировать URL, чтобы получить фильтры и затем выполнить ajax запрос, чтобы заставить список билетов быть отображенным в section2.
и
Я вызову ту же функцию ajaxHandler () в window.onload.
Я чувствую, что это - то, какие карты Yahoo делает.
Что лучший способ состоит в том, чтобы реализовать такую схему URL?
Во мне идут правильное направление?
Да, вы движетесь в правильном направлении, и для того, чтобы сделать это правильно во всех браузерах и операционных системах, проделана огромная работа. Одна из самых сложных задач - это включить правильную работу кнопок браузера "Назад" и "Вперед" при использовании синтаксиса #urlfragment.
Библиотека, которая поддерживает такую вещь: http://developer.yahoo.com/yui/history/
Я нашел решение для приложения Google Wave. быть довольно элегантным. Это в основном то, что вы описываете с помощью анализируемого фрагмента URL. примерно так: http: //some.domain/some/url/#filters (filter1: key1, filter2: key2); someOtherfragment; andAnotherFragment
Это несколько простой ответ, но вам стоит обратить внимание на использование скрытого метода iframe для вашего AJAX, в отличие от XHR (XMLHttpRequest Object). Это позволит браузеру сохранить историю, так что ваши кнопки "Назад" будут продолжать работать.
Еще немного: http://ajaxpatterns.org/IFrame_Call
Использование библиотеки yui для истории - это вариант, упомянутый в комментарии sblom. Вы можете просто разместить на своей странице кнопку закладки или ссылки для этого пользователя можно щелкнуть, чтобы перейти к URL-адресу, если вы не хотите иметь дело с проблемами совместимости между браузерами.
Мы делаем это здесь http://connect.garmin.com/explore#sortField=relevance¤tPage=1 Ссылка наверху карты.
Что ж, если вы используете jQuery, есть прекрасная библиотека от Asual: Адрес jQuery для глубинных ссылок. У них есть хорошая ссылка на API и примеры. Он предоставит вам все инструменты, необходимые для реализации вашего приложения.
Бен Алман создал полнофункциональный плагин jQuery для этого BBQ . ИМО, это намного лучше, чем плагин Address.
В Chrome, Safari и Firefox вы можете использовать методы HTML5 history.pushState
и history.replaceState ()