четвер, 4 січня 2018 р.

Принципы обработки действий клиента

Каждое действие пользователя на сайте, будь-то нажатие не кнопку или переход по ссылке сейчас старается выполняться с помощью JavaScript на стороне браузера. Так как не всегда браузер может выполнить JavaScript, или например он еще не полностью загружен, то есть резон обеспечивать дублирование данного действия на сервере, например путем использования HTTP заголовка Content-Type.

Для стандартных запросов клиента будет использоваться Content-Type: text/html, который будет всегда возвращать HTML клиенту, для инициированных со стороны JavaScript запросов можно использовать Content-Type: application/json для получения JSON данных.

Примером может быть следующая страница: например у нас есть форма где мы используем автодополнение для заполнения города и есть кнопка которая запрашивает получение статистики по населению города.

Это реализовано примерно следующим образом - HTML форма где есть текстовое поле где вводится город и кнопка (input type="submit"). После загрузки страницы подгружается JS файл который подключает автодополнение для поля города. Нажатие на кнопку отправляет AJAX запрос, который дополнительно проверяет название города, и наличию статистики и в случае успеха возвращает статистику населения по городу, или в случае ошибки введенных данных возвращает сообщение об ошибке.

Все это отлично работает пока у клиента хороший интернет, или он часто посещает сайт и JS файл у него оказывается в кеше браузера. В случае если пользователь первый раз посещает форму, то в зависимости от скорости его интернета, вполне вероятно что он может успеть заполнить форму и нажать кнопку отправки до того как автодополнение будет полностью сконфигурировано, в результате выполнится обычное действие браузера по обработке HTML формы. В зависимости от того как настроена HTML форма это может выглядеть для клиента как
а) бездейстией (атрибут action не установлен)
б) отображение JSON ответа (форма настроена на отправку AJAX запроса)
в) обновление страницы (форма просто делает запрос на саму себя, и сервер это никаким специальным образом не обрабатывает)
я привел наиболее типичные ошибки, но разумеется могут быть и другие комбинации, как переход вообще на другую страницу из-за плохого копипаста.

Кроме плохого интернета, подобное действие можно выполнить при выключенном JavaScript в браузере, или если в коде произошла ошибка, и часть вашей программы не инициализировалась корректным образом.
Так или иначе, ни одно подобное поведение не сильно приятно пользователю сайта, и плохо влияет на его лояльность к продукту. Потому есть резон настраивать обработку форм таким образом, чтобы клиент получал максимально логичный результат, и если уже нажата кнопка запроса на форму, то сервер должен уметь обрабатывать такие запросы корректно.

По сути у нас получается 2 вида запросов - машино-читаемый и человеко-читаемый. В нормальном режиме работы приложение использует машино-читаемый формат запросов, например используя JSON, а в случае возникновения проблем, возвращаясь к человеку-читаемому формату HTML. Для поддержки этих двух сценарием можно использовать или два разных приложения, каждое из которых умеет работать со своим форматом, или попробовать использовать такую возможность формата HTTP  как указание формата содержимого - заголовок Content-Type. Тогда один и тот же адрес ресурса может обрабатывать оба формата.

Например отправка Content-Type: text/html приведет к управлению навигацией клиента полностью на стороне сервера, и будет использовать HTTP Status Code 302 совместно с Location: /redirect-url для перенаправления клиента на нужную ему страницу, которая и отобразит нужные ему HTML. В случае передачи Content-Type: application/json сервер возвращает JSON ответ и управление навигацией происходит с помощью JS на стороне клиента.

Немає коментарів: