Как известно, Ajax это определенная технология фонового обмена информацией браузера с сервером без перезагрузки всего содержимого страницы. Описывать саму технологию и как она работает я не буду, статей на эту тему и так предостаточно. Рассмотрим использование технологии ajax применительно к CMS Joomla 2.5 с использованием JQuery (это один самых простых вариантов, плюс кроссплатформенность обеспечена).
- Ajax без использования фрэймворка Joomla (все функции, например, работа с базой данных, получение информации о пользователях пишем своими руками)
- Ajax + фрэймворк Joomla 2.5 (имеем возможность использовать API джумлы, например, для получения информации о пользователе смело можем использовать код: $user = JFactory::getUser)
- Ajax + полноценное использование всех возможностей Joomla 2.5, включая MVC (модель-вью-контроллер)
Ajax без использования фрэймворка Joomla 2.5
Все примеры будем рассматривать с данными Joomla 2.5, которые ставятся при ее инсталляции, шаблон по умолчанию «Beez_20». Для начала в какой-нибудь части шаблона вставим функцию на javascript, которая отправляет запрос на сервер с помощью jquery. Выглядеть она будет слеудющим образом:
function zapros() {
if (window.jQuery)
{
alert("jquery загружен"); //окно сигнализирует, что jquery загружен и готов к использованию
$.ajax({ //функция jquery
type: "POST",
url: "ajax.php", //файл в корне сайта с информацией
data: "mydata=data", //данные для сервера
success: function(tut_dannye_ot_servera){ //данная функция вызывается при усппешной отработке запроса
alert( "Data Saved: " + tut_dannye_ot_servera ); //окно сигнализирует, что пришел ответ и показывает, что нам передал сервер
$('#korzina').replaceWith( tut_dannye_ot_servera ); //функция jquery помещает ответ в место с id=#korzina
}
});
}
}
также, куда-нибудь в шаблон, компонент либо модуль вставляем кнопку
<input type="button" name="Sub" class="button" value=жмите_сюда onclick = zapros()
<div id=korzina></div>
файл ajax.php, например, выглядит следующим образом
<?php
Echo “ответ сервера”;
?>
В результате, при нажатии на кнопку «жмите_сюда», на сервер отправится «POST» запрос с данными «mydata=data». На сервере будет открыт файл «ajax.php», в котором на PHP вы можете писать любой код, и вся выданная информация на отображение будет передана вашему сайту в переменную «tut_dannye_ot_servera». Затем, с помощью функции jquery ".replaceWith()", содержимое переменной помещаем в место, где ранее был тег с id=#korzina.
В данном варианте реализации механизма Joomla 2.5 + ajax мы, увы, не можем использовать все прелести, которые дает нам фрэймворк Joomla. Все придется писать своими ручками.
Ajax + фрэймворк Joomla 2.5
При такой реализации, все остается, как в предыдущем варианте, только файл ajax.php будет выглядеть по другому
<?php
define('_JEXEC', 1);
define('DS', DIRECTORY_SEPARATOR);
if (file_exists(dirname(__FILE__) . '/defines.php')) {
include_once dirname(__FILE__) . '/defines.php';
}
if (!defined('_JDEFINES')) {
define('JPATH_BASE', dirname(__FILE__));
require_once JPATH_BASE.'/includes/defines.php';
}
require_once JPATH_BASE.'/includes/framework.php';
$app = JFactory::getApplication('site');
$app->initialise();
$user = JFactory::getUser;
Echo “ответ сервера”;
?>
Теперь мы можем использовать API функции Joomla 2.5
Ajax + полноценное использование всех возможностей Joomla 2.5, включая MVC (модель-вью-контроллер)
Чтобы не создавать лишних модулей, но, при этом было бы понятно, как все работает, рассмотрим данный пример на модуле «Breadcrumbs». Он выводится в основном шаблоне «Beez_20» на позиции
<jdoc:include type="modules" name="position-2" />
изменять его код нам не понадобиться. Шаблон «Atomic» изменим так, чтобы он выглядел следующим образом:
<?php
defined('_JEXEC') or die;
echo 'получено по ajax';
?>
<jdoc:include type="modules" name="position-2" />
Функция инициирующая запрос по ajax будет выглядеть так
function zapros() {
if (window.jQuery)
{
alert("jquery загружен"); //окно сигнализирует, что jquery загружен и готов к использованию
$.ajax({ //функция jquery
type: "POST",
url: "index.php",
data: "template=atomic ", //данные для сервера
success: function(tut_dannye_ot_servera){ //данная функция вызывается при усппешной отработке запроса
alert( "Data Saved: " + tut_dannye_ot_servera ); //окно сигнализирует, что пришел ответ и показывает, что нам передал сервер
$('.breadcrumbs').replaceWith( tut_dannye_ot_servera ); //функция jquery помещает ответ в место с class=breadcrumbs
}
});
}
}
Как видим, в функции изменились отправляемые данные (мы посылаем другой шаблон), также место куда нужно поместить результат (.breadcrumbs). И самое главное, файл который будет открываться при запросе на сервере «index.php».
В результате Вы увидите, что при нажатии кнопки, инициирующей запрос, у Вас изменится содержимое «Breadcrumbs».
Представьте, что вместо «Breadcrumbs» у Вас корзина заказов. При таком подходе не требуется писать разный код для вывода ее обычным образом и через ajax. Достаточно иметь определенный шаблон, который Joomla будет использовать для отправки результата. При этом не нужно плодить шаблоны для каждого модуля. Все можно реализовать в одном шаблоне.
Автор: Hroomer
