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-запрос всякий раз, когда пользователь изменяет выбранный элемент.
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Вы можете сгенерировать этот раскрывающийся список программно с помощью JHTML класса следующим образом:
$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 атрибут, например:
Конечно, вы можете использовать id селектор для стилизации контейнера при помощи CSS.
В-третьих, необходимо добавить код JavaScript, который создаст Ajax запрос и место в котором ответ будет выводиться на экран. Как правило, вы не нужно беспокоиться о загрузке MooTools, это делается автоматически в Joomla, но иногда нужно делать это вручную, добавив следующий код:
JHTML::_( 'behavior.mootools' );
Есть много способов, добавления JavaScript кода в Joomla. Один из них, использование PHP «heredoc» синтаксиса (см. [2]), например:
$ajax = <<<EOD
/* <![CDATA[ */
Ваш JavaScript код находится здесь.
/* ]]> */
EOD;
$doc = & JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );
Расположение JavaScript кода между /* <![CDATA[ */ и /* ]]> */ позволяет JavaScript на выходе избежать проблем с HTML валидаторами.
Вы можете вставлять PHP переменные в Heredoc текст, окружая их скобками, например:
$ajax = <<<EOD
/* <![CDATA[ */
Некоторый JavaScript код с {$this->embedded} PHP переменной.
/* ]]> */
EOD;
$doc = & JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );
В код JavaScript нужно добавить обработчик событий для элементов, которые будут вызывать Ajax-запрос. Это делается с помощью MooTools следующим образом:
$('drop-down').addEvent( 'change', <function-declaration> );
});
где <function-declaration> это код JavaScript, который будет вызываться при изменении состояния элемента. Обратите внимание, что необходимо отложить вызов addEvent пока DOM не будет загружена. Для этого нужно на объект window повесить функцию addEvent, которая будет обрабатывать событие onDomReady.
Вы не можете повесить Ajax запрос на событие OnChange; например, можно использовать OnClick как триггер.
<function-declaration>, то что вы будете добавлять в виде экземпляра класса MooTools Ajax, и выглядит ка-то так:
method: 'get',
update: $('ajax-container')
}).request();
где ($ URL) является переменной PHP содержащей URL для Ajax запроса. В этом примере параметр update был использован, для того чтобы скопировать весь ответ от сервера в элемент Ajax-контейнера. Это быстро и удобно, но очень часто вам нужно будет обрабатывать ответ, прежде чем показывать его пользователю. Как правило, ответ в формате JSON, и вы должны расшифровать ответ и отформатировать его надлежащим образом перед помещением его в элемент «ajax-container». Чтобы сделать это, используется параметр OnComplete Ajax объекта, а не update.
method: 'get',
onComplete: <completion-function>
}).request();
где <completion-function> функция JavaScript, которая будет вызвана, когда придет ответ от удаленного сервера. Как правило, эта функция будет обрабатывать необработанные данные от сервера, прежде чем помещать его в элемент «ajax-container».
Ниже приводится более полный пример Ajax функции, которая получает данные с сервера в формате JSON, декодирует его, а затем помещает данные из ответа в элемент «ajax-container».
$('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». Как правило, наличие этого класса будет вызывать графический элемент, который будет загружен в качестве фонового изображения, чтобы пользователь понимал, что система все еще работает.
Источник
ВКонтакте
Комментарии
там в архиве два файла - запрашивающая часть и ответная, в которой используется фрэймворк Joomla!
как вы через аякс запрос к файлу пхп можете в нем обращаться к библиотекам джумлы если этот файл сам по себе и они не подключены к нему ???
Лично я так и делаю...
для J(3): '
Joomla.submitbutton = function (task) {
Joomla.submitform(task, document.getElementById('id-формы'));
}
'
Joomla.submitbutton если используете стандартные кнопки