Я работаю над системой билета, имеющей следующее требование:
Домашняя страница разделена на две части:
Sec-1. Здесь показаны некоторые параметры фильтра (например, закрытые билеты, открытые билеты, все билеты, билеты, назначенные мне и т.д.). Вы можете выбрать один или несколько из этих фильтров.
втор-2. Список билетов, удовлетворяющих вышеуказанным фильтрам, будет отображаться здесь.
Теперь это то, что я хочу: когда я меняю фильтры
- > изменение должно быть отражено в URL-адресе, чтобы можно было его закладок.
- > будет отправлен запрос ajax, а список билетов, удовлетворяющий выбранным фильтрам, будет обновлен в секундах.
Я хочу, чтобы тот же код использовался для загрузки билетов в обоих направлениях.
(a), выбрав этот набор фильтров и
(b), используя закладку для перезагрузки страницы.
У меня мало идеи о том, как это сделать:
URL будет содержать выбранные фильтры. (Добавляется после #)
изменение фильтров на странице изменит хэш-часть URL-адреса и вызовет функцию (скажем, ajaxHandler()), чтобы проанализировать URL-адрес, чтобы получить фильтры, а затем сделать запрос ajax, чтобы получить список билетов, которые будут отображаться в разделе2.
и
Я вызову ту же функцию 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
Хорошо, если вы используете jQuery, это прекрасная библиотека от Asual: jQuery Address для глубокой привязки. Они имеют хорошую ссылку API и примеры. Он предоставит вам все инструменты, необходимые для реализации вашего приложения.
Это простой ответ, но вы хотите использовать скрытый метод iframe для вашего AJAX, в отличие от XHR (объект XMLHttpRequest). Это позволит браузеру поддерживать историю, поэтому ваши кнопки назад будут продолжать работать.
Еще несколько: http://ajaxpatterns.org/IFrame_Call
Бен Альман построил полнофункциональный плагин jQuery для этого BBQ. IMO, это намного лучше, чем плагин Address.
Использование библиотеки yui для истории - это опция, указанная в комментарии sblom. Возможно, вам захочется рассмотреть возможность предоставления кнопки закладки или ссылки на вашей странице, которую пользователь может щелкнуть, чтобы перейти к urk, если вы не хотите иметь дело с проблемами совместимости с кросс-браузером.
Мы делаем это здесь http://connect.garmin.com/explore#sortField=relevance¤tPage=1 Theres - ссылка в верхней части карты.
В Chrome, Safari и Firefox вы можете использовать методы HTML5 history.pushState и history.replaceState()