Казалось бы, отправить (засабмитить) HTML форму на сервер - стандартная задача, которая не должна вызывать никаких проблем и/или вопросов. Но так, как мы не занимаемся сферическим программированием в вакууме, то время от времени появляются трудности, вопросы, проблемы.
Сегодня на повестки для такая задача:
Есть страница для бронирования мест в театре/кино и т.д. Выглядит она, примерно, так:
Можно выбрать несколько мест и нажать кнопку “Зарезервировать”. При этом данные на странице постоянно обновляются (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.
На этом все. В следующий раз я покажу на примерах, как реализовывать тот или иной способ.