Создаем простой AJAX компонент
В этом примере я продемонстрирую как легко и быстро можно сделать AJAX компнент.
Итак возмем самый простой компонент, можно от сюда.
Открываем файл контроллера (components\com_hello\controller.php) и добавляем в него новую функцию (или task)
function hello()
{
sleep(2); // добавим немного задумчивости, для реализма :)
$id = JRequest::getVar('id');
$model = $this->getModel('myuser');
$myuser = $model->getUser($id);
if ($myuser) {
$html = 'Ваше имя: ' . $myuser->name;
$html .='
Ваш логин: ' . $myuser->username;
$html .='
Ваш email: ' . $myuser->email;
} else {
$html = 'Пользователя с таким ID не существует';
}
echo $html;
}
Здесь как видно идет обращение к модели, которой пока еще нет. Сейчас как раз и создадим ее. Итак создаем файл com_hello\models\myuser.php следующего содержания:
Дальше создадим новый файл скрипта components\com_hello\js\hello.js, следующего содержания:
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
// javascript-код голосования из примера
function ajaxfunction() {
// (1) создать объект для запроса к серверу
var req = getXmlHttp()
// (2)
// span рядом с кнопкой
// в нем будем отображать ход выполнения
var statusElem = document.getElementById('status');
var id = document.getElementById('userid').value;
req.onreadystatechange = function() {
// onreadystatechange активируется при получении ответа сервера
if (req.readyState == 4) {
// если запрос закончил выполняться
statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)
if(req.status == 200) {
// если статус 200 (ОК) - выдать ответ пользователю
var newElement = document.createElement('div')
newElement.innerHTML = req.responseText
statusElem.appendChild(newElement)
}
// тут можно добавить else с обработкой ошибок запроса
}
}
// (3) задать адрес подключения
req.open('GET', 'index.php?option=com_hello&task=hello&format=raw&id='+id, true);
// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
// для обработки ответа сервера
// (4)
req.send(null); // отослать запрос
// (5)
statusElem.innerHTML = 'Ожидаю ответа сервера...'
}
Здесь стоит обратить внимание на ссылку, в ней присутствует параметр format=raw. Это означает, что она вернет нам не весь документ, а только ту часть которую возвращает компонент. Про все остальное рассказывать не буду, лучше почитать соответствующую литерату.
Теперь нам нужно подключит этот скриптт. Добавим в вид com_hello\views\hello\view.html.php
$document = &JFactory::getDocument();
$baseurl = JURI::base();
$document->addScript($baseurl . "components/com_hello/js/hello.js");
Так же можно использовать вместо путей константы Joomla, я выбрал такой вариант.
Ну и последнее, добавлеяем в шаблон нужные элементы com_hello\views\hello\tmpl\default.php добавляем
Как видно из шаблона кликая на ссылку вызывается функция ajaxfunction(), которая была описана в файле hello.js
Ну вот и все результатом работы данного компонента будет вывод информоции о пользоателе по его ID, с помощью AJAX.
0
Последние материалы
- 08.01.2010 Создаем AJAX компонент с использованием Mootools
- 06.01.2010 Создаем простой AJAX компонент
- 03.03.2009 Модель-Вид-Контроллер часть 1 - введение
- 02.03.2009 Модель-Вид-Контроллер часть 2 - использование Модели
- 01.03.2009 Модель-Вид-Контроллер часть 3 - использование БД
- 10.02.2009 Модель-Вид-Контроллер часть 4 - интерфейс Администратора