Xajax — обзор возможностей Web 2.0 php-библиотеки
обзор возможностей php-библиотеки Xajax
Представим себе, что вам срочно необходимо осчастливить очередного заказчика, который в ходе поисков исполнителя уже просмотрел гору рекламных материалов и всенепременно хочет, чтобы его сайт был сделан c использованием элементов Веб 2.0. Однако обычно это означает, что бюджет такой разработки будет немного выше, чем у классического проекта. Но, оказывается, чтобы сделать грамотное веб-приложение «в стиле ajax», вовсе не обязательно скачивать очередной IDE или выискивать модуль к уже установленной у вас CMS. Иногда проще, качественней и уж точно, — эффективнее в плане быстродействия изучить особенности одной конкретно взятой библиотеки, с тем чтобы в дальнейшем именно с ее помощью вставлять необходимый вам функционал в ваши проекты. Почему я говорю про единственный инструмент? Вероятно, логично предположить, что изучение чего-то одного и использование раз за разом именно этого чего-то гораздо эффективнее, чем распыление собственных усилий каждый раз, когда нужен «этот ajax». Сегодня будет представлен как раз такой инструмент, который поможет исполнить желания ваших бизнес-партнеров и уменьшит время, проводимое за разработкой конкретного приложения Веб 2.0. В статье будет рассказано про свободную php-библиотеку Xajax.
Сама по себе php-библиотека Xajax разрабатывается под открытой лицензией BSD. Cоответственно, ее можно совершенно свободно загрузить в разделе Download официального веб-сайта. Следует обратить внимание, что будут доступны сразу несколько вариантов этого программного обеспечения. В зависимости от того, насколько хорошо вы знакомы с этой библиотекой, можно скачать либо полную версию, либо ее сокращенный вариант. Отдельно доступна документация для веб-разработчиков, которая, кстати, входит также и в полную версию пакета. Впрочем, рекомендуется все-таки скачивать полную версию. Поскольку даже квалифицированный разработчик может попросту позабыть некоторые нюансы, которые можно легко восстановить в памяти, просто взглянув на примеры, прилагаемые к полной версии пакета Xajax.
Для подключения этой библиотеки к готовой веб-системе достаточно скопировать файлы, размещенные в папке ./xajax_core дистрибутива в произвольный каталог вашего веб-сайта. Например, можно использовать ./classes/xajax_core/. Понятно, что каталоги и файлы должны иметь правильные права доступа (обычно 0755).
Само по себе включение кода библиотеки осуществляется подключением файла ./xajax_core/xajax.inc.php в ваше приложение. Непосредственно перед выполнением этой операции измените кодировку, которая также может устанавливаться в первых строках указанного уже файла xajax.inc.php. В этом файле определяется макрос, который по умолчанию задает кодировку типа utf-8. Поэтому, если вы используете именно такой вариант кодирования данных, можно вообще ничего не менять. Однако в большинстве случаев русскоязычные сайты будут использовать следующую конфигурацию:
define ('XAJAX_DEFAULT_CHAR_ENCODING', 'cp1251');
Практически все библиотеки, равно как и вообще весь софт, который берет на себя смелость называться "веб-дванольным", работают со стандартным объектом, который, собственно, и выполняет запросы данных в клиентском режиме. Это означает только то, что, несмотря на совершенно разные подходы к реализации интерфейсов, все библиотеки и IDE, упрощающие работу с ajax, используют один и тот же принцип. Поэтому и реализации разных библиотек несколько похожи друг на друга. Итак, какой же собственно интерфейс предоставляет разработчику библиотека XJAX?
Проще всего ознакомиться с конкретным php-ориентированным инструментом, конечно же, написав простенький пример с его использованием. Попробуем вывести курсы валют, занесенные в MySQL-таблицу. В качестве тестовой используем следующую структуру и предлагаемые далее тестовые данные:
CREATE TABLE `usd` (
`id` INTEGER(11) NOT NULL AUTO_INCREMENT,
`course` DECIMAL(15,5),
`data` TIMESTAMP,
PRIMARY KEY (`id`),
KEY `course` (`course`),
KEY `data` (`data`)
);
INSERT INTO `usd` (`id`, `course`, `data`) VALUES
(1, 5.852, '2008-11-06'),
(2, 5.84, '2008-11-07'),
(3, 5.801, '2008-11-08'),
(4, 5.785, '2008-11-09');
Xajax предлагает разделение скрипта на две части. Первая часть (условно ее можно назвать клиентской) выполняет подготовку и вывод вспомогательных данных в браузер. Вторая часть (назовем ее серверной) работает с запросами браузера и возвращает данные. Это несколько более громоздко, чем, например, в случае использование созвучной по названию и функциональности библиотеки Sajax, которая была рассмотрена в этой статье.
Однако если учесть, что обычно подключение ajax-библиотек происходит к приложениям уже прошедшим этап начального развития, то такая «сложность», а точнее подход, разбивать сложное на несколько более простых частей может оказаться благом. Поскольку именно таким образом Xajax делает возможными простое тестирование и отлов ошибок, которые реализуются в «серверной» части кода буквально в две строчки. Кстати, в тестовых примерах код, необходимый для тестирования серверной части, будет выделен как комментарий, двумя слешами.
Кроме того, особенность реализации библиотеки предполагает необходимость инициализации объекта, являющегося ajax-интерфейсом, что удобнее делать в файле, включаемом во все «заинтересованные» скрипты,. Таким образом, наглядную схему работы Xajax можно представить следующим образом:
Схема работы тестового примера |
Для простоты демонстрации включим все необходимые объявления и инициализации в functions_all.php. Этот скрипт может выглядеть следующим образом:
<?php
define ('XAJAX_DEFAULT_CHAR_ENCODING', 'cp1251');
require_once ("./classes/xajax_core/xajax.inc.php");
require_once ("./classes/db.class.php");
$xajax = new xajax("server.php");
$xajax->registerFunction( "showres" );
?>
Первая директива задает кодировку, в которой перекодируются передаваемые браузером данные. Далее подключаются класс самого Xajax и обработчик базы данных. После чего создает объект, который и обеспечивает интерфейс к базе данных. Обратите внимание, что в процессе вызова конструктора new xajax() ему передается имя серверного приложения, которое и будет отвечать на запросы. В последнюю же очередь объявляется функция, которая будет существовать в области имен серверного php-приложения и, собственно, будет использована как интерфейс между браузером и скриптом server.php.
Серверная часть приложения выглядит несколько сложней, чем включаемый файл, однако эта сложность носит скорее показной характер. На самом деле в ней достаточно определить самую функцию, которая и займется обработкой вывода.
<?php
function showres( $order )
{
global $mdb;
$objResponse = new xajaxResponse();
$str = "<strong>Курсы USD</strong><br>";
$str .= "<strong>Дата - курс (В порядке ".( $order=="asc"?"возрастания":"убывания" )." даты)</strong><br>";
$res = $mdb->query( "SELECT * FROM usd ORDER BY ". ( $order=="asc"?"data ASC":"data DESC" ) ." ");
while ( $o = mysql_fetch_object( $res ) )
{
$str .= substr($o->data,0,10)." : $o->course<br>";
}
$objResponse->assign( "res", "innerHTML", $str );
return $objResponse;
// return $str;
}
require("functions_all.php");
$xajax->processRequest();
// echo show()
?>
Здесь потребуются небольшие пояснения. Сначала определяется функция-обработчик. Именно в нее будут стекаться данные, которые будет передавать клиентское приложение. Забегая вперед, хочу отметить, что эти сведения в саму серверную часть (переменная $order) будут передаваться с помощью вызова JS-функции. Для этого необходимо будет «вешать» такой вызов на какое-то событие, например на нажатие html-кнопки.
Сама по себе функция showres просто выбирает данные из таблицы MySQL. Единственная особенность запроса состоит в использовании разнообразной сортировки в зависимости от параметров передаваемых нашей функции извне. Это необходимо, чтобы в зависимости от одного-единственного параметра можно было получать тот или иной способ вывода данных в браузер.
Наиболее интересная часть функции состоит в способе, которым она возвращает данные. Речь идет про вызов метода assign управляющего класса Xajax:
$objResponse->assign( "res", "innerHTML", $str );
Как видите, значение данного метода фактически возвращается серверной частью в результате обработки входных данных ajax-запросов. Сама функция получает при вызове в качестве первого аргумента id элемента html-разметки. Вторым идет название конкретного свойства этого же элемента, которому в итоге будет присвоено определенное значение. Собственно, именно это значение и передается в третьем параметре.
Иными словами, если у вас есть текстовое поле ввода и нужно задать его содержимое, то второй параметр будет непременно value. А в случае блоков div следует использовать уже свойство innerHTML, которое, собственно, и позволит оперировать с вложенным содержимым. Само собой разумеется, можно работать с произвольными, доступными в DHTML свойствами элементов страницы. Например, вы можете скрывать блоки div, изменяя их свойство style.display. Для этого в третьем аргументе метода assign необходимо передать строку none. Ну или block, если вы, напротив, захотите сделать div-блок видимым.
Обратите внимание на то, что можно вызывать несколько методов типа assign для разнообразных элементов оформления html. Правда, они будут выполнены последовательно. То есть если вы вызовите показ, а затем сокрытие определенного div-блока, то он в итоге окажется невидимым.
Скрипт, который отвечает за вывод данных клиенту с помощью Xajax, фактически мало отличается от обычного php-приложения. Есть лишь необходимость указания специального метода управляющего класса, который выведет, например, в заголовке html-страницы служебные javascript. Вот третья часть нашего приложения, которая, собственно, и выведет данные клиентскому браузеру:
<?php
require("functions_all.php");
?>
<html lang="ru">
<body>
<?php $xajax->printJavascript('./'); ?>
<input type="button" value="USD по дате"
onclick="xajax_showres('asc');return false;" />
<input type="button" value="USD в обратном порядке"
onclick="xajax_showres('desc');return false;" />
<div id="res">Нажмите одну из кнопок</div>
</body>
</html>
Как видите, ничего необычного. Единственный нюанс состоит в том, что необходимо указывать префикс xajax_ перед предопределенным именем обработчика. В нашем случае определенная в общем блоке functions_all функция showres() дается в качестве процессора события onclick для двух разных кнопок. Как вы видите, при этом в первом вызове эй передается входной параметр asc, а во втором — desc. Именно эти строки будут переданы как значение входного параметра $order для функции showres( $order ), находящейся в серверной части приложения — server.php.
Вот так работает пример |
Несколько других примеров использования Xajax можно подсмотреть на официальном сайте проекта и в примерах, которые прилагаются к установочным файлам полного пакета. Однако изящность библиотеки настолько потрясающая, что фактически можно начать работать с ней, просто «проработав» такой простой пример, как было указано в нашей статье.
Интерактивность веб-приложений без необходимости постоянной перезагрузки браузера делает ваш сайт более интересным для целевой аудитории. Дело даже не в том, что пользователь, таким образом, быстрее получает нужную информацию. Это означает, что битва за контент, которая ежедневно ведется в Сети, не будет проиграна бесславно тем проектам, что вставили модные фишки раньше вас. И вполне возможно, ваша аудитория немного увеличится за счет применения некоторых необычных решений. Рассмотренная в нашей сегодняшней статье php-библиотека Xajax предназначена для превращения гадкого утенка Веб 1.0 в прекрасного лебедя Веб 2.0, а говоря прозаически — для повышения узнаваемости, эффективности и в конечном итоге прибыльности ваших веб-приложений.