Создание простейших приложений web 2.0 с Sajax
использование Sajax
Зачем строить атомный подводный ракетоносец, когда надо просто перебраться через небольшую горную речку? Вполне возможно, что и в случае с использованием содержимого, обновляемого без перезагрузки страницы, нет никакой насущной необходимости применять высокоинтегрированные среды разработки, которые имеют встроенные AJAX-библиотеки. Иногда вполне достаточно использовать простейшее решение, которое тем не менее позволяет выполнять свою основную функцию без сбоев и практически в большинстве современных браузеров. Сегодняшняя статья будет посвящена низкоуровневой библиотеке web 2.0 — Sajax.
Каждый день в Интернете появляются сайты. Один проект содержит личную информацию, которая никому больше не нужна, кроме как создавшему ее пользователю. Другой настолько специфичен, что, бывает, его и за неделю не посетит тот, кому нужно его содержимое. Потому что это никому не нужно и не интересно. И только часть проектов активно посещается каждый день. Причем бывает, что, посмотрев на удавшуюся бизнес-концепцию, «добрые» программисты садятся и «клепают» точно такой же, но свой сайтик, который стараются всеми правдами и неправдами раскрутить хоть в полпроцента посещений его знаменитого собрата. Как же защищаться от этого пагубного явления, спросите вы? А стоит ли защищаться, ведь достаточно сделать некоторую часть проекта в стиле AJAX, постоянно добавлять новые функции, эволюционировать уже начатые разработки, чтобы результат все больше и больше подходил пользователям. Почему бы не добиться такого эффекта, когда ваша постоянная аудитория каждый день ждет, чем же вы ее удивите сегодня.
«Сегодня я сделаю лучший сайт Интернета», — обычно именно так рассуждает севший первый раз за сайт-визитку программист-новичок. Планов масса, но как же их все реализовать? А ведь, оказывается, есть легкий способ прикоснуться, так сказать, к будущему. Попробовать, что называется, web 2.0, при этом не тратя на борьбу с замысловатым интерфейсом дни, а бывает, что даже и недели. Сегодня речь пойдет про очень простой AJAX-интерфейс, который можно интегрировать в практически произвольный сайт. Причем сделать это можно достаточно быстро. А вот переводить вообще весь сайт в режим web 2.0 с помощью этой библиотеки можно шаг за шагом, то есть постепенно и небольшими усилиями.
Название библиотеки Simple Ajax означает простой Ajax. В принципе эта аббревиатура достаточно точно сориентирует вас насчет характера поведения этого программного продукта. Мало того что библиотека проста, так за это с вас еще и не захотят денег. Впрочем, это уже нисколько не удивляет, когда профессиональные инструменты, имеющие отношения к LAMP, как правило, свободны для распространения и открыты для изменения.
А все это означает, что библиотеку Sajax можно свободно скачать с ее жеофициального сайта. Сама она распространяется по свободной лицензии BSD, поэтому и ее использование в ваших проектах абсолютно бесплатное. Правда, вы потратите немного времени на исследование тех несложных примеров, которые прилагаются к пакету установки. Вообще, было бы замечательно изучить то, что позволяет делать Sajax, перед началом ее внедрения куда либо. Ведь примеры не только достаточно наглядны и позволяют начать ориентироваться в особенностях этого ПО. Они же еще используются и в роли своего рода документации по библиотеке. Поэтому стоит их просмотреть хотя бы поверхностно, перед тем как начать интегрировать возможности Sajax в свой проект.
 |
| Пример, который идет в инсталляции |
С чего начинается AJAX
Фактически весь смысл использования 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 на вашем серверном диске.
Ссылки по теме
Источник: hostinfo.ru
