Популярная механика: AJAX не так ужасен, часть 2.

После лирической первой части всё-таки решил сформулировать несколько фактов, со знания которых лучше начинать работу с библиотекой Prototype.

1. Всё взаимодействие с сервером происходит всего лишь через две функции: Ajax.Request() и Ajax.Update(). Разница между ними в том, что первая отправляет запрос на сервер, а вторая — ещё и ожидает ответных данных и помещает эти данные как innerHTML в элемент страницы, идентификатор которого ей был передан. Таким образом, для динамического вывода данных в страницу нужно: а) создать элемент-контейнер (<div id="'updatable'"></div>); б) вызвать функцию Ajax.Update('updatable', .... ). Метод вызова (get/post), параметры — всё это и многое другое можно передать в аргументах функции, всё это подробно описано в документации.

2. На любой поименованный элемент страницы всегда можно сослаться через функцию-доллар как $('id'). Никакого шаманства с поиском объекта в зависимости от типа браузера.

3. Содержимое элемента всегда можно адресовать функцией доллар-эф: $F('id'). Так, если есть поле формы с идентификатором 'afield', то текст в этом поле можно получить, вызвав $F('afield'); и установить так же.

4. Этого уже достаточно для работы. Но ещё полезно знать, что функция-доллар позволяет легко устанавливать любой атрибут объекта: $('id').display='visible'; более того, установка самых популярных атрибутов для удобства реализована специальными функциями. Так, для переключения видимости объекта не нужно выяснять, видим ли он в данный момент — просто вызовите $('id').toggle;. Полный список этих дополнительный функций — в документации.

5. Ожидайте подводных камней с кодировками. У меня на тестовом сервере получение данных в фоне проходило нормально, а на production сервере они стали приходить в UTF-8. Проблема решилась отправкой заголовка перед началом вывода данных из скрипта:

header('Content-Type: text/html; charset=windows-1251');

А ещё лучше сразу делать весь проект в UTF-8, потому что оправка заголовка решает только половину проблемы (передачу данных в браузер), а есть и вторая половина — передача на сервер методом post, и здесь так просто не отделаешься.

Пока всё, но этот список я ещё буду пополнять.