В типичном приложении Ajax вы хотите вывести некоторые данные с сервера, который может быть ваш собственный сайт Joomla или удаленной веб-службы, и обновление некоторых элементов на веб-страницу с данными, которые возвращает сервер. Есть три элемента типичная реализация Ajax:
* Элемент HTML, изменение государственной вызовет запрос Ajax.
* Еще один элемент HTML, где данные ответа будет размещен. Часто это покажет "Ajax загрузки" значок или сообщение, а ответа от сервера в настоящее время ожидает.
* Код Ajax JavaScript себя.
Начиная с первой из них, необходимо определить элемент на странице, которые будут вызывать запрос Ajax. Элемент должен быть идентифицирован уникальным идентификатором атрибута. Например, предположим, у вас есть раскрывающемся выберите окно на странице, и вы хотите сделать запрос 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, который также должен иметь уникальный идентификатор атрибута, как это:
<div id="ajax-container"></div>
Вы можете, конечно, использовать ID в селектор стиля вывода с помощью CSS.
В-третьих, необходимо добавить код JavaScript, который сделает запрос Ajax и место ответа на вывод на экран. Как
правило, вы не должны беспокоиться о загрузке MooTools себя как это делается автоматически для вас Joomla, но иногда вы должны сделать это вручную, добавив следующий код:
<?php
JHTML::_( 'behavior.mootools' );
Есть много способов, чтобы добавить JavaScript код на выход из Joomla. Один из способов, что позволяет избежать комплекса цитировании, заключается в использовании PHP "Heredoc" синтаксис (см. [1] для более подробной информации) так:
<?php
$ajax = <<<EOD
/* <![CDATA[ */
Your JavaScript code goes here.
/* ]]> */
EOD;
$doc = & JFactory::getDocument();
$doc->addScriptDeclaration( $ajax );
Упаковка код JavaScript между / * <! [CDATA [* / и / *]]> * / позволяет JavaScript, который будет выводиться не вызывая проблем с валидаторов HTML.
Вы можете вставлять PHP переменных в Heredoc текст, окружая их в фигурные скобки, например:
<?php
$ajax = <<<EOD
/* <![CDATA[ */
This is some JavaScript code with {$this->embedded} PHP variable in it.
/* ]]> */
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 повесить функцию Ajax AddEvent на onDomReady события.
Вы не должны повесить вызов Ajax на OnChange события, например, вы можете использовать OnClick как триггер.
<function-declaration>, Что вы будете добавлять будет экземпляра класса MooTools Аякс, выглядящий примерно так:
var a = new Ajax( {$url}, {
method: 'get',
update: $('ajax-container')
}).request();
где {$ URL} является переменной PHP содержащие URL для запроса Ajax. В этом примере обновления аргумент был использован, чтобы скопировать весь ответ от сервера в элемент Ajax-контейнера. Это быстрый и удобный, но очень часто вы хотите, чтобы процесс ответ в некотором роде, прежде чем показывать его пользователю. Как правило, ответ JSON в кодировке, и вы должны расшифровать ответ и
формат их соответствующим образом перед обновлением Ajax-контейнера. Для этого, используйте OnComplete аргумента объект Ajax, а не обновление argument.the MooTools Ajax класса, смотря что-то вроде этого:
var a = new Ajax( {$url}, {
method: 'get',
onComplete: <completion-function>
}).request();
где <completion-function> это функция JavaScript, которая будет вызвана, когда ответ от удаленного сервера получен. Как правило, эта функция будет обрабатывать сырые данные с сервера перед отправкой его в элемент Ajax-контейнера.
Ниже более полный пример функции Ajax, которая получает данные с сервера в формате JSON, декодирует его, то толкает данные ответ в Ajax-контейнера.
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-загрузки CSS класс из элемента Ajax-контейнера. Как правило, наличие этого класса приведет к "вертушкой" графический элемент для загрузки в качестве фонового изображения, чтобы пользователь осознает, что система все еще жива.
