С написанием JavaScript кода постоянно сталкивается каждый web разработчик. Сам по себе JavaScript язык не сложный, но используется он в основном для работы с содержимым web страницы. А это содержимое доступно в виде DOM-дерева, что значительно усложняет работу с ним.

Кроме того, на сегодняшний день каждый из широко распространенных браузеров имеет свою специфику, которую нужно учитывать при написании JavaScript кода. Например, функция отправки обычного Ajax запроса имеет размер около 20 строк, а все из-за того, что в IE объект, выполняющий отправку запроса, называется ActiveXObject("Microsoft.XMLHTTP"), а в Mozilla – XMLHttpRequest(). Поэтому приходится сначала выяснять тип браузера, затем создавать нужный объект, а потом для обоих вариантов писать код отправки запросов. И таких примеров множество.

Естественно, если вам нужна одна-две JavaScript функции на весь сайт, то написать их несложно. Но если JavaScript используется интенсивно, например, изменяет разметку и содержимое страницы на основе данных, полученных из ajax запроса, то работа с «чистым» JavaScript становится утомительной.

Такая ситуация не устраивала многих разработчиков. Поэтому появление специальных JavaScript библиотек было вполне закономерным. Об одной из таких библиотек я хочу рассказать в этой статье. Называется она prototype.

Вся библиотека находится в одном файле, который называется prototype.js. Для использования библиотеки этот файл нужно подключить к странице:

< script src="prototype.js" type="text/javascript">< /script>

Главные преимущества этой библиотеки, на мой взгляд, в том, что она максимально ускоряет работу с ajax и элементами html страницы. Это как раз тот случай, когда 10% кода делают 90% работы.

Рассмотрим эти две возможности немного подробнее.

Ajax

Для работы с ajax в prototype используется объект Ajax, который предоставляет несколько удобных методов для отправки запросов.

Ajax.Updater – отправляет запрос и вставляет результат в заданный элемент страницы.
Используется следующим образом:
new Ajax.Updater("имя_элемента", "название_скрипта", {method:"post", parameters: "параметры"});
Метод Ajax.Request позволяет указать функцию, которой будут переданы полученные от сервера данные:
new Ajax.Request("название_скрипта", {method:"post", parameters: "параметры", onSuccess: "имя_функции"});

Работа с элементами страницы

С точки зрения JavaScript, страница, загруженная браузером, представляет собой DOM-дерево. Объект представляющий всю страницу (корень дерева) называется document. Для доступа к отдельным его элементам используются специальные функции. Например, если на странице есть блок с названием testBlock:

< div id=”testBlock”>…< /div>,

то получить доступ к нему можно так:

document.getElementById(“testBlock”);

Выполнение этой же операции с помощью prototype значительно сокращает количество кода:

$(“testBlock”);

Рассмотрим более подробный пример.

Допустим, у нас есть страница с формой, которая содержит два текстовых поля:

< input type="text" id="field1" />,
< input type="text" id="field2" />,
и кнопку для отправки запроса. Нажатие на эту кнопку будет вызывать функцию sendAjaxRequest(), которая и отправит ajax запрос:
< input type="button" id="search" onClick="analyseText()" />
Ответ сервера необходимо вставить в элемент result, который имеет вид:
< div id=”result”>< /div>.

Серверный скрипт, которому мы отправляем запрос, находится в файле test_ajax.php.

Для выполнения этой задачи функция sendAjaxRequest() будет иметь вид

function analyseText() {
//читаем значения введенные в поля
var f1 = $(“field1”).value;
var f2 = $(“field2”).value;
//формируем строку с параметрами запроса
var pars = $H({field1:f1, field2:f2}).toQueryString();
//отправляем ajax запрос
new Ajax.Updater("result", "test_ajax.php", {method:"post", parameters:pars});
}

Как видите, функция содержит всего 4 строки кода (не считая комментариев). Попробуйте реализовать то же самое на «чистом» JavaScript и вы почувствуете разницу.

Конечно, prototype не ограничивается работой с ajax запросами и html страницей. Эта библиотека предоставляет функции для работы с массивами, хеш-таблицами (кстати, в предыдущем примере мы использовали эту функцию $H()), формами, событиями и т.д.

Кроме того, существуют надстройки над prototype. Например, библиотека эффектов script.aculo.us.

Думаю, вы почувствовали, на сколько эта библиотека позволяет сократить время написания и отладки JavaScript кода.