Статьи
Ajax без JavaScript?
Можно ли написать web приложение, использующее Ajax, без JavaScript? Правильный ответ: "Нельзя. Потому что сама технология ajax основана на запросах, которые отправляются с помощью JavaScript". Но, кто сказал, что мы должны писать JavaScript код сами? Похоже, разработчики библиотеки xajax думали именно так.
Прежде всего, разберем, что представляет собой xajax . Это PHP библиотека, предназначенная для упрощения работы с ajax. Принцип работы заключается в том, что JavaScript код генерируется автоматически, а вы с помощью php функций указываете, где его разместить.
Теперь рассмотрим небольшой пример. Создадим форму, содержащую текстовое поле для ввода имени, и с помощью xajax добавим проверку количества символов в нем. Естественно, проверка должна выполняться после каждого изменения в поле.
В первую очередь качаем библиотеку с официального сайта. И распаковываем архив.
Примечание
Библиотека может быть размещена где угодно. Главное, что бы вы могли подключить файл xajax.inc.php к вашему проекту. Я сделал внутри проекта отдельную папку xajax и распаковал библиотеку в нее.
Добавляем форму на страницу:
<form action="#" id="testform" method="post">
<p>Введите имя (от 3 до 15 символов)</p>
<p>
<input type="text" name="username" size="15" id="username"
onKeyUp="xajax_checkInput(document.getElementById(’username’).value);" />
<span id="message"></span>
</p>
</form>
Форма содержит одно текстовое поле, в обработчике события onKeyUp которого, выполняется вызов функции xajax_checkInput . Об этой функции немного ниже, а сейчас обратите внимание, на тег <span id="message"> . В него будет вставлен результат проверки.
Теперь подключаем библиотеку и создаем объект xajax .
require_once("xajax/xajax.inc.php");
$objXajax = new xajax();
После этого регистрируем функцию, выполняющую проверку имени (checkInput ) и вызываем метод processRequest() , который дает возможность xajax обрабатывать запросы. Обратите внимание, что мы регистрируем функцию checkInput , но в обработчике события onKeyUp добавляем к ее названию приставку xajax_ .
$objXajax->registerFunction("checkInput");
$objXajax->processRequest();
Внимание: метод processRequest() должен быть вызван до того, как сервер начнет отправлять страницу браузеру, т.е. лучше всего вызвать этот метод в самом начале страницы.
Вставляем JavaScript код. Для этого в заголовок страницы (между тегами <head> и </head> ) добавляем следующий код:
$objXajax->printJavascript("xajax/");
В качестве параметра методу printJavascript передается путь к библиотеке.
Осталось написать функцию checkInput .
<?php
function checkInput($val) {
if ( isset($val) && (mb_strlen($val, 'UTF-8') >= 3) && (mb_strlen($val, 'UTF-8') <= 15) ) {
$res = '<span style="color:green">Правильно</span>';
} else {
$res = '<span style="color:red">Ошибка</span>';
}
$objResponse = new xajaxResponse();
$objResponse->assign("message", "innerHTML", $res);
return $objResponse;
}
?>
В строках 2-7 мы определили количество символов в имени и сформировали строку с ответом. Если в имени от 3-х до 15-ти символов, то выводим слово «Правильно» зеленого цвета, если нет – «Ошибка» красного.
Затем создаем объект xajaxResponse, который содержит ответ сервера, и вызываем его метод assign . Этот метод присваивает нашу строку ($res ) параметру innerHTML тега, у которого id="message" . Другими словами, это означает, что наша строка с результатами будет вставлена между тегами <span id="message"></span> .
Теперь посмотрите на весь код целиком.
<?php
require_once("xajax/xajax.inc.php");
$objXajax = new xajax();
$objXajax->registerFunction("checkInput");
$objXajax->processRequest();
function checkInput($val) {
if ( isset($val) && (mb_strlen($val, 'UTF-8') >= 3) && (mb_strlen($val, 'UTF-8') <= 15) ) {
$res = '<span style="color:green">Правильно</span>';
} else {
$res = '<span style="color:red">Ошибка</span>';
}
$objResponse = new xajaxResponse();
$objResponse->assign("message", "innerHTML", $res);
return $objResponse;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Проверка введенных значений (XAjax)</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="checkinput.css" />
<?php $objXajax->printJavascript("xajax/"); ?>
</head>
<body>
<form action="#" id="testform" method="post">
<p>Введите имя (от 3 до 15 символов)</p>
<p>
<input type="text" name="username" size="15" id="username"
onKeyUp="xajax_checkInput(document.getElementById('username').value);" />
<span id="message"></span>
</p>
</form>
</body>
</html>
Как видите, мы использовали JavaScript всего один раз. Только для того чтобы получить значение, введенное пользователем. Это, безусловно, основное преимущество данной библиотеки.
Результаты работы приложения показаны на скриншотах.
Вместо заключения
У меня сложилось двоякое впечатление о xajax . С одной стороны минимум JavaScript, что очень хорошо. Но с другой – существуют JavaScript библиотеки, например, prototype, которые позволяют отправить ajax запрос буквально с помощью пары строк кода. К тому же, xajax ориентирован на работу с ajax запросами, а не с JavaScript вообще.
Поэтому, я думаю, использовать xajax имеет смысл, только если нужна исключительно поддержка ajax. Как только появится необходимость использовать JavaScript для чего-нибудь еще (перемещение элементов страницы, различные эффекты и т.п.), то лучше воспользоваться библиотеками вроде prototype и scriptaculous.
Источник: http://www.simplecoding.org
|