Что это?
На случай, если вы ни разу не пользовались, prototype.js — это JavaScript библиотека, написанная Сэмом Стефенсеном (Sam Stephenson). Этот потрясающе продуманный и написанный в соответствии со стандартам код берет на себя немалую часть работы, связанной с созданием функционально-богатых интерактивных страниц, которые характерны для Web 2.0.

Если вы уже пытались использовать эту библиотеку, наверняка заметили, что документация не является ее сильной стороной. Как и многие разработчики до меня я разобрался с prototype.js путем чтения кода и экспериментов. Я подумал, что неплохо было бы, учась, делать заметки, и потом поделиться ими со всеми.

Так же я предлагаю неофициальную справку по объектам, классам, функциям и расширениям, предоставляемым этой библиотекой.

Вспомогательные функции
Библиотека располагает множеством предопределенных объектов и вспомогательных функций. Очевидная польза этих функций в сокращении необходимости набирать часто повторящиеся куски кода.

Использование функции $()
Функция $() — это короткая запись для очень часто используемой функции DOM document.getElementById(). Как и функция DOM, она возвращает элемент, который имеет id, переданный в агрументе.

Однако, в отличии от функции DOM эта делает чуть больше. Вы можете передать более одного аргумента и $() вернет массив (Array) объектов со всеми соответствующими элементами. Пример ниже демонстрирует это: 



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

Использование функции $F()

Функция $F() — это еще одно удобное сокращение. Она возвращает значение полей ввода, таких как текстовые поля или выпадающие списки. Функция принимает в качестве параметра как id элемента, так и сам элемент. 



Использование функции Try.these()

Функция Try.these() позволяет легко попробовать вызвать несколько функций, до тех пор пока какая-нибудь из них сработает. Она принимает в качестве параметров несколько функций и вызывает их одну за другой по порядку, пока какая-нибудь не заработает, и возвращает результат сработавшей функции.

В примере, приведенном ниже, функция xmlNode.text работает в одних браузерах, а xmlNode.textContent работает в других. Используя функцию Try.these() мы можем получить результат работающей. 



Объект Ajax

Вспомогательные функции упомянутые здесь хороши, но не слишком сложны, не так ли? Вы, возможно, уже делали это сами и даже имеете похожие функции в своих скриптах. Но эти функции — только верхушка айсберга.

Я уверен, что ваш интерес к prototype.js вызван в основном его возможностями, связанными с AJAX. Давайте выясним, как эта библиотека может облегчить вам жизнь при реализации AJAX логики.

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

Использование класса Ajax.Request

Если вы не используете вспомогательных библиотек, то, вероятно, пишете много кода для создания объекта XMLHttpRequest, потом асинхронно отслеживаете его работу, извлекаете ответ сервера и обрабатываете его. И счастливы, что вам не требуется поддержка нескольких браузеров.

Чтобы помочь с реализацией AJAX функциональности, библиотека определяет класс Ajax.Request.

Допустим, у вас есть приложение, которое соединяется с сервером по адресу http://yoursever/app/get_sales?empID=1234&year=1998, который возвращает следующий ответ в формате XML: 



Обратиться к серверу для получения этого XML с использованием Ajax.Request  очень легко. Пример ниже показывает, как это может быть сделано.



 Видите второй параметр, переданный конструктору Ajax.Request? Параметр {method: 'get', parameters: pars, onComplete: showResponse} представляет собой анонимный объект. Это значит, что мы передаем объект, который имеет свойство method, содержащее строку 'get', свойство parameters, содержащее строку параметров HTTP запроса и свойство/метод onComplete, содержащее функцию showResponse.

Есть еще несколько свойств, которые вы можете определить и использовать в этом объекте, например, свойство asynchronous, которое может принимать значения true или false, и определяет будет ли запрос к серверу асинхронным (значение по умолчанию true.)

Этот параметр определяет опции AJAX запроса. В нашем примере мы запрашиваем URL, указанный в первом аргументе, с помощью HTTP команды GET передавая строку запроса, указанную в переменной pars, и объект Ajax.Request вызовет функцию showResponse, когда получит ответ сервера.

Как вы, возможно, знаете, XMLHttpRequest сообщает о прогрессе во время HTTP запроса. Есть четыре различных состояния: Loading, Loaded, Interactive, или Complete. Вы можете указать объекту Ajax.Request вызывать различные собственные функции на разных стадиях, чаще всего это используется для состояния Complete. Чтобы сообщить объекту о своих функциях, просто передайте свойства/методы onXXXXX в опциях запроса, например onComplete, как в нашем примере. Функция, которую вы передадите, будет вызвана объектом с одним аргументом — объектом XMLHttpRequest. Вы можете использовать этот объект, чтобы получить данные, возвращенные сервером или проверить свойство status, которое содержит HTTP код ответа.

Две других интересных опции могут быть использованы для обработки результата. Свойство onSuccess — это функция, которая будет вызвана, если AJAX запрос выполнится без ошибок, а наоборот свойство onFailure может содержать функцию, которая будет вызвана, если случится ошибка на сервере. Как и опции-функции onXXXXX, эти две также будут вызваны с объектом XMLHttpRequest, который обслуживал запрос, в качестве аргумента.

Наш пример не делал ничего интересного с XML ответом. Мы просто выводили XML в текстовое поле. Типичным использованием ответа, наверное, является нахождение требуемой информации в XML и обновление некоторых элементов страницы, или даже применение XSLT трансформации, чтобы получить HTML на странице.

Для более полного объяснения смотрите справку по Ajax.Request и options.

Использование класса Ajax.Updater

Если ваш сервер может возвращать информацию, уже сформатированную в HTML, библиотека может сделать вашу жизнь еще легче с помощью класса Ajax.Updater. С ним вам надо только указать, в какой элемент должен быть вставлен HTML, возвращенный AJAX запросом. Пример все расскажет лучше, чем я смогу написать. 



 Как видите, код очень похож на код из предыдущего примера, за исключением функции onComplete, которой теперь нет, и id элемента, передаваемого конструктору. Изменим немного код, чтобы показать, как можно в клиенте обрабатывать ошибки сервера.

Мы добавим в запрос несколько опции, указывающих функцию, которая будет обрабатывать ошибочные состояния. Это делается с помощью опции onFailure. Мы также укажем, что элемент placeholder должен обновляться только в случае удачного запроса. Чтобы добиться этого, мы вместо простого id элемента первым параметром укажем объект с двумя свойствами, success (которое будет использовано, если все сработает) и failure (которое будет использовано, если случится ошибка). Мы не будем использовать свойство failure в нашем примере, а только функцию reportError в свойстве onFailure. 



Если ваш сервер возвращает JavaScript код вместо HTML Ajax.Updater  может его исполнить этот код. Чтобы указать объект, что надо трактовать ответ как JavaScript, просто добавьте evalScripts: true; в список свойств в последнем аргументе конструктора.

Автор: Sergio Pereira
Источник: http://kropp.spb.ru/docs/prototype/

test