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

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-контейнера. Как правило, добавление этого класса приведет к отображению прелоадера — графического элемента, который будет загружен в качестве фонового изображения, чтобы пользователь не расслаблялся, а понимал, что система все еще работает.

 

 

Возможно Вас заинтересуют эти материалы

Joomla 1.5: Отправка почты.

В этой заметке рассказано о том, как отправлять почту, используя механизмы предоставленные Joomla 1.5 (

Joomla 1.5: Пагинация.

Класс JPagination, представленный в Joomla! 1.5, позволяет легко, и просто добавлять постраничную навигацию - пагинацию

Joomla 1.5: Система событий.

Joomla 1.5 имеет систему событий, основанную на реализации шаблона проектирования Observer. И эта система очень неплохо