Статьи Новости Контакты

02.12.2008
Петр Агофонов

Xajax — обзор возможностей Web 2.0 php-библиотеки

обзор возможностей php-библиотеки Xajax

Веб-страница проекта
Веб-страница проекта

Представим себе, что вам срочно необходимо осчастливить очередного заказчика, который в ходе поисков исполнителя уже просмотрел гору рекламных материалов и всенепременно хочет, чтобы его сайт был сделан c использованием элементов Веб 2.0. Однако обычно это означает, что бюджет такой разработки будет немного выше, чем у классического проекта. Но, оказывается, чтобы сделать грамотное веб-приложение "в стиле ajax", вовсе не обязательно скачивать очередной IDE или выискивать модуль к уже установленной у вас CMS. Иногда проще, качественней и уж точно, — эффективнее в плане быстродействия изучить особенности одной конкретно взятой библиотеки, с тем чтобы в дальнейшем именно с ее помощью вставлять необходимый вам функционал в ваши проекты. Почему я говорю про единственный инструмент? Вероятно, логично предположить, что изучение чего-то одного и использование раз за разом именно этого чего-то гораздо эффективнее, чем распыление собственных усилий каждый раз, когда нужен "этот ajax". Сегодня будет представлен как раз такой инструмент, который поможет исполнить желания ваших бизнес-партнеров и уменьшит время, проводимое за разработкой конкретного приложения Веб 2.0. В статье будет рассказано про свободную php-библиотеку Xajax.

Где взять библиотеку 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');  

Функциональность Xajax
Практически все библиотеки, равно как и вообще весь софт, который берет на себя смелость называться "веб-дванольным", работают со стандартным объектом, который, собственно, и выполняет запросы данных в клиентском режиме. Это означает только то, что, несмотря на совершенно разные подходы к реализации интерфейсов, все библиотеки и IDE, упрощающие работу с ajax, используют один и тот же принцип. Поэтому и реализации разных библиотек несколько похожи друг на друга. Итак, какой же собственно интерфейс предоставляет разработчику библиотека XJAX?

Как написать простейшее приложение с Xajax
Проще всего ознакомиться с конкретным 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  =    "<b>Курсы  USD</b><br>";  
        $str  .=  "<b>Дата  -  курс  (В  порядке  ".(  $order=="asc"?"возрастания":"убывания"  )."  даты)</b><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, а говоря прозаически — для повышения узнаваемости, эффективности и в конечном итоге прибыльности ваших веб-приложений.





Скоро на сайте

  • Wordpress

    Серия статей о плагинах к движку WordPrress
  • AJAX

    Проекты и продукты, ориентированные на AJAX
  • Новые сервисы Google

    Обзор новых сервисов Google
 

Copyright © 2003—2018 Все права защищены

При использовании материалов сайта ссылка на hostinfo.ru обязательна

  • хостинг от .masterhost
  • Rambler's Top100