Mohawk / Работа с Аякс

В этой статье я опишу работу с Аякс в Мохавке.
Работа с Аяксом реализуется через класс Ajax, который располагается в файле kernel/Ajax.js.

Класс Ajax берет на себя основные рутинные операции:
— создание XmlHttpRequest запроса
— преобразование специальных символов в данных запроса
— составление и отправка запроса к серверу
— принятие ответа от сервера


Для более удобной работы также используются классы:
— XML — для облегченной работы с XML
— FormsInterface — для работы с HTML формами.

Форма и FormsInterface

Создадим простую HTML форму, с которой будем работать. Пусть, для примера это будет форма обратной связи:

<form id="feedback" method="post" onsubmit="return send(this)">
  <fieldset>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input id="name" name="name" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input id="email" name="email" />
      </li>
      <li>
        <label for="message">Message:</label>
        <textarea id="message" name="message" cols="40" rows="8"></textarea>
      </li>
    </ul>
    <button type="submit">Submit</button>
  </fieldset>
</form>

* This source code was highlighted with Source Code Highlighter.

При событии onsubmit, форма вызовет функцию send и передаст ссылку на себя в качестве аргумента. В функции send мы и будем работать. Для начала нам нужно получить данные из формы. DOM расширение FormsInterface предоставляет удобный метод для получения данных из формы: form.getData(), где form — это сама форма. Метод getData() вернет нам данные из формы в виде ассоциативного массива:

function send(form) {
  var data = form.getData();
  // data = {'name': 'Alice', 'email': '[e-mail]', message: 'Hello world!'}

  return false;
}

* This source code was highlighted with Source Code Highlighter.

Ajax и XML

Чтобы работать с классом Ajax, необходимо подключить его:

include('mohawk.kernel.Ajax');

* This source code was highlighted with Source Code Highlighter.

Для того, чтобы отправить данные формы, нам нужно создать Аякс запрос:

var request = new Ajax('test.xml', Ajax.METHOD_POST);

* This source code was highlighted with Source Code Highlighter.

Конструктор класса Ajax принимает аргументы: адрес, куда будет отослан запрос и HTTP метод. Если метод не задан, то запрос будет отослан методом GET. Через класс можно отправлять не только привычные GET и POST запросы, но и PUT, DELETE, HEAD, OPTIONS. В последнем случае, возможна эмуляция запросов через POST с отправкой соответствующего заголовка X-Request-Method. Т.е., к примеру, PUT запрос будет отослан через POST, но в заголовке будет: X-Request-Method:PUT. Это нужно в том случае, если по каким либо причинам не удается отправить запросы отличные от GET и POST (к примеру, Kerio фаервол блокирует HTTP метод DELETE).

Итак, чтобы отправить запрос, необходимо вызвать метод request.send(data), который в качестве аргумента принимает отправляемые данные в виде ассоциативного массива. Например:

request.send({'a': 1, 'b': 2}); // a=1&b=2


* This source code was highlighted with Source Code Highlighter.

Добавляем аякс запрос в функцию send:

function send(form) {
  var request = new Ajax('test.xml', Ajax.METHOD_POST);
  var data = form.getData();
  request.send(data);
  return false;
}

* This source code was highlighted with Source Code Highlighter.

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

function send(form) {
  var request = new Ajax('test.xml', Ajax.METHOD_POST);
  request.responseHandler = function (request) {
    alert('Tada!');
  }
  var data = form.getData();
  request.send(data);
  return false;
}

* This source code was highlighted with Source Code Highlighter.

Создадим файл test.xml, чтобы эмулировать наш сервер. Допустим, сервер нам сообщит, что все прошло 'ok' и выдаст сообщение 'Done':

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <status>ok</status>
  <message>Done</message>
</data>

* This source code was highlighted with Source Code Highlighter.

Если протестируем форму, то после отправки, нам выдается алерт-бокс «Tada!».
Усложним наш обработчик. Мы хотим получить ответ сервера, а именно: статус и сообщение. В заданой нами функции request.responseHandler аргументом передается ссылка на аякс запрос: request. После получения ответа сервера, у объекта-запроса появится свойство request.data, которое будет содержать данные от сервера. Объект XML автоматом пропарсит XML-ответ, и в итоге, в request.data будет находится ассоциативный массив с ответом сервера: {'status': 'ok', 'message': 'Done!'}

function send(form) {
  var request = new Ajax('test.xml', Ajax.METHOD_POST);
  request.responseHandler = function (request) {
    var response = request.data;
    alert('Status: ' + response.status + ', message: ' + response.message);
  }
  var data = form.getData();
  request.send(data);
  return false;
}

* This source code was highlighted with Source Code Highlighter.

JSON

Многие разработчики предпочитают JSON, вместо XML. К примеру, ответ сервера может быть в таком формате (test.js):

{
  status: 'ok',
  message: 'Done!'
}


* This source code was highlighted with Source Code Highlighter.

Чтобы принять JSON данные, нужно поменять всего лишь две строки:

function send(form) {
  // меняем test.xml на test.js
  var request = new Ajax('test.js', Ajax.METHOD_POST);

  // указываем тип ответа сервера - 'json'
  request.type = Ajax.TYPE_JSON;

  request.responseHandler = function (request) {
    alert('Tada!');
  }
  var data = form.getData();
  request.send(data);
  return false;
}

* This source code was highlighted with Source Code Highlighter.

Как видно из примера, класс Ajax позволяет полностью абстрагироваться от формата передаваемых и получаемых данных. Мы можем работать и с XML, и с JSON, не меняя логики работы приложения.

Отладка Аякс запросов

При разработке приложений, использующих Аякс часто требуется отладка запросов. Необходимо посмотреть, что куда ушло и что оттуда пришло. В Фаерфоксе для этих целей имеется замечательный фаербаг, а в Опере есть встроенная консоль для веб-разработчиков. В бета версии Хрома 2 вроде появляется возможность просмотра Аякс запросов. Но в ИЕ, как обычно, с отладкой возникают проблемы.

Увидеть отправленные Аякс запросы и ответы от сервера можно при помощи отладочной консоли Мохавка. Консоль подключается довольно просто:

include('mohawk.UI.Console');

var Console = new Mohawk.UI.Console();
Console.regKey();
document.addLoader(function () {
    Console.append();
});

* This source code was highlighted with Source Code Highlighter.

Пример логов консоли:
Ajax query sent to: test.xml
Data:
name:Alice
email:[e-mail]
message:Hello world!
Query: name=Alice&email=[e-mail]&message=Hello world!

Ajax query received from: test.xml
Data:
<?xml version="1.0" encoding="UTF-8"?>
<data>
<status>ok</status>
<message>Done</message>
</data>


Посмотреть работу консоли и пример формы
Скачать Мохавк с примерами
Также можно почитать введение в Мохавк и про JS-шаблонизацию