Введение

При использовании AJAX часто нужно получать от сервера данные не в готовом для отображения виде (HTML), а в удобном для обработки на JavaScript. Если в некоторых случаях — например, при динамическом обновлении выпадающих списков в формах — можно обойтись одним HTML блоком, то для обновления страницы в нескольких местах такой вариант не подходит (например, если нужно параллельно вывести сообщение «ваши действия отслеживаются»). В таких ситуациях на помощь приходит JSON.

Серверная часть

При выполнении AJAX запросов, серверу передаётся специальный заголовок X-Requested-With, по которому можно догадаться, что запрос идёт не в обычном для браузера режиме, а в режиме асинхронного яваскрипта. Для прозрачной обработки таких массивов существует функция bebop_on_json, принимающая один параметр: массив, который нужно вернуть в JSON виде, если запрос произведён в режиме AJAX. Таким образом, код для прозрачной работы с AJAX клиентами будет выглядеть примерно так:

  // В этот массив складываются данные в процессе работы:
  $result = array();

  // Работа...
  $result["message"] = "ваши действия отслеживаются";

  // Возвращаем данные яваскрипту, если нужно.  Если запрос пришёл
  // в обычном режиме, функция ничего не сделает.
  bebop_on_json($result);

  // Обрабатываем результат в обычном режиме: рендерим HTML,
  // перенаправляем на другую страницу, или что там в планах.

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

Клиентская часть

Работа с AJAX в режиме JSON на стороне клиента выглядит так:

  // Обрабатываем попытку отправить форму с идентификатором xyz.
  $('#xyz').submit(function () {
    // Отправляем форму асинхронно.
    $.ajax({
      type: "POST",
      url: $(this).attr("action"),
      data: $(this).serialize(),
      dataType: "json", // говорим jQuery, что результат ожидается в JSON

      // Обрабатываем успешные запросы.
      success: function (data) {
        // data = JSON объект.
        alert(data.message);
      }
    });
  });