Создаем простой 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;
	}

Не забываем про кодировку. Файл нужно сохранить в кодировке UTF8 без BOM.

Здесь как видно идет обращение к модели, которой пока еще нет. Сейчас как раз и создадим ее. Итак создаем файл com_hello\models\myuser.php следующего содержания:

Как видно из кода метод getUser возвращаят объект, который содержит значение всех полей указанного пользователя. Ну вобщем это все стандартные операции Joomla, здесь останавливаться не стоит.

Дальше создадим новый файл скрипта 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 добавляем

Введите ID пользователя
<input type="text" id="userid" maxlength="3" size="2" />
<br />
<a href="#" onclick="ajaxfunction()">Пуск</a>
<div id="status"></div>

Как видно из шаблона кликая на ссылку вызывается функция ajaxfunction(), которая была описана в файле hello.js

Ну вот и все результатом работы данного компонента будет вывод информоции о пользоателе по его ID, с помощью AJAX.