Введение в Ajax

Prototype предоставляет разработчику простой кросс-браузерный инструментарий для осуществления Ajax-запросов. Кроме обычных запросов к серверу, он так же обрабатывает возвращаемый сервером Javascript-код и содержит поддержку pool-инга.

Все методы, относящиеся к Ajax, содержатся в глобальном объекте Ajax. Коммуникация с сервером осуществляется посредством объекта xmlHttpRequest, но его различная реализация в разных браузерах для пользователя незаметно – все это скрыто внутри Prototype.

 

Запросы осуществляются посредством создания экземпляров класса Ajax. Request.

 

new Ajax. Request(‘/some_url’, { method:‘get’ });

Первый параметр – это URL для запроса, второй – хэш опций. В данном примере этот хэш содержит только один параметр method, который определяет метод для HTTP-запроса (в данном случае – GET). Если метод не указан, то по умолчанию используется POST.

 

Получение результата

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

 

new Ajax. Request(‘/some_url’,

  {

    method:‘get’,

    onSuccess: function(transport){

      var response = transport. responseText || "no response text";

      alert("Success! \n\n" + response);

    },

    onFailure: function(){ alert(‘Something went wrong… ’) }

  });

  

В этом примере в запрос передаются 2 коллбэка, которые выводят сообщение при завершении запроса (onSuccess – при удачном завершении и onFailure при ошибке).

Результат запроса определяется на основе статуса, сообщенного сервером. В коллбэки в качестве параметров передается объект xmlHttpRequest, из которого можно получить такие значения, как responseText и responseXML.

 

Вы можете определить 2 коллбэка, один или вообще ни одного – все зависит от ситуации. В дополнение к уже описанным коллбэкам так же существуют следующие:

onUninitialized,

onLoading,

onLoaded,

onInteractive,

onComplete и

onException.

 

Все они соответствуют определенным состояниям объекта xmlHttpRequest за исключением onException, который вызывается при возникновении исключений в других коллбэках.

 

Так же доступны коллбэки onXXX, где XXX является HTTP-статусом ответа сервера – например, 200 или 404. Будте осторжны при их использовании, так как onSuccess и onFailure не будут вызваны при наличии onXXX-коллбэков, которые имеют более высокий приоритет.

 

Параметры и HTTP-методы

Вы можете передать параметры для запроса в ключе parameters при создании запроса:

 

new Ajax. Request(‘/some_url’, {

  method: ‘get’,

  parameters: { company:‘example’, limit:12 }

  });

 

Параметры можно передавать в виде хэша (как в приведенном примере), либо в виде строки (например, company=example&limit=12).

Вы можете передавать запросы как в GET-, так и в POST-запросы. Вы должны следить за тем, чтобы GET-запросы никогда не приводили к изменению данных на сервере. Так же, браузеры обычно не кэшируют POST-запросы, но кэшируют GET.

 

Одно из основных применений запросов с параметрами – это отправка формы посредством Ajax, и в Prototype есть для этого вспомогательный метод Form. serialize:

 

new Ajax. Request(‘/some_url’, {

  parameters: Form. serialize(‘id_of_form_element’)

  });

Если вам нужно вставить в запрос специфичные HTTP-заголовки, вы можете передать их в ключе requestHeaders. Они могут являться хэшем или массивом, например ['X-Custom-1', 'value', 'X-Custom-2', 'other value'].

 

Если вам нужно для какой-либо цели указать тело POST-запроса (состоящее не из параметров, указанных в ключе parameters), для этого существует специальный ключ postBody. Этот ключ имеет приоритет над ключом parameters, так что используйте его осторожно.