28.12.2006
Андрей Друченко

AJAX с использованием Prototype

Для совсем незнакомых с AJAX поясним что же это такое. AJAX — Asynchronous Javascript And XML, т.е. говоря по-русски «Асинхронный Яваскрипт и XML». Основной принцип этой технологии основан на том, что отдельные части страницы могут обновляться прямиком с сервера в зависимости от действий пользователя. Грубо говоря, на стороне клиента создаются GET/POST запросы, которые посылаются серверу, а сервер, в свою очередь отдает какой-то контент. Под частями страницы мы подразумеваем, конечно же, <div> каждый со своим уникальным атрибутом id.

Основное применение AJAX — это создание более интерактивных элементов управления страницей, примерами могут служить контекстный список (по мере того как вы вводите Фамилию из базы данных вам показываются все фамилии начинающиеся на те символы что вы уже ввели, живой пример подобного —

Google Suggest), комплексная валидация форм, и прочее.

Для того чтобы понять чем AJAX отличается от старого способа взаимодействия — можно посмотреть на схему в статье

Ajax: A New Approach to Web Applications by Jesse James Garrett

Prototype

Prototype — это JavaScript фреймворк созданный специально для того чтобы упростить жизнь разработчику, помимо того что с его помощью довольно просто создавать AJAX приложения, еще есть масса других

полезностей. Тем кто писал Яваcкрипт под разные браузеры, думаю, не стоит пояснять все выгоды использования этой программной прослойки.

От общего описания перейдем к конкретному примеру использования Prototype.

Пример с почтовым кодом

Нам нужно сделать поле ввода почтового кода (zip code), набрав в которое 5 цифр мы бы получили ответ от сервера, в виде Города которому соответствует наш индекс.

Итак, создаем файл, например index.html, и ложим его в корень сервера (DocumentRoot) :

<!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" xml:lang="ru" lang="ru">

<head>

<title>AJAX Приложение </title>

<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<script src="prototype.js" language="JavaScript" type="text/javascript"></script>


<script type="text/javascript" language="JavaScript">

function checkZip() {
    if($F('zip').length == 5) {
       var url    = 'check_zip.php';
       var params = 'zip=' + $F('zip');
       var ajax   = new Ajax.Updater(
                                       {success: 'zipResult'},
                                        url, 
                                       {method: 'get',
                                        parameters: params, 
                                        onFailure: reportError}
                                     );
    }
}


function reportError(request) {
     $('zipResult').innerHTML = "Error";
}

</script>
</head>

<body>

<form>

  <label for="zip">Почтовый код:</label> 
  <input type="text" name="zip" id="zip" onkeyup="checkZip();" />
  <div id="zipResult"></div>
  
</form>

</body>
</html>

Далее создаем файл check_zip.php, там же где и index.html :


<pre>
<?php

  echo("Вы ввели:".$_REQUEST["zip"]);

?>
</pre>
?>

После запуска этого примера, если все прошло удачно — после ввода ровно 5 цифр, под полем ввода должна появиться фраза «Вы ввели XXXX».

Теперь перейдем к подробному пояснению примера.

1. По мере того как мы вводим цифры, срабатывает событие onkeyup, по которому вызывается функция checkZip():

function checkZip() {
    if($F('zip').length == 5) {  // Ecли длина введенной строки равна пяти
       var url    = 'check_zip.php';  // Url на который следует посылать запрос
       var params = 'zip=' + escape($F('zip')); // Параметры запроса, напр. "?zip=XXXXX&foo=1"
       var ajax   = new Ajax.Updater(  // Создаем AJAX вызов
            {success: 'zipResult'},  // Ответ сервера записать в div с id="zipResult"
            url,  
            {method: 'get', //метод запроса - GET
             parameters: params, // строка с параметрами
             onFailure: reportError} // если ошибка, то вызвать функцию reportError()
            );
    }
}

$F(), $()

Вы наверное уже заметили интересные конструкции $F() и $().
$() — это сокращение для очень частых конструкций типа document.getElementById(), а $F() — для получения значения поля, т.е. $F('zip') в нашем случае эквивалентно document.getElementById('zip').value

Вот и все

С этого примера можно начинать строить какое-нибудь действительно полезное и удобное AJAX приложение.

Читать также

Документация по Prototype по-русски

Вводный курс по Prototype

Еще один простой пример

Различного рода эффекты реализуемые с помощью библиотеки Script.Aculo.us основанной на Prototype

Последние комментарии:

не работает	makushatnik
ни в одной вариации checkZip.php не работает. Пишет Error. Хотя вообще вроде prototype-ajax у меня работает. Проверял другим способом

кодировки, кодировки..	Stalker
Переходите полностью на utf-8 и будет вам счастье. а если не знаете как переконвертировать строку или указать кодировку – учите матчасть. 2 aka_Kail: твоя ссылка на JsHttpRequest немножко не в тему. при всем уважении к этой библиотеке и к работам Котерова вообще, эта статья именно о использовании AJAX через Prototype, а о других js-фреймворках можно много-чего написать :)

глянь тут	aka_Kail
Полностью совместима с prototype библиотека от разработчиков Денвера. вот что они пишут. Совместимость с библиотекой prototype. Prototype — это популярное средство для упрощения работы JavaScript-программиста, включающее поддержку AJAX и другие возможности. Библиотека JsHttpRequest может быть использована в качестве ее серверной PHP-части (после подключение небольшого модуля совместимости JsHttpRequest-prototype.js). При этом все дополнительные возможности, присущие JsHttpRequest (кроссбраузерность, закачка файлов, работа с русскими кодировками и т. д.), остаются в силе. никаких заморочек с кодировкой. ссылка на статью – http://dklab.ru/lib/JsHttpRequest/manual.html сама библиотека- http://dklab.ru/lib/JsHttpRequest/demo.zip

Выпадающий список	Дмитрий Смирнов (fantaseour.livejournal.com)
Интересен еще был бы пример с выпадающим списком черезе аякс, чтобы работал в Мазилле. Как известно, там innerHtml не обойтись, нужно вставлять новый список через DOM

разобрался... немножко.	fadanys
что бы можно было использовать другую кодировку, необходимо добавить заголовок с явным указанием Content-Type. в опциях prototype установить encoding: 'windows-1251' при этом вводимая и передаваемая с помошью скрипта методом GET строка кодируется в utf8 (при обычном submit формы — остается в исходной кодировке) ее можно преобразовать с помошью iconv, что не очень удобно, но как отправлять строку неперекодированной — не нашел. отредактированный check_zip.php: `<?php header('Content-Type: text/html; charset=windows-1251'); function strdecode($str) { $rstr = @iconv("UTF-8","windows-1251",$str); if ($rstr == false) {return $str;} else {return $rstr;} } echo "<pre>"; $str = strdecode($_GET["zip"]); echo("Вы ввели ".$str); echo "</pre>"; ?>`

Обсудить (комментариев: 6)