Web разработка. Ajax без JavaScript?

Владимир | | Ajax, JavaScript, PHP.

картинка xajax
Можно ли написать web приложение, использующее Ajax, без JavaScript? Правильный ответ: «Нельзя. Потому что сама технология ajax основана на запросах, которые отправляются с помощью JavaScript». Но, кто сказал, что мы должны писать JavaScript код сами? Похоже, разработчики библиотеки xajax думали именно так.

Прежде всего, разберем, что представляет собой xajax. Это PHP библиотека, предназначенная для упрощения работы с ajax. Принцип работы заключается в том, что JavaScript код генерируется автоматически, а вы с помощью php функций указываете, где его разместить.

Теперь рассмотрим небольшой пример. Создадим форму, содержащую текстовое поле для ввода имени, и с помощью xajax добавим проверку количества символов в нем. Естественно, проверка должна выполняться после каждого изменения в поле.

В первую очередь качаем библиотеку с официального сайта. И распаковываем архив.

Примечание. Библиотека может быть размещена где угодно. Главное, что бы вы могли подключить файл xajax.inc.php к вашему проекту. Подробнее о подключении библиотек можно почитать в статье «Установка дополнительных библиотек 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"> (строка 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) {
	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 (ошибка) Скриншот приложения xajax (правильно)

Вы можете скачать архив с этим приложением.

Вместо заключения
У меня сложилось двоякое впечатление о xajax. С одной стороны минимум JavaScript, что очень хорошо.
Но с другой – существуют JavaScript библиотеки, например, prototype, которые позволяют отправить ajax запрос буквально с помощью пары строк кода. К тому же, xajax ориентирован на работу с ajax запросами, а не с JavaScript вообще.

Поэтому, я думаю, использовать xajax имеет смысл, только если нужна исключительно поддержка ajax. Как только появится необходимость использовать JavaScript для чего-нибудь еще (перемещение элементов страницы, различные эффекты и т.п.), то лучше воспользоваться библиотеками вроде prototype и scriptaculous.

Интересно почитать

Курсы по SEO, лучшее для продвижения сайта в Минске

  • Ajax без JavaScript не возможен по определению )))

    Что касается Xajax, то пару лет назад я им пользовался и счиатл, что он упрощает работу. Но тогда я просто не умел нормально писать на JS. =)

    Сейчас же я говорю всем желающим попробовать Xajax — и близко к нему не подходите, это неповоротливый монстр. Или как многие его называют — «костыль». Лучше подучите JS и все будет хорошо.

    Сейчас для AJAX использую JsHttpRequest Дмитрия Котерова. По мне, это самая удобная библиотека, замечательно показавшая себя на многих моих проектах.

    И еще раз: забудьте о существовании Xajax! =))) И учите JS — пригодится ))))

  • Ajax без JavaScript не возможен по определению )))

    Что касается Xajax, то пару лет назад я им пользовался и счиатл, что он упрощает работу. Но тогда я просто не умел нормально писать на JS. =)

    Сейчас же я говорю всем желающим попробовать Xajax — и близко к нему не подходите, это неповоротливый монстр. Или как многие его называют — «костыль». Лучше подучите JS и все будет хорошо.

    Сейчас для AJAX использую JsHttpRequest Дмитрия Котерова. По мне, это самая удобная библиотека, замечательно показавшая себя на многих моих проектах.

    И еще раз: забудьте о существовании Xajax! =))) И учите JS — пригодится ))))

  • В принципе, в отношении Xajax я согласен.
    Библиотеку вроде Prototype (или чистый JS) все равно ранно или поздно придется изучать 🙂 .

    Но вот JsHttpRequest я не понял. Их примеры работа с Ajax практически повторяют Prototype. По-моему, для использования библиотеки, должна быть веская причина. Например, существенное сокращение количества кода.

  • В принципе, в отношении Xajax я согласен.
    Библиотеку вроде Prototype (или чистый JS) все равно ранно или поздно придется изучать 🙂 .

    Но вот JsHttpRequest я не понял. Их примеры работа с Ajax практически повторяют Prototype. По-моему, для использования библиотеки, должна быть веская причина. Например, существенное сокращение количества кода.

  • @Владимир
    А вы внимательно посмотрите ее возможности =) В способе передачи данных различными вариантами… и все поймете.

    Так же посмотрите сокращенные вызовы… в общем мне эта библиотека нравиться.

  • @Владимир
    А вы внимательно посмотрите ее возможности =) В способе передачи данных различными вариантами… и все поймете.

    Так же посмотрите сокращенные вызовы… в общем мне эта библиотека нравиться.

  • Посмотрел…

    Действительно, есть много полезного.

    Сократить количество кода, судя по всему, нельзя. Но вот кэширование — это уже интересно. Да и перехват ошибок PHP тоже может пригодится.
    А вот формат передачи данных очень похож на JSON. Это, конечно, хорошо, но лучше было бы использовать сам JSON.

    Самое главное преимущество по сравнению с Prototype, которое я нашел, это размер кода.

    В общем, интересная библиотека. Спасибо. Попробуем.

  • Посмотрел…

    Действительно, есть много полезного.

    Сократить количество кода, судя по всему, нельзя. Но вот кэширование — это уже интересно. Да и перехват ошибок PHP тоже может пригодится.
    А вот формат передачи данных очень похож на JSON. Это, конечно, хорошо, но лучше было бы использовать сам JSON.

    Самое главное преимущество по сравнению с Prototype, которое я нашел, это размер кода.

    В общем, интересная библиотека. Спасибо. Попробуем.

  • @Владимир
    Вот видите 🙂
    А формат передачи данных очень хорош. Быстро привыкаешь, а главное если передавать только «чистые данные», а HTML формировать уже на клиенте при помощи JS, то результат по скорости работы AJAX-модулей превзойдет все ваши ожидания. Это вам не XAjax ))))

    XAjax — уже в названии, для русского человека, видно, что это Х аякс ))))

  • @Владимир
    Вот видите 🙂
    А формат передачи данных очень хорош. Быстро привыкаешь, а главное если передавать только «чистые данные», а HTML формировать уже на клиенте при помощи JS, то результат по скорости работы AJAX-модулей превзойдет все ваши ожидания. Это вам не XAjax ))))

    XAjax — уже в названии, для русского человека, видно, что это Х аякс ))))

  • я тоже использую библиотеку Дмитрия Котерова — и меня все устраивает — полностью кросс браузерно и вообще грамотно сделано.

  • я тоже использую библиотеку Дмитрия Котерова — и меня все устраивает — полностью кросс браузерно и вообще грамотно сделано.

  • чето не особо догнал, наверное потому что сплю уже ))
    перечитаю

  • чето не особо догнал, наверное потому что сплю уже ))
    перечитаю

  • Влад

    ХЕЛП!!!!
    Начал юзать хаякс.
    есть 2 текстовых поля, куда что-то вводиться. есть кнопка при нажатии на которую вызывается фукция, что подключена через хаякс. если информация заполнена правильно — она добавляется в БД. Если такая информация уже есть в БД, то выводится соответствующее сообщение.

    Столкнулся с такой проблемой: сначала, когда ввожу данные первый раз — все ок, потом ввожу другие данные в эти поля — пишет, что такое уже есть в БД, хоть его реально НЕТ. Когда нажимаю в браузере «обновить» — снова на 2-й раз не хочет добавлять данные.
    Как решить проблему? Помогите, может кто сталкивался…

    • Так сложно сказать. Присылайте код.

      Очень похоже, что проблема в запросе к БД, с помощью которого вы проверяете есть такая информация в БД или нет.

      • Влад

        Вот часть кода. Если 1 раз попытаться добавить админа с уже существующим логином(login1) в БД, выскочит, что такой уже есть. Но потом если изменить в форме логин(login2) на другой, все равно пишет, что такой логин есть(login1) и выводит инфу о логине1(хоть я хочу добавить логин2). Может быть это проблема с кешированием?

        if($ad!==» && $p1!==» && $p2!==» && $mail!==» && $dost!==»)
        {
        $query0 = «SELECT * FROM admin WHERE login='».$ad.»' LIMIT 1";
        if($qr=mysql_query($query0))
        {
        $fr = mysql_fetch_array($qr);
        if($fr['login']==$ad)
        {
        $m = «Такой логин уже есть в базе данных(id=«.$fr['id'].»): электронный адрес: «.$fr['email']. «доступ: «.$fr['dostup'].»«;
        $objResponse->assign(«message»,»innerHTML», $m);
        return $objResponse;
        }
        }
        else
        {$objResponse->assign(«message»,»innerHTML», «Не удалось выполнить запрос на чтение с базы данных. Попробуйте позже.»);return $objResponse;}

        if($p1===$p2)
        {
        $p1 = md5($p1);
        $query = «INSERT INTO admin VALUES(»,'».$ad.»','».$p1.»','».$dost.»','».$mail.»')»;
        $subject = $ad; // строка
        $pattern = '/[а-яА-Я]+/'; // шаблон
        preg_match($pattern, $subject, $matches);
        if ( sizeof($matches) >0 )
        {
        $objResponse->assign(«message»,»innerHTML», «Ошибка! Логин может быть только латинские буквы!»);
        }
        else
        {
        if(mysql_query($query))
        {
        $objResponse->assign(«message»,»innerHTML», «Данные успешно добавлены.»);
        }
        else
        $objResponse->assign(«message»,»innerHTML», «Не удалось добавить данные. Попробуйте позже.»);
        }
        }
        else
        {
        $objResponse->assign(«message»,»innerHTML», «Пароли не совпадают!»);
        return $objResponse;
        }
        }
        else
        $objResponse->assign(«message»,»innerHTML», «Заполните пожалуйста все поля!»);
        return $objResponse;

        • Я имел ввиду отправить скрипт мне по почте, чтобы я мог его запустить (и желательно добавить файл со структурой базы).
          Например, я не могу найти в этом фрагменте где используется кеширование.

        • Дмитрий Федоров

          Когда запрос заканчивается неудачно (нет такого пользователя), массив $fr
          не обновляется или обнлвляется странно.

        • Результат выполнения запроса нужно проверять в любом случае.

  • Влад

    ХЕЛП!!!!
    Начал юзать хаякс.
    есть 2 текстовых поля, куда что-то вводиться. есть кнопка при нажатии на которую вызывается фукция, что подключена через хаякс. если информация заполнена правильно — она добавляется в БД. Если такая информация уже есть в БД, то выводится соответствующее сообщение.

    Столкнулся с такой проблемой: сначала, когда ввожу данные первый раз — все ок, потом ввожу другие данные в эти поля — пишет, что такое уже есть в БД, хоть его реально НЕТ. Когда нажимаю в браузере «обновить» — снова на 2-й раз не хочет добавлять данные.
    Как решить проблему? Помогите, может кто сталкивался…

    • Так сложно сказать. Присылайте код.

      Очень похоже, что проблема в запросе к БД, с помощью которого вы проверяете есть такая информация в БД или нет.

      • Влад

        Вот часть кода. Если 1 раз попытаться добавить админа с уже существующим логином(login1) в БД, выскочит, что такой уже есть. Но потом если изменить в форме логин(login2) на другой, все равно пишет, что такой логин есть(login1) и выводит инфу о логине1(хоть я хочу добавить логин2). Может быть это проблема с кешированием?

        if($ad!==» && $p1!==» && $p2!==» && $mail!==» && $dost!==»)
        {
        $query0 = «SELECT * FROM admin WHERE login='».$ad.»' LIMIT 1";
        if($qr=mysql_query($query0))
        {
        $fr = mysql_fetch_array($qr);
        if($fr['login']==$ad)
        {
        $m = «Такой логин уже есть в базе данных(id=«.$fr['id'].»): электронный адрес: «.$fr['email']. «доступ: «.$fr['dostup'].»«;
        $objResponse->assign(«message»,»innerHTML», $m);
        return $objResponse;
        }
        }
        else
        {$objResponse->assign(«message»,»innerHTML», «Не удалось выполнить запрос на чтение с базы данных. Попробуйте позже.»);return $objResponse;}

        if($p1===$p2)
        {
        $p1 = md5($p1);
        $query = «INSERT INTO admin VALUES(»,'».$ad.»','».$p1.»','».$dost.»','».$mail.»')»;
        $subject = $ad; // строка
        $pattern = '/[а-яА-Я]+/'; // шаблон
        preg_match($pattern, $subject, $matches);
        if ( sizeof($matches) >0 )
        {
        $objResponse->assign(«message»,»innerHTML», «Ошибка! Логин может быть только латинские буквы!»);
        }
        else
        {
        if(mysql_query($query))
        {
        $objResponse->assign(«message»,»innerHTML», «Данные успешно добавлены.»);
        }
        else
        $objResponse->assign(«message»,»innerHTML», «Не удалось добавить данные. Попробуйте позже.»);
        }
        }
        else
        {
        $objResponse->assign(«message»,»innerHTML», «Пароли не совпадают!»);
        return $objResponse;
        }
        }
        else
        $objResponse->assign(«message»,»innerHTML», «Заполните пожалуйста все поля!»);
        return $objResponse;

        • Я имел ввиду отправить скрипт мне по почте, чтобы я мог его запустить (и желательно добавить файл со структурой базы).
          Например, я не могу найти в этом фрагменте где используется кеширование.

  • Мужик, напиши, какую версию xAjax ты здесь подключал. И к какой версии CI.

  • Мужик, напиши, какую версию xAjax ты здесь подключал. И к какой версии CI.

  • MVC больше не нужен? Какое отношение к codeigniter имеет эта статья?

  • MVC больше не нужен? Какое отношение к codeigniter имеет эта статья?

  • Я вроде ничего не писал в этой статье о CodeIgniter…
    А версию xAjax я сейчас не вспомню, все-таки больше года прошло 🙂

  • Я вроде ничего не писал в этой статье о CodeIgniter…
    А версию xAjax я сейчас не вспомню, все-таки больше года прошло 🙂

  • ссылка на источник библиотеки xajax теперь http://xajax-project.org/