[ Библиотека Xajax. Создание пользовательских приложений ]
[ 1. Обзор ]
Я хочу рассказать про использование технологии Ajax в повседневных web-приложениях на основе уже готовой
библиотеки Ajax – Xajax. Официальный сайт проекта Xajax : http://www.xajaxproject.org . На момент написания статьи для
скачивания был доступен релиз - xajax 0.5 beta3. Вообще для Ajax уже существует большое количество библиотек как
коммерческих, так и бесплатных. Помимо того, что Xajax удобен для использования, к тому же он и бесплатен. Но, к
сожалению документации, на русском языке не так много, попробуем дополнить недостающие пробел в этом.
Технология ajax обеспечивает достаточно прозрачный обмен данными между клиентов и сервером (браузером и web-сервером
непосредственно). А если быть точнее то данные передаются, например, по нажатию кнопки, данные отправляются на сервер,
обрабатываются, если нужно, и выводится результат в браузер в соответствующий блок объектной модели DOM web-страницы. И
самое главное, что все это происходит без перезагрузки страницы, т.е. пользователь видит, как на странице сразу
появляются или исчезают нужные блоки.
Вообще можно создать множество удобных быстрых и практичных элементов основанных на Ajax. Это, например быстрая проверка
ввода логина и пароля пользователя при аутентификации на сайте, практически прозрачный и быстрый вывод полной версии
статьи или новости на обзорной странице, всего лишь кликнув на название. Это может быть мгновенная система голосования.
Или полнофункциональная гостевая книга. Дальше я подробно расскажу и приведу пример полноценной гостевой книги, где
пользователи имеют возможность добавлять новые сообщения, видя сразу результат в зависимости от введенных данных
(сообщение добавляется или выводится сообщение об ошибке). Но об этом позже и по порядку. На сегодняшний день
технологию Ajax во всю уже использует и без того не мало известная компания Google, внедряя ее во все большее число
своих проектов. Тем самым сделал ставку на скорость и удобность приложений (Не зря аналитики и менеджеры компании получают
свой гонорар, от многомиллионной прибыли компании выбирая самые лучшие, удобные и прогрессивные технологии для своих
клиентов).
Я покажу подробно, как сделать вполне работоспособное приложение использую эту кажущуюся на первый взгляд «трудную»
идею и реализацию. На самом деле достаточно разобраться с основными функциями библиотеки, не вникая в саму суть ajax, и
реализация не заставит себя ждать.
[ 2. Средства ]
Для основы будем использовать, пожалуй, самый распространенный язык web-a PHP. Кстати движок Xajax является достаточно
продвинутым в плане функциональности, при этом являясь достаточно компактным и функциональным и достаточным для
большинства проектов. Вообще для полного понимания технологии необходимы следующие достаточно продвинутые знания: язык
гипертекстовой разметки HTML, каскадные таблицы стилей CSS, язык программирования JavaScript, DOM – объектная
модель web – страницы, XML – язык структурированного хранения информации разного типа, а также объект для передачи
информации от браузера серверу-обработчику –XMLHttpRequest. И непосредственно отладочный web – cервер, я использую
apache. Главное, чтоб он был с поддеркой PHP+MySQL (последнее нам необходимо для рассмотрения последнего примера).
Кстати сначала может показаться, что для использования Xajax, потребуется что-то установить дополнительно, на сам
web-сервер или в систему, на самом деле ничего не требуется кроме самой библиотеки, которая должна быть расположена в
отладочной директории web-сервера. На примере я покажу, как этого добиться. И будет возможность сразу запустить готовые
примеры из папок example 1, example 2, example 3, соответственно названиям примеров, чтоб посмотреть библиотеку в работе,
а затем разобрать, что и как работает.
Не будем вдаваться в тонкости технических подробностей устройства библиотеки Xajax, а рассмотрим лишь то, что необходимо
для создания приложения.
И так начнем.
Для начала рассмотрим вкратце объектную модель DOM и ее применение на web странице. В браузере Mozilla Firefox по
умолчанию присутствует плагин для работы с этой моделью, т.е. отображается полная модель web-страницы в ее DOM исполнении.
Для вызова зайти в Tools –> DOM.
Страница разбивается на объекты с иерархией, например:
(HTML разбивается на 2 объекта)
<HTML> -> <HEAD>
-> <BODY>
В свою очередь объект HEAD включат себя объект TITLE, который уже включает текст заголовка web страницы.
Так же и объект BODY включает в себя иерархию подобъектов страницы, например блоки <DIV> или <P> или любые другие
блочные структуры HTML страницы. Именно на этом блочном уровне нам и придется оперировать структурой web страницы,
чтоб заранее расположить в нужном месте, где будет отображаться вывод подгружаемых данных при запросе с сервера нашим
Xajax движком. Тут главное разобраться, как взаимодействуют между собой различные блоки, чтоб в итоге не получилось,
что данные появляются в ненужном нам месте или вообще выходит ошибка XML запроса. Как Ajax определяет, в каком месте
нужно вывести результат запроса? Для этого используются уже элементы каскадных таблиц стилей CSS и метки расположенные
на странице. Например, если используется блок для вывода <DIV> … </DIV> и нам в итоге нужно получить в нем результат
вывода. Этому блоку присваивается уникальное id имя, например:
<DIV id=’resultDIV’>…</DIV>
И уже в зависимости о подгружаемой информации, пусть это будет просто текстовая строка или HTML блок, например
<TABLE>
<TR>
<TD>
…
</TD>
</TR>
</TABLE>
он отобразится уже внутри структуры <DIV id=’resultDIV’>…</DIV>, что и нужно нам получить в итоге. Это можно
рассмотреть на примере гостевой книги, где каждое новое сообщение будет представлять из себя готовый и целый блок HTML
кода, в виде отдельной таблицы. В общем, смысл, и идею вывода я пояснил достаточно подробно.
[ 3. Описание библиотеки ]
Сейчас я рассмотрю основные составляющие библиотеки Xajax по порядку, чтоб иметь более детальное представление, что и
для чего нужно в нашей дальнейшей работе. Что следует использовать, а что нужно оставить не тронутым. Сейчас, распаковав
дистрибутив библиотеки, видим следующие файлы дистрибутива:
/xajax_js - директория содержащая рабочие файлы *js
- xajax_uncompressed.js
- xajax.js
- xajaxResponse.inc.php - библиотека формирования ответа от сервера
- xajaxCompress.php - библиотека сжатия данных
- connect.js - файл описания js - функции
- xajax.inc.php - основная библиотека
- register.server.php - файл, содержащий основные рабочие функции
- register.common.php - дополнительная библиотека с указанием названий вызываемых функций
Для работы необходимо использовать лишь 4 php-скрипта (register.server.php, register.common.php), один индексный файл,
который будет называться index.php и фунцкию Javascript в файле connect.js.
В файле register.server.php содержаться основные рабочие функции, которые мы будем писать, т.е. фактически этот файл
обрабатывает переданные с браузера запросы и выдает нужную информацию. В этом php-файле можно располагать любые
стандартные функции php, будь то работа с базой данных или работа с обычными текстовыми файлами или др.
Файл register.common.php содержит в себе лишь информацию для библиотеки Xajax, т.е. говорит какие функции
содержаться в файле register.server.php (если таковой подключается в нем же) и куда направлять переданный из браузера
запрос для обработки. Также используется js файл connect.js, содержащий в себе функцию отправки данных на сервер, его
содержимое может находиться непосредственно в индексном файле (index.php), куда он собственно и подключается скриптом PHP,
<?php
require ('register.common.php');
$xajax->printJavascript('');
require ('connect.js');
?>
но я его вынес в отдельный файл для наглядности.
Остальное мы трогать не будем, т.к. это является уже полностью готовыми библиотеками не подлежащих изменениям.
Дальше следует создать индексный файл index.php, в который расположим основные элементы и теги, описываемые выше. В
принципе расположение некоторых файлов может быть и иначе, главное чтоб все пути к нашим скриптам были прописаны в
конфигурационных и рабочих файлах, таких как index.php, register.common.php, register.server.php
Вот мы и подошли к тому месту, где начинается самое интересное. Всего я рассмотрю библиотеку на примере 3-х приложений
от простого к сложному.
1.Пример, это будет простой вызов данных с сервера, указанных в переменных.
2.Пример, я создам функцию поиска любого введенного слова на сервере.
3.Пример, где я в заключение представлю полноценную гостевую книгу, работающую с базой MySQL, с
возможность свободно добавлять данные и сообщения. Если сообщение не корректно, то выводить предупреждение.
[ 4.1 Пример № 1 (example 1) ]
В этом примере представлен сам процесс простейшего обмена данными, между клиентом и сервером. Как я говорил,
мы будем рассматривать лишь четыре необходимые скрипта. Данный пример реализует пример вызова любой текстовой
информации по ссылке, например новости из текстового файла или из БД.
Для начала откроем директорию примера №1 (example 1).
Сразу откроем следующие файлы:
1.index.php
2.connect.js
3.register.common.php
4.register.server.php
Рассмотрим файл index.php:
Видим, что в верхнем блоке реализуется инициализация функций JS и создается класс Xajax.
<?php
require ('register.common.php');
$xajax->printJavascript('');
require ('connect.js');
?>
Далее непосредственно теги отправки данных на сервер:
<form id="registrationForm" action="javascript:void(null);">
<a href="#" onclick="xajax_submitForm('1')">1</a>
<a href="#" onclick="xajax_submitForm('2')">2</a>
<a href="#" onclick="xajax_submitForm('3')">3</a>
<hr>
<p id="result">
</p>
</form>
Вот тут начинается интересное, во первых указываем в тегах <form>, указываем идентификатор id=”registrationForm”,
вместо обычного пути отправки в параметре action, указываем “ javascript:void(null);”. Следующие идут ссылки на нужные
нам ресурсы, в данном случае просто цифры (что будет означать каждая цифра мы рассмотрим далее).
<a href="#" onclick="xajax_submitForm('1')">1</a> в общем это обычная ссылка реагирующая на onclick объектом
xajax_submitForm(‘1’) со значением, соответственно равным 1.
Далее в теге <p></p> :
<p id="result">
</p>
Находится уже место под выходную информацию с сервера с идентификатором “result”. И в конце закрывающий тег </form>
Далее: connect.js
<script type="text/javascript">
function submitForm()
{
xajax_submitForm(xajax.getFormValues("registrationForm"));
return false;
}
</script>
Здесь реализована функция submitForm() (подключенная нами в index.php) Нужно обратить внимание на объект xajax_submitForm
с параметром «registrationForm»
Далее register.common.php
<?php
require ('xajax.inc.php'); // Подключается стандартная библиотека движка
$xajax = new xajax("register.server.php");
$xajax->registerFunction("submitForm"); // Функция обработки запроса
$xajax->processRequests();
?>
В первой строке подключаем стандартную библиотеку xajax.inc.php, затем создаем новый класс Xajax и подлючаем наш
«рабочий» файл на сервере, который будет обрабатывать запросы. И в следующей строке передаем название функции, которая
будет работать в “register.server.php”, в данном случае это “submitForm”.
Переходим к последнему файлу register.server.php
Во-первых создаем функцию “submitForm($formData)” с массивом переданных ей от клиента данных $formData. Сразу создаем
новый класс для ответа сервера:
$objResponse = new xajaxResponse();
И вот мы подошли к тому месту, где обрабатываются наши цифры. В данном случае $formData['data'] = значению
указанному при передаче. Далее в зависимости от задачи обрабатывает переданные значения, и присваиваем результат
переменной $result
И в заключение возвращаем браузеру результат выполнения в переменной $objResponse при помощи метода addAssign. В
данном случае данные будут просто заменяться на новые, а если применить метод addAppend, то данные будут
добавляться к уже существующим.
$objResponse -> addAssign("result", "innerHTML", $result);
return $objResponse;
Вместо значений «$result = "123"» можно присваивать любой произвольный текст, из любого источника. На этом первый пример
закончим. Поэкспериментируйте с параметрами для более детального разбора. В следующем я покажу, как использовать для
отправки данных при помощи кнопки (submit).
[ 4.2 Пример № 2 (example 2) ]
Во втором примере рассмотрим поиск по словам на сервере. В данном случае поиск будет вестись по массиву слов,
расположенному в файле register.server.php. Массив слов располагается в $array, в зависимости от нужд, массив можно
заменить на другой объем слов или производить поиск по БД. В общем в данном примере мало что отличается от предыдущего.
Как и прежде в файле index.php
<?php
require ('register.common.php');
$xajax -> printJavascript('');
require ('connect.js');
?>
запускается инициализация Xajax.
Далее:
<form id="registrationForm" action="javascript:void(null);" onsubmit="submitForm();">
<input type="text" name="search" size="30">
<input type="submit" id="submit" value="Вывести">
<hr>
<p id="result">
</p>
</form>
Мы видим, что в теге <form …> добавилось onsubmit="submitForm();" , что говорит о том, что по нажатию кнопки отправки
стартует функция “submitForm()”
Чуть ниже имеется поле для ввода запроса и кнопка отправки, и в теге <p></p> поле для вывода результата запроса. Логика
работы та же сама что и в предыдущем примере, т.е. запрос отсылается на сервер и обрабатывается в файле register.server.php.
Файлы register.common.php и connect.js идентичны предыдущему примеру.
Теперь, в скрипте register.server.php по массиву $array производится поиск нужного нам слова ($word) и в зависимости от
результата выводится в переменную $result и затем передается в индексный файл к клиенту в браузер в тег
<p id="result">
</p>
В отличие от следующего примера, который представляет собой полноценное приложение, использующее БД MySQL, эти два
рассмотренные примера начинают работать сразу после копирования их в директорию вашего web-сервера без предварительной
установки и MySQL.
[ 4.3 Пример № 3 (example 3) ]
Итак, мы подошли к самому важному примеру – гостевой книги на Xajax+MySQL
Чтоб запустить данное приложение, нам потребуется настроенный web-сервер с установленной БД MySQL. Для начала нужно знать
имя пользователя и пароль, под которым вы коннектитесь к вашей БД. По умолчанию прописаны логин и пароль для подключения
root и password соответственно. Для исправления, перед установкой нужно поправить 2 файла:
1.config.php (общий файл настроек)
$user_name – прописать имя пользователя
$user_password – прописать пароль для подключения
$db_name – базу данных в которой будет храниться вся информация гостевой книги.
2.install/index.php (файл установки и создание БД и таблиц)
$user_name – прописать имя пользователя
$user_password – прописать пароль для подключения
$db_name – базу данных в которой будет храниться вся информация
Выше перечисленные параметры должны быть идентичны в обоих файлах. Итак, когда проставлены нужные файлы запускаем из
браузера скрипт из директории install/index.php.
Запускается установка БД гостей книги. Если все прошло успешно и прописано правильно, то внизу вы увидите сообщение
“Create new tables - Successful! ” т.е. база успешно создана, если нет, то проверяем вышеперечисленные параметры сервера.
Далее переходим по ссылке «main guestbook» и оказываемся на главной странице гостевой книги. Теперь гостевая
полностью готова к работе. Кстати в гостевой имеется встроенный фильтр нецензурных слов, которые автоматически заменяются
на - ***.
Данное приложение полностью с поддержкой русского языка, имеется небольшой фильтр по проверке на спам – выражения.
Все фильтры расположены в файле register.server.php.
Как и прежде в файле index.php имеется форма для отправки данных на сервер, работающая по нажатию
onsubmit="submitForm();".
Чуть ниже блок <div id="resultMess"> </div> для вывода результата добавления файла. И блок
<div id="resultDiv">
</div>
Для вывода самого сообщение, если данные корректные.
Ниже уже идет блок вывода, сортировки предыдущий сообщений из БД, ранее уже занесенных.
Как и прежде файлы register.common.php и connect.js идентичны предыдущим примерам.
Теперь рассмотрим более подробно файл register.server.php.
Он содержит в себе 4 функции:
1.remove_bad_words – замена нецензурных слов на ***
2.remove_forbid_symbols – замена запрещенных символов
3.test_spam_words – проверка на спам слова и выражения
4.submitForm – обработка запроса от браузера.
Функция получает данные от клиента, обрабатывает при помощи фильтров, если сообщение корректно то выводит новое сообщение
в браузер, т.е. добавляет к остальным сообщениям и производится запись в БД. Если сообщение не корректно, то выводиться
сообщение об ошибке.
Снизу видим уже два ответа от сервера клиенту:
$objResponse->addAppend("resultMess", "innerHTML", $result);
$objResponse->addAppend("resultDiv", "innerHTML", $message_out);
Т.е. в первом происходит вывод корректности сообщения, а во втором уже само сообщение.
На этом закончим разбор примера гостевой книги.
В зависимости от ваших потребностей уже можно что-то добавлять или удалять по собственному желанию или комбинировать
функции библиотеки.
P.S. Примеры и xajax можно взять из /includes/xajax/
(c) Pit0n, специально для [22H] Magazine.
