Joomla 1.5: Использование Ajax

В данной заметке вы узнаете, о том как разработать простое Ajax взаимодействие с использованием MooTools в Joomla! 1.5. Будет показан пример, для правильной обработки последовательности ответов сервера, даже тогда, когда она не совпадает с последовательностью запросов. Так же будет рассмотрена проблема "политики единого источника" браузеров, т.е. возможность работы Ajax кроссдоменно с использованием метода POST.

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

Лично я совершенно не в восторге от этого решения разработчиков, но раз уж они не собираются отказываться от него, то придётся нам разбираться с MooTools, по крайней мере, с тем, как он реализует Ajax транспорт.

Данная статья относится к Joomla! 1,5 потому как Joomla! 1,6 поставляется с более поздней версией MooTools, которая имеет другой способ реализации Ajax запросов.

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

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

• HTML-элемент, изменение состояния которого инициализирует Ajax - запрос.
• HTML-элемент, состояние которого может измениться по пришествии ответа на Ajax - запрос.
• Ну и собственно сам 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>

Этот список вполне себе ничего - генерируется следующим кодом:

<?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>

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

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

Есть много способов, добавить JavaScript код в Joomla. Один из способов, который позволяет избежать проблем, заключается в использовании PHP "Heredoc" синтаксиса следующим образом:

<?php
$ajax = <<<EOD
... Здесь ваш Javascript - код ...
EOD;

// Включаем скрипт в работу:
$doc = & JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );

Ещё в код JavaScript нужно добавить обработчик событий для элементов, которые будут инициировать вызовы Ajax. В MooTools это делается, используя следующий вызов ( в нашем случае - это выпадающий список с id="drop-down" ) :

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

где <function-declaration> это код JavaScript, который должен быть вызван, когда происходит событие 'change' . Обратите внимание, что нужно всегда задержать вызов addEvent пока DOM дерево страницы не загрузится полностью. В MooTools это делается с помощью метода window.addEvent - таким макаром мы "вешаем" обработчик на событие domready.

Не обязателно использовать событие OnChange для запуска механизма Ajax, например, можно ещё использовать событие OnClick как инициализатор. , должен будет создать экземпляра MooTools класса: Ajax, выглядящий примерно так:

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

где {$url} является PHP переменной, содержащей URL для Ajax - запроса. Свойство update - было использовано, чтобы скопировать ответ сервера в HTML - элемент с id="ajax-container". Это быстро и удобно, но очень часто вам нужно будет обрабатывать ответ каким-либо образом, прежде чем показывать его пользователю. Как правило, ответ приходит в JSON - формате, и вы должны декодировать и отформатировать его соответствующим образом, перед отображением в HTML - элементе - контейнере. Чтобы сделать это, используйте свойство OnComplete объекта Ajax, а не свойство update.

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

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

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();
	});
});

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