Skip to content

Latest commit

 

History

History
25 lines (15 loc) · 4.42 KB

ajax.md

File metadata and controls

25 lines (15 loc) · 4.42 KB

Работа с аякс-запросами

Аякс - это хорошая, полезная технология, которая может сделать работу с сайтом более удобной. Но ее надо реализовать правильно.

Когда ты делаешь какую-то фичу через аякс вместо традиционной отправки формы, ты лишаешь пользователя удобств, которые дает браузер, а именно:

  • индикатор прогресса операции
  • вывод сообщений об ошибках
  • возможность повторить операцию (повторная отправка формы за счет обновления страницы)

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

  • индикация прогресса. Пользователь должен (не только при аякс запросе, а при выполнении любого жеста (так в юзабилити называют нажатия на клавиши, прикосновения к экрану, действия мыши)) иметь обратную связь и видеть состояние системы: идет обработка данных, команда успешно выполнена, произошла ошибка. Ты можешь не показывать индикатор прогресса только в случаях когда обработка запроса происходит очень быстро (менее 100 мс) - тогда можно сразу показать сообщение с результатом операции.

    Сайты с анимированными gif-индикаторами: http://www.ajaxload.info/ http://preloaders.net/

    Однако, не увлекайся! Индикатор прогресса не должен быть слишком большим или отвлекающим. Это вспомогательный, а не основной, элемент. Он должен быть интуитивно понятным и, как правило, его располагают рядом с элементом, запускающим запрос (например, кнопкой), так как в момент нажатия внимание пользователя сконцентрировано на ней.

  • обработка ошибок. Ошибки могут быть транспортного уровня (пропал интернет, сервер отдал HTTP-код не из диапазона 200-299, пришел ответ не ожидаемого типа или формата), так и уровня приложения (запрос успешно отправлен и получен ответ с сервера, код ответа равен 200, но по каким-то причинам операция не выполнена, например, указаны неправильные данные или что-то еще не так).

  • возможность повторить запрос при ошибке, если это возможно и имеет смысл

  • блокировка формы на время отправки данных для защиты от повторной отправки, например, некоторые люди дважды кликают по кнопкам, по аналогии с иконками на рабочем столе ОС

  • функцию отмены запроса, которая есть в браузере, делать не надо - я нигде не видел чтобы ее делали, да и обычно аякс-запрос занимает меньше секунды и пользователь просто не успеет ей воспользоваться.

Про важность обратной связи знают профессиональные разработчики интерфейсов, например: http://bureau.ru/bb/soviet/20160823/