Web разработка. Ajax без JavaScript?
Можно ли написать web приложение, использующее Ajax, без JavaScript? Правильный ответ: “Нельзя. Потому что сама технология ajax основана на запросах, которые отправляются с помощью JavaScript”. Но, кто сказал, что мы должны писать JavaScript код сами? Похоже, разработчики библиотеки xajax думали именно так.
Прежде всего, разберем, что представляет собой xajax. Это PHP библиотека, предназначенная для упрощения работы с ajax. Принцип работы заключается в том, что JavaScript код генерируется автоматически, а вы с помощью php функций указываете, где его разместить.
Теперь рассмотрим небольшой пример. Создадим форму, содержащую текстовое поле для ввода имени, и с помощью xajax добавим проверку количества символов в нем. Естественно, проверка должна выполняться после каждого изменения в поле.
В первую очередь качаем библиотеку с официального сайта. И распаковываем архив.
Примечание. Библиотека может быть размещена где угодно. Главное, что бы вы могли подключить файл xajax.inc.php к вашему проекту. Подробнее о подключении библиотек можно почитать в статье “Установка дополнительных библиотек PHP“. Я сделал внутри проекта отдельную папку xajax и распаковал библиотеку в нее.
Добавляем форму на страницу:
Форма содержит одно текстовое поле, в обработчике события onKeyUp которого, выполняется вызов функции xajax_checkInput. Об этой функции немного ниже, а сейчас обратите внимание, на тег <span id="message"> (строка 7). В него будет вставлен результат проверки.
Теперь подключаем библиотеку и создаем объект 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.
-
function checkInput($val) {
-
$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) {
-
$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.
Понравилась статья? Подпишитесь на продолжение 
!
Добавьте эту страницу в 
Опубликовано в Ajax, JavaScript, PHP
Комментарии (6)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Оставить комментарий
Ajax без JavaScript не возможен по определению )))
Что касается Xajax, то пару лет назад я им пользовался и счиатл, что он упрощает работу. Но тогда я просто не умел нормально писать на JS. =)
Сейчас же я говорю всем желающим попробовать Xajax - и близко к нему не подходите, это неповоротливый монстр. Или как многие его называют - “костыль”. Лучше подучите JS и все будет хорошо.
Сейчас для AJAX использую JsHttpRequest Дмитрия Котерова. По мне, это самая удобная библиотека, замечательно показавшая себя на многих моих проектах.
И еще раз: забудьте о существовании Xajax! =))) И учите JS - пригодится ))))
В принципе, в отношении Xajax я согласен.
.
Библиотеку вроде Prototype (или чистый JS) все равно ранно или поздно придется изучать
Но вот JsHttpRequest я не понял. Их примеры работа с Ajax практически повторяют Prototype. По-моему, для использования библиотеки, должна быть веская причина. Например, существенное сокращение количества кода.
@Владимир
А вы внимательно посмотрите ее возможности =) В способе передачи данных различными вариантами… и все поймете.
Так же посмотрите сокращенные вызовы… в общем мне эта библиотека нравиться.
Посмотрел…
Действительно, есть много полезного.
Сократить количество кода, судя по всему, нельзя. Но вот кэширование - это уже интересно. Да и перехват ошибок PHP тоже может пригодится.
А вот формат передачи данных очень похож на JSON. Это, конечно, хорошо, но лучше было бы использовать сам JSON.
Самое главное преимущество по сравнению с Prototype, которое я нашел, это размер кода.
В общем, интересная библиотека. Спасибо. Попробуем.
@Владимир
Вот видите
А формат передачи данных очень хорош. Быстро привыкаешь, а главное если передавать только “чистые данные”, а HTML формировать уже на клиенте при помощи JS, то результат по скорости работы AJAX-модулей превзойдет все ваши ожидания. Это вам не XAjax ))))
XAjax - уже в названии, для русского человека, видно, что это Х аякс ))))
я тоже использую библиотеку Дмитрия Котерова - и меня все устраивает - полностью кросс браузерно и вообще грамотно сделано.