2010-04-09 5 views
11

Я работаю над системой билета, имеющей следующее требование:
Домашняя страница разделена на две части:
Sec-1. Здесь показаны некоторые параметры фильтра (например, закрытые билеты, открытые билеты, все билеты, билеты, назначенные мне и т. Д.). Вы можете выбрать один или несколько из этих фильтров.
sec-2. Список билетов, удовлетворяющих вышеуказанным фильтрам, будет отображаться здесь.Gmail как схема URL

Теперь это то, что я хочу: по мере того как я меняю фильтры
-> изменение должно быть отражено в URL-адресе, чтобы можно было его добавить.
-> будет отправлен запрос ajax, и список билетов, удовлетворяющий выбранным фильтрам, будет обновлен в секундах.

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

У меня есть смутное представление о том, как это сделать:
URL-адрес будет содержать выбранные фильтры (добавляется после #)
замены фильтров на странице будет изменять хэш часть URL и вызвать функцию (скажем. ajaxHandler()), чтобы проанализировать URL-адрес, чтобы получить фильтры, а затем сделать запрос ajax, чтобы получить список билетов, которые будут отображаться в разделе2.
и
Я буду называть ту же функцию ajaxHandler() в window.onload.

Я чувствую, что это Yahoo maps.

Каков наилучший способ реализации такой схемы URL?
Я направляюсь в правильном направлении?

+0

Gmail является одним из таких сервисов, использующих это. Любой другой пример? – Varun

ответ

7

Да, вы направились в правильном направлении, и есть тонна работы, которая правильно сделала это во всех браузерах и ОС. Одна из самых сложных частей, чтобы получить право, позволяет кнопкам назад и вперед браузера работать правильно, когда вы используете синтаксис #urlfragment.

библиотека, которая обеспечивает поддержку для такой вещи: http://developer.yahoo.com/yui/history/

+0

Я использую http://www.asual.com/jquery/address/ и его работу как шарм :) – Varun

0

Использование библиотеки yui для истории - это вариант, упомянутый в комментарии sblom. Возможно, вы захотите рассмотреть возможность предоставления кнопки закладки или ссылки на вашей странице, которую пользователь может щелкнуть, чтобы перейти на urk, если вы не хотите иметь дело с проблемами совместимости с браузером.

Мы делаем это здесь http://connect.garmin.com/explore#sortField=relevance&currentPage=1 Theres ссылка в верхней части карты.

1

Это простой ответ, но вы хотите использовать скрытый метод iframe для вашего AJAX, в отличие от XHR (объект XMLHttpRequest). Это позволит браузеру поддерживать историю, поэтому ваши кнопки назад будут продолжать работать.

Некоторые больше: http://ajaxpatterns.org/IFrame_Call

2

Ну, если вы используете JQuery есть эта прекрасная библиотека по Asual: jQuery Address для глубокой ссылки. Они имеют хорошую ссылку API и примеры. Он предоставит вам все инструменты, необходимые для реализации вашего приложения.

+0

Я использую этот сейчас. Благодарю. – Varun

0

В Chrome, Safari и Firefox вы можете использовать HTML5 history.pushState и history.replaceState() методы

Некоторая документация here и here.

1

Ben Alman построил полнофункциональный плагин jQuery для этого: BBQ. IMO, это намного лучше, чем плагин Address.