Использование AJAX в MooTools. Часть 1. Клиентский код.

MooTools [1] JavaScript фреймворк, включающий в себя поддержку Ajax запросов и делающий Ajax кодинг более простым, хотя существуют еще некоторые проблемы. Возможно самым важным преимуществом использования MooTools фреймворка является кроссбраузерность, так что можно не беспокоиться что ваш код будет работать во всех браузерах.

В данной статье описано, как разработать простой Ajax запрос используя MooTools в Joomla! 1,5. Этот простой пример далее будет расширен, чтобы показать как обрабатываются серверные ответы. Так же в статье будут рассмотрены безопасные методы работы.

Ajax клиентский код использующий MooTools

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

• HTML элемент, изменение состояния, которого будет инициировать Ajax запрос
• Другой HTML элемент, в котором располагаются данные ответа. Обычно изображается иконка «Ajax loading» или сообщение пока ожидается ответ от сервера.
• Сам Ajax JavaScript код

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

<select name="drop-down" id="drop-down">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
</select>

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

<?php
$options = array();
$options[] = JHTML::_( 'select.option', '1', 'Item 1' );
$options[] = JHTML::_( 'select.option', '2', 'Item 2' );
$options[] = JHTML::_( 'select.option', '3', 'Item 3' );
echo JHTML::_( 'select.genericlist', $options, 'drop-down' );

Во-вторых, вам нужно добавить HTML-элемент, который будет содержать вывод Ajax запроса. Это может быть соответствующим образом размещённый DIV, который также должен иметь уникальный id атрибут, например:

<div id="ajax-container"></div>

Конечно, вы можете использовать id селектор для стилизации контейнера при помощи CSS.

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

<?php
JHTML::_( 'behavior.mootools' );

Есть много способов, добавления JavaScript кода в Joomla. Один из них, использование PHP «heredoc» синтаксиса (см. [2]), например:

<?php
$ajax = <<<EOD
/* <![CDATA[ */
Ваш JavaScript код находится здесь.
/* ]]> */
EOD;
 
$doc = & JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );

Расположение JavaScript кода между /* <![CDATA[ */ и /* ]]> */ позволяет JavaScript на выходе избежать проблем с HTML валидаторами.
Вы можете вставлять PHP переменные в Heredoc текст, окружая их скобками, например:

<?php
$ajax = <<<EOD
/* <![CDATA[ */
Некоторый JavaScript код с {$this->embedded} PHP переменной.
/* ]]> */
EOD;
 
$doc = & JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );

В код JavaScript нужно добавить обработчик событий для элементов, которые будут вызывать Ajax запрос. Это делается с помощью MooTools следующим образом:

window.addEvent( 'domready', function() {
 
        $('drop-down').addEvent( 'change', <function-declaration> );
 
});

где <function-declaration> это код JavaScript, который будет вызываться при изменении состояния элемента. Обратите внимание, что необходимо отложить вызов addEvent пока DOM не будет загружена. Для этого нужно на объект window повесить функцию addEvent, которая будет обрабатывать событие onDomReady.

Вы не можете повесить Ajax запрос на событие OnChange; например, можно использовать OnClick как триггер.

<function-declaration>, то что вы будете добавлять в виде экземпляра класса MooTools Ajax, и выглядит ка-то так:

var a = new Ajax( {$url}, {
        method: 'get',
        update: $('ajax-container')
}).request();

, где ($ URL) является переменной PHP содержащей URL для Ajax запроса. В этом примере параметр update был использован, для того чтобы скопировать весь ответ от сервера в элемент Ajax-контейнера. Это быстро и удобно, но очень часто вам нужно будет обрабатывать ответ, прежде чем показывать его пользователю. Как правило, ответ в формате JSON, и вы должны расшифровать ответ и отформатировать его надлежащим образом перед помещением его в элемент «ajax-container». Чтобы сделать это, используется параметр OnComplete Ajax объекта, а не update.

var a = new Ajax( {$url}, {
        method: 'get',
        onComplete: <completion-function>
}).request();

где <completion-function> функция JavaScript, которая будет вызвана, когда придет ответ от удаленного сервера. Как правило, эта функция будет обрабатывать необработанные данные от сервера, прежде чем помещать его в элемент «ajax-container».

Ниже приводится более полный пример Ajax функции, которая получает данные с сервера в формате JSON, декодирует его, а затем помещает данные из ответа в элемент «ajax-container».

window.addEvent( 'domready', function() {
 
        $('drop-down').addEvent( 'change', function() {
 
                $('ajax-container').empty().addClass('ajax-loading');
 
                var a = new Ajax( {$url}, {
                        method: 'get',
                        onComplete: function( response ) {
                                var resp = Json.evaluate( response );
 
                                // Other code to execute when the request completes.
 
                                $('ajax-container').removeClass('ajax-loading').setHTML( output );
 
                        }
                }).request();
        });
});

Обратите внимание, что в этом примере есть код, для добавления, а затем для удаления, класса ajax-loading CSS из элемента «ajax-container». Как правило, наличие этого класса будет вызывать графический элемент, который будет загружен в качестве фонового изображения, чтобы пользователь понимал, что система все еще работает.

Источник