Введение в AJAX. Использование библиотеки JSHTTPRequest

июля.03.2008     Web-программирование > AJAX     (3)

В последнее время в сети становится все труднее найти сайт, в котором не применяется технология AJAX. Для начала, ответим на вопрос: «Что такое AJAX?».

AJAX – Asynchronous JavaScript and XML – представляет собой совокупность технологий JavaScript и XML, позволяющая организовать интерактивный и динамический интерфейс веб-приложений, предоставляющий возможность обновления данных без полной перезагрузки страницы.

Смысл AJAX-а заключается в том, что он асинхронно взаимодействует с сервером, передавая ему те или иные запросы, затем получает ответ и с помощью JavaScript реализует отображение соответствующей информации на странице. Необходимо запомнить, что AJAX работает не только на стороне клиента, но и на стороне сервера!

Существует множество ситуаций, в которых применение AJAX является достаточно необходимым. Важно лишь помнить, что чрезмерное использование этой технологии может принести не только плюсы, но и минусы (в юзабилити проекта, в индексации поисковыми машинами, в SEO и пр. – об этом мы поговорим в одной из следующих статей).

Рассмотрим наиболее распространённые случаи применения технологии AJAX.

1. Регистрационная форма. Зачем заставлять пользователя, после ввода регистрационных данных, жать на кнопку «Регистрация», чтобы после обновления всей страницы увидеть ошибки о том, что данный логин или e-mail уже занят? Есть достаточно простой способ облегчить жизнь пользователю и сделать более “user friendly” интерфейс. Для этого достаточно после ввода логина, сделать с использованием AJAX запрос к определённому скрипту на сервере, который проверит, есть ли в базе уже такой логин или нет. Есть есть – сразу же выдать ошибку пользователю. Таким образом, интерфейс становится более удобным и понятным, пользователь экономит свое время, сервер не получает избыточной нагрузки для отображения всей страницы в случае каких-либо ошибок.

2. Галереи фотографий. Один из самых распространенных способов организации галерей – это скопление множества уменьшенных изображений, по щелчку на одно из которых открывается новое окно с полным вариантов фотографии. Будем говорить прямо – это не самый красивый и хороший способ. AJAX и в этой ситуации позволяет сделать все удобно и красиво. Как вариант: на страницу загружается сразу одна большая фотография, под ней идет лента уменьшенных изображений. По щёлчку на любое из них, с помощью AJAX-а мы обращаемся к скрипту на сервере, который извлекает соответствующую фотографию, передает обратно и затем уже на клиенте, мы заменяем первоначальную большую фотографию только что полученной от сервера. Просто, эффектно, красиво.

3. Система комментариев, оценок постов, голосований и пр. мелких действий. На большинстве сайтов существует множество достаточно небольших действий, после которых осуществляется перезагрузка всей страницы. Например, голосование или комментарии к статье. Довольно нелогично перезагружать 70-100 кб страницу, ради того, чтобы отобразить результаты голосования (3-5 кб). Во всех этих случаях можно и нужно использовать технологию AJAX.

Будем считать, что с понятием AJAX и основными случаями его применения мы ознакомились. Пора окунуться в реальность и начать программировать.

Что собой представляет технология AJAX в глазах программиста? Она представляет собой совокупность скрипта на стороне сервера, который получает запрос с клиента, передаваемый с использованием JavaScript. Затем скрипт отправляет ответ клиенту, который получаем так же с использованием JavaScript, и отображаем на странице. Все очень просто.

Существует множество библиотек (например, xAjax), позволяющих просто и непринужденно работать с этой технологией. В этой статье мы рассмотрим одну из самых простых и тем не менее мощных библиотек – JSHTTPRequest.

Чтобы не быть голословным, рассмотрим создание AJAX формы проверки существования пользователя в системе. Имеем на входе: input, в который пользователь будет вводить свой никнейм (логин) и button, по щелчку на который будет производиться запрос к серверу. На выходе мы должны получить на исходной странице сообщение без перезагрузки контента: «Логин свободен / Логин уже занят».

Прежде всего, нам надо скачать дистрибутив библиотеки JSHTTPRequest. Это можно сделать здесь. Разархивируйте архив, перейдите в папку lib, затем JsHttpRequest. Нам потребуется оттуда два файла: JsHttpRequest.js, JsHttpRequest.php.

Создадим папку, например, ajax, в которую поместим два этих файла. Создадим наш главный файл index.php. Код у нас будет самый элементарный:

<html>

<?php require_once “config.inc.php”; require_once “func.js”; ?>

<body>

<input type=”text” name=”login” id=”login” size=”20” maxlength=”20” />

<input type=”button” name=”check_login” id=”check_login” value=”Check” onclick=”checkLogin()” />

<span name=”result” id=”result”></span>

</body>

</html>

Прежде всего, мы подключаем два файла: config.inc.php и func.js. В первом файле у нас хранится конфигурация доступа к Базе Данных, во втором будут функции JavaScript. Оба файла опишем далее. Затем мы описываем input, в который будет вводиться логин и кнопку check_login, по щелчку на которую будет вызываться функция checkLogin().

config.inc.php

<?php

$db_name = “name”;

$db_host = “host”;

$db_pass = “password”;

$db_user = “user”;

$lnk = mysql_connect($db_host, $db_user, $db_pass)

or die (‘Not connected : ‘ . mysql_error());

mysql_select_db($db_name, $lnk) or die (‘ERROR : ‘ . mysql_error());

?>

Здесь мы осуществляем подключение к Базе Данных.

func.js

<script type=”text/javascript” language=”JavaScript”

src=”JsHttpRequest.js” mce_src=”JsHttpRequest.js”></script>

<script>

function checkLogin()

{

// Создаем новый JsHttpRequest объект

var req = new JsHttpRequest();

req.onreadystatechange = function() {

if (req.readyState == 4)

{

var response = req.responseText;

document.getElementById(“check_login”).innerHTML = response;

}

}

req.open(null, ‘login.php’, true);

// Send data to backend.

var value = document.getElementById(“login”).value;

req.send( { val: value } );

return false;

}

</script>

Прежде всего, мы подключаем файл JsHttpRequest.js из нашей библиотеки. Затем описываем функцию checkLogin(). Изначально создается объект JsHttpRequest. Теперь смотрим на последние строчки. Мы объявляем в какой скрипт будем передавать данные(логин) – в нашем случае это login.php. Затем, получаем значение логина, который был введен пользователем, с использование функции document.getElementById(). Наконец, передаем полученный логин в скрипт login.php. Строчки в середине, которые мы пропустили, реализуют следующее (в двух словах): наш объект во время взаимодействия с сервером имеет различные значения 1-2-4, так вот, когда объект принимает значение 4, значит пришёл ответ от сервера – на этом этапе мы перехватываем то, что нам пришло и записываем в переменную response. Далее, получив ответ от сервера, мы выводим его на экран, в область <span>, которую описали ранее, используя атрибут innerHTML. Все готово. Осталось лишь задать функциональность для login.php.

<?php

require_once “config.inc.php”;

require_once “JsHttpRequest.php”;

$JsHttpRequest =& new JsHttpRequest(“windows-1251″);

mysql_query(“SET NAMES ‘cp1251′”);

$login = $_REQUEST['val'];

$q = “SELECT user_login FROM users WHERE user_login=’$login’”;

$tmp = mysql_query($q);

$res = mysql_fetch_array($tmp);

if ($res)

echo “Логин уже занят”;

else

echo “Логин свободен”;

exit();

?>

Итак, подключаем конфигурационный файл Базы Данных и файл из библиотеки. Задаем кодировку для ответа и для доступа к базе. Принимаем в переменную $login из глобального массива $_REQUEST переданное значение (это и есть введённый логин). Делаем выборки из базы данных логинов, совпадающих с полученным. Анализируем результат, выводя соответствующую ошибку.

На этом все. Основные концепции взаимодействия, надеюсь, Вы усвоили. Для того, чтобы делать что-то своё, Вам необходимо произвести всего лишь несколько модификаций в JavaScript функции checkLogin() – изменив передаваемые данные в скрипт, и изменив действия, которые необходимо производить, при состоянии = 4.

P.S. Полезная ссылка : здесь можно создать и скачать анимированные картинки, которые используются в качестве “фона”, при загрузке контента на странице.