Казалось бы, отправить (засабмитить) HTML форму на сервер - стандартная задача, которая не должна вызывать никаких проблем и/или вопросов. Но так, как мы не занимаемся сферическим программированием в вакууме, то время от времени появляются трудности, вопросы, проблемы.

Сегодня на повестки для такая задача:

Есть страница для бронирования мест в театре/кино и т.д. Выглядит она, примерно, так:

map

Можно выбрать несколько мест и нажать кнопку “Зарезервировать”. При этом данные на странице постоянно обновляются (ajax) для отображения актуальной информации о свободных местах. Еще одна проблема - процесс брони места является достаточно долгим, например, 5-10-15 секунд.

Понятно, что реализация такой задачи полностью зависит от выбранной технологи, но общих подхода тут, как мне кажется, два: делать async form submit (ajax) или обычную синхронную отправку формы на сервер. Ниже я приведу алгоритмы для каждого из случая, которые, на мой взгляд, являются оптимальными для данной задачи.

 

Синхронный сабмит формы:

+ Самый простой способ сделать это как на клиенте, так и обработать на сервере.
+ Понятный жизненный цикл страницы.
+ Легко отследить момент завершения запроса и получение ответа от сервера.
- При асинхронном обновлении страницы, необходимо это останавливать, чтобы в POST пошли только нужные данные.
- Необходимо учитывать, что при долгой обработке запроса весь UI “замирает”.
- При сабмите формы асинхронные запросы, посылаемые в этот момент, могут завершиться с ошибкой и есть шансы получить javascript error (при правильном подходе и использовании jQuery такое бывает не часто).
- Ну и напоследок, не модно как-то, не “вебдванольно” когда весь UI замирает на 10-15 секунд.

Плюсов и минусов в этом подходе одинаково (не считая последний минус), но обработка ситуаций, связанных с первыми двумя “-” может потратить много времени и нервов.  Описание алгоритма такого обработчика - не имеет смысла, т.к. все достаточно стандартно. Единственное, что стоит отметить, так это то, что долговременные операции можно выполнять в отдельном потоке (не забывая про ограничения среды выполнения и веб-сервера), а еще лучше - запускать это в каком-то application server/service, но тогда теряется вся простота реализации.

 

Асинхронный сабмит формы:

+ Весь UI остается, в общем случае, полностью работоспособен.
+ Пользователь не видит никаких тормозов страницы.
- Сложнее реализовывать, чем первый вариант.
- Баги, связанные с асинхронностью никто не отменял.

Стандартный алгоритм такого решения выглядит так (не рассматриваю ситуацию, когда пользователь уходит со страницы):

 

  • делается асинхронный(ajax) POST формы на сервер;
  • пока ждем ответа от сервера где-то на UI сообщаем пользователю что “запрос выполняется, подождите немного”;
  • в случае успешного запроса показываем пользователю сообщение с ссылкой на страницу с более детальной информацией;
  • в случае ошибки (500-я или тайм-аут) показываем сообщение и предлагаем попробовать еще раз

 

В этом подходе получается больше логики на клиентской стороне, но при этом в любой момент времени у нас остается полностью рабочий UI.

На этом все. В следующий раз я покажу на примерах, как реализовывать тот или иной способ.

 


Comments

alex Ukraine

Wednesday, November 23, 2011 10:22 AM

alex

Спасибо, ждём втрую часть.

Comments are closed