FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

Работа с AJAX в CMS Joomla

Категории: Joomla

Этот элементарный пример мы немного позже расширим для того, чтобы показать обработку ответов сервера. Здесь же мы рассмотрим и объясним методы безопасной работы.

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

1. Файл HTML. При изменении его состояния будет запущен запрос Ajax.

2. Еще один HTML файл. Он будет содержать все данные, входящие в ответ сервера. Для визуализации ожидания ответа выводится иконка «Ajax loading» или выводится сообщение «Ожидается ответ от сервера».

3. Непосредственно код Ajax JavaScript.

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

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

При помощи класса JHTML можно создать такой список программными методами:

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

Далее добавляем HTML файл, содержащий в теле вывод запроса Ajax . Это можно организовать при помощи тэга div, которому также нужно присвоить соответствующий уникальный идентификатор ID:

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

Можно применять селектор ID для придания новых стилей контейнеру при помощи каскадных таблиц CSS.

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

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

JavaScript код можно добавлять в Joomla разными способами, например, применением PHP синтаксиса «heredoc»:

1
2
3
4
5
6
7
8
9
< ?php
$ajax = <<<EOD
/* <![CDATA[ */
Код JavaScript лежит в этом месте.
/* ]]> */
EOD;
 
$doc = &amp; JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );

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

1
2
3
4
5
6
7
8
9
< ?php
$ajax = <<<EOD
/* <![CDATA[ */
Код JavaScript с переменной PHP {$this->embedded}.
/* ]]> */
EOD;
 
$doc = &amp; JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );

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

1
2
3
4
5
6
window.addEvent( 'domready', function() {
 
 $('drop-down').addEvent( 'change', <function -declaration> );
 
});
</function>

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

Нельзя установит запрос Ajax на действие OnChange, но можно применить OnClick, как триггер.

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

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

где ($ URL) – это PHP переменная, которая содержит в себе адрес для запроса Ajax. Параметр update задействуется для того, чтобы ответ сервера скопировать в контейнер Ajax. Обычно ответ сервера появляется в JSON формате, поэтому нужно ответ расшифровать и отформатировать перед отправкой в ajax-container. Для этого задействуем параметр OnComplete объекта Ajax.

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

где <completion-function> — это JavaScript функция, вызываемая при ответе удаленного сервера. Эта функция предназначена для обработки данных сервера. Здесь приведен пример функции Ajax, принимающей информацию с сервера в JSON формате, декодирующей ответ и передающей его в контейнер ajax-container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 );
 // Другой код, который выполняется, когда запрос завершается
 $('ajax-container').removeClass('ajax-loading').setHTML( output );
 }
 }).request();
 });
});

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







Подпишитесь на рассылку блога
max1net.com:
Уже подписались человек
Укажите свой e-mail