AJAX

Функционал работы с AJAX-запросами оформлен в виде jQuery модуля и называется $.ceAjax().

Модуль имеет 4 публичных метода

  • $.ceAjax('request', url, params) — выполнение AJAX-запроса;
  • $.ceAjax('submitForm', form, clicked_elm) — отправка формы с помощью AJAX;
  • $.ceAjax('inProgress') — получение статуса запроса (true — запрос выполняется, false — нет);
  • $.ceAjax('clearCache') — очистка кеша запросов.

Транспорты

Не любой запрос можно отправить с помощью объекта XMLHttpRequest, поддержка “хитрых” запросов реализована с помощью транспортов. На текущий момент:

  • xml — запрос с использованием стандартного метода jQuery — $.ajax. Через него идут GET (локальные и кроссдоменные) и POST (локальные, кроссдоменные при наличии поддержки XMLHttpRequest2);
  • iframe — запрос через отправку формы в iframe. Через этот транспорт идут GET/POST COMET-запросы, а так же отправка формы, если в ней есть input[type=file];
  • jsonpPOST — запрос через отправку формы в iframe. Нужен для кроссдоменных POST-запросов, если в браузере нет подддержки XMLHttpRequest2.

События

При успешном завершении запроса выполняется метод _response, обрабатывающий ответ. В нем обновляются DOM-объекты, загружаются внешние скрипты, выполняются inline-скрипты. После всего этого возникает событие ajaxDone, в котором запускаются обработчики элементов (процессятся формы, выбирается нужный таб и т.п.) находящихся внутри обновленных DOM-объектов.

Методы

request

  • url — URL для запроса;
  • params:
    • method — метод запроса — get/post;
    • callback — колбек (функция или название события), который вызывается после обработки ответа;
    • pre_processing — колбек, который вызывается до обработки ответа;
    • data — данные для отправки (key -> value массив);
    • message — сообщение для лоадера;
    • caching — флаг, устанавливающий кеширование ответа;
    • hidden — флаг, устанавливающий скрытие лоадера;
    • repeat_on_error — флаг; если true, то запрос, вернувший ошибку, перезапускается;
    • force_exec — флаг, указывающий запускать ли выполнение inline JavaScript, даже если он уже был выполнен до этого;
    • obj — объект, вызвавший отправку AJAX-запроса;
    • append — флаг, указыающий, что возвращаемый контент нужно добавить к существующему, а не заменить его;
    • full_render — флаг, указывающий, что нужно полностью отрисовать страницу (по-умолчанию рисуется только центральный контент);
    • result_ids — строка с ID элементов (через запятую, если несколько), в которые будут вставленны данные из ответа;
    • skip_result_ids_check — флаг, указывающий, что весь возвращаемый контент должен быть вставлен в result_ids;
    • scroll — селектор элемента, к которому нужно сделать прокрутку после выполнения запроса;
    • overlay — селектор для выборки элементов, которые надо накрыть оверлеем при AJAX-запросе

submitForm

  • form — объект отправляемой формы;
  • clicked_elm — элемент, который вызвал отправку формы.

Перезагрузка контейнеров через AJAX

Содержимое контейнеров может быть динамически перезагружено следующим образом:

  • При отправке формы с классом cm-ajax и наличии элемента result_ids в ней (см. статью о микроформатах).
  • При нажатии ссылки с классом cm-ajax и наличии атрибута data-ca-target-id (см. статью о микроформатах).
  • При выполнении кастомного запроса через $.ceAjax().

Такой контейнер должен быть специальным образом оформлен:

  • Атрибут id должен идти последним в открывающем тэге.
  • Перед закрывающим тэгом должен стоят “магический комментарий” с id блока.

Например:

<div class="foo" data-ca-bar="bar" id="foobar">
    This content will be reloaded by AJAX
<!--foobar--></div>