Схема взаимодействия AJAX

Зачем строить атомный подводный ракетоносец, когда надо просто перебраться через небольшую горную речку? Вполне возможно, что и в случае с использованием содержимого, обновляемого без перезагрузки страницы, нет никакой насущной необходимости применять высокоинтегрированные среды разработки, которые имеют встроенные AJAX-библиотеки. Иногда вполне достаточно использовать простейшее решение, которое тем не менее позволяет выполнять свою основную функцию без сбоев и практически в большинстве современных браузеров. Сегодняшняя статья будет посвящена низкоуровневой библиотеке web 2.0 — Sajax.

Каждый день в Интернете появляются сайты. Один проект содержит личную информацию, которая никому больше не нужна, кроме как создавшему ее пользователю. Другой настолько специфичен, что, бывает, его и за неделю не посетит тот, кому нужно его содержимое. Потому что это никому не нужно и не интересно. И только часть проектов активно посещается каждый день. Причем бывает, что, посмотрев на удавшуюся бизнес-концепцию, "добрые" программисты садятся и "клепают" точно такой же, но свой сайтик, который стараются всеми правдами и неправдами раскрутить хоть в полпроцента посещений его знаменитого собрата. Как же защищаться от этого пагубного явления, спросите вы? А стоит ли защищаться, ведь достаточно сделать некоторую часть проекта в стиле AJAX, постоянно добавлять новые функции, эволюционировать уже начатые разработки, чтобы результат все больше и больше подходил пользователям. Почему бы не добиться такого эффекта, когда ваша постоянная аудитория каждый день ждет, чем же вы ее удивите сегодня.

"Сегодня я сделаю лучший сайт Интернета", — обычно именно так рассуждает севший первый раз за сайт-визитку программист-новичок. Планов масса, но как же их все реализовать? А ведь, оказывается, есть легкий способ прикоснуться, так сказать, к будущему. Попробовать, что называется, web 2.0, при этом не тратя на борьбу с замысловатым интерфейсом дни, а бывает, что даже и недели. Сегодня речь пойдет про очень простой AJAX-интерфейс, который можно интегрировать в практически произвольный сайт. Причем сделать это можно достаточно быстро. А вот переводить вообще весь сайт в режим web 2.0 с помощью этой библиотеки можно шаг за шагом, то есть постепенно и небольшими усилиями.

Название библиотеки Simple Ajax означает простой Ajax. В принципе эта аббревиатура достаточно точно сориентирует вас насчет характера поведения этого программного продукта. Мало того что библиотека проста, так за это с вас еще и не захотят денег. Впрочем, это уже нисколько не удивляет, когда профессиональные инструменты, имеющие отношения к LAMP, как правило, свободны для распространения и открыты для изменения.

А все это означает, что библиотеку Sajax можно свободно скачать с ее жеофициального сайта. Сама она распространяется по свободной лицензии BSD, поэтому и ее использование в ваших проектах абсолютно бесплатное. Правда, вы потратите немного времени на исследование тех несложных примеров, которые прилагаются к пакету установки. Вообще, было бы замечательно изучить то, что позволяет делать Sajax, перед началом ее внедрения куда либо. Ведь примеры не только достаточно наглядны и позволяют начать ориентироваться в особенностях этого ПО. Они же еще используются и в роли своего рода документации по библиотеке. Поэтому стоит их просмотреть хотя бы поверхностно, перед тем как начать интегрировать возможности Sajax в свой проект.

Пример, который идет в инсталляции

Фактически весь смысл использования Sajax сводится к более простому оформлению вызовов Javascript-функций, для чего применяется простой транслятор входных данных. Причем все это удалось засунуть всего лишь в 9 килобайт исходного кода библиотеки. Собственно, в установочном пакете поставляется сразу несколько версий Sajax для разных сред программирования. Например, библиотека для php находится в одноименной директории. Именно там берите файл Sajax.php и размещайте его в каталоге вашего проекта, который предназначен для классов сторонних разработчиков.

Процесс подключения Sajax к коду состоит в указании в инициализационных процедурах следующего кода. Понятно, что он должен будет вызываться во всех скриптах, которые заняты выводом в браузер:

  
require_once(  "./classes/Sajax.php");  
$sajax_request_type  =  "GET";  
sajax_init();    

С помощью присвоения значения глобальной переменной $sajax_request_type определяется, какого типа запросы будут передаваться в ваш скрипт. Сразу отмечу, если ваша задача использует расширенную защиту от sql-инъекций, следует более внимательно отнестись к данным, которые принимаются скриптом из супермассивов $_POST/$_GET. К слову, входящих переменных, которые необходимы библиотеке для функционирования, всего лишь четыре. Первая их них rs — это строка с именем экспортируемой функции. Вторая rst — строка, третья rsrnd — это число, четвертая rsargs — содержит массив переданных значений. Поэтому имеет смысл отдельно организовать проверку данных, которые передаются именно в них, чтобы обезопаситься от неожиданных сбоев в работе программы. Хорошей идеей будет, по крайней мере, проанализировать их тип и длину и все нежелательные данные отсеять.

Итак, после инициализации данных, необходимых для работы библиотеке, следует задать функцию, которая будет генерировать содержимое для div-блока в выводе браузера. Почему используется именно этот тип содержимого? Просто так удобней и библиотека позволяет работать непосредственно с html-элементами этого типа по id-атрибуту. Таким образом, сильно минимизируется длина Java-Script-кода, который вы будете добавлять в свои шаблоны. Рассмотрим конкретное решение, которое будет состоять в выводе нескольких значений из базы данных в том или ином порядке в зависимости от выбранного метода сортировки:

  
<?  
        require_once("Sajax.php");  
        require_once("./classes/db.class.php");  
//  функция,  для  вывода  
        function  wp_get_posts()    
        {  
            global  $mdb;  
            $arg_sort  =  isset($_GET['rsargs'][0])?$_GET['rsargs'][0]:"";  
            switch  (  $arg_sort  )  
            {  
                default:    
                case  1:  
                        $order  =  "post_date  ASC";      
                        break;  
                case  0:  
                        $order  =  "post_date  DESC";      
                        break;  
            }  
  
            $res  =  $mdb->query(  $sql  =  "SELECT  *  FROM  wp_posts  ORDER  BY  $order"  );  
            $str  =  "<table>";  
            $str  .=  "<tr><td>Запрос:  $sql</td></tr>";  
            $str  .=  "<tr><td>Дата  поста</td></tr>";  
            while  (  $o  =  mysql_fetch_object($res)  )  
                $str  .=  "<tr><td>$o->post_date</td></tr>";  
            return  $str  .=  "</table>";  
        }  
        sajax_init();  
        sajax_export(  "wp_get_posts"  );  
        sajax_handle_client_request();      
?>  
<html>  
  <head>  
<script>  
        function  print_result(v)  {  
                alert(v);  
        }  
<?  
        sajax_show_javascript();  
?>  
</script>  
          
</head>  
<body>    
  
<button  onclick="sajax_target_id  =  'time';  x_wp_get_posts(0,'');">Сортировка  по  убыванию  дате  </button>  
<button  onclick="sajax_target_id='time';  x_wp_get_posts(1,'');">Сортировка  по  возрастанию  даты</button>  
  
<div  id="time">  
<em>Для  загрузки  данных  нажмите  одну  из  кнопок...</em>  
</div>  
  
</body>  
</html>  

Пример с базой данных

Данное приложение использует класс, который выполняет запросы к базе MySQL с помощью метода query(), который возвращает стандартный mysql-результат. Конечно, можно было бы все сделать и без объектной обертки, но тогда было бы очень проблематично отлавливать ошибки базы данных, ведь Sajax предотвращает вывод страниц, которые не имеют ошибок компиляции, но лишь "ошибаются" в запросах.

Фактически данный программный пример можно было бы разбить на несколько логических частей. Первая, и самая главная, — это функция, которая выводит таблицу с данными. В использованном примере показываются даты постов в базе данных WordPress. По умолчанию они сортируются по возрастанию даты. Однако если в аргументе функции инициализации вывода указать первый параметр, то сортировка может быть изменена.

Собственно, сама функция, которая используется для вывода, аналогична по названию той, что экспортирована в Sajax. Единственное — к ее имени добавляется префикс «x_». Это делается для того, чтобы функции, которые используются в качестве интерфейса Sajax, как-то выделялись из общего потока.

Обратите внимание, что вызов функции html-кода предваряется присвоением js-переменной   sajax_target_id='time', что фактически дает директиву, в какой именно div-элемент пойдет вывод. Сразу после вызова интерфейсной функции "х_*" значение этой переменной желательно обнулить.

Как видите, использование библиотеки фактически заключается в следующих основных принципах:

• экспортируется вывод специально объявленной php-функции;
• в качестве входных параметров в инициализирующей javascript-функции используются только числа, причем входных параметров должно быть как минимум два;
• ошибки MySQL не выводятся в стандартный поток ввода-вывода, поэтому их желательно обрабатывать отдельно.

Все приведенные выше принципы не мешают интегрировать библиотеку Sajax в код, который осуществляет вывод через шаблонизатор Smarty. Единственной хитростью, пожалуй, будет использование php-функций управления потоком вывода (ob_*) для отлова кода, который вставляется в заголовок html-страницы. Можно использовать, к примеру, такой вот код, который, кстати, почти идентичен по функциональности примеру с часами, который прилагается к библиотеке, за тем маленьким исключением, что вывод идет через Smarty:

index.php:   
<?php  
  
    require_once(  "./smarty/Smarty.class.php");  
    require_once(  "./classes/Sajax.php");  
    $smarty  =  new  Smarty;  
  
    function  sajax_export_function()    
    {  
          return  "<b><br>".date("Y-m-d  H:i:s")."</b>";  
    }  
  
    $sajax_request_type  =  "GET";  
    sajax_init(  );  
    sajax_export(  "sajax_export_function"  );  
    sajax_handle_client_request(  );  
  
    ob_start();  
    sajax_show_javascript();  
    $smarty->assign(  "sajax_header_code",  ob_get_contents()  );  
    ob_end_clean();  
  
    $smarty->display(  "index.tpl"  );  
?>  

Пример со Smarty

index.tpl:   
<html>  
<head>  
  <title>Дата  на  сервере</title>  
  <script>  
  {$sajax_header_code}  
  {literal}  
  function  show_me(date_server)  {  
                  document.getElementById("date_div").innerHTML  =  date_server;  
  }  
  
  function  get_date()    
  {  
  
    //put  the  return  of  php's  show_now  func  
    //to  the  javascript  show_me  func  as  a  parameter  
    x_sajax_export_function(show_me);  
  
    //do  it  every  1  second  
    setTimeout("get_date()",  2000);  
  }  
  </script>  
{/literal}  
</head>  
<body    onload="get_date();">  
Серверная  дата:  <div  id="date_div">(загрузка...)</div>  
</body>  
</html>  

В этом примере создается функция sajax_export_function, которая затем объявляется как экспортируемая. То есть в html-коде она вызывается с префиксом «x_». В коде шаблона использована "вечная" рекурсия функции get_date() с периодом 1 сек для автоматического обновления данных в браузере. Таким образом, перезагрузки страницы не происходит, а данные обновляются.

Sajax — это простая и универсальная библиотека, которая позволяет провести мост между php-приложением и отображаемым в браузере содержимым без перезагрузки страниц последнего. Конечно же, никакой магии в этих возможностях библиотеки нет. Используется стандартный объект XMLHttpRequest, который и обеспечивает передачу данных. Однако даже такой простой интерфейс позволяет сделать работу с вашим приложением более приближенной к десктопной модели ПО, то есть более удобной для пользователя. И при этом все это будет достигнуто с помощью каких-то девяти килобайт кода. Именно столько места и займет Sajax на вашем серверном диске.