Ajax.Updater - один из методов библиотеки prototype.js
В web 2.0 проектах часто приходиться обновлять некоторые области на страничке, для упрощения жизни пользователя, к примеру:
- Вывод системного сообщения без перезагруки страницы
- Показать форму входа или регистрации
- Обновить блок новостей
это небольшой список из того, где можно использовать Ajax.Updater
Хочу заметить, что через мерное применение большого количества обновляемых элементов на странице не улучшает ее, а зачастую снижает общую скорость загрузки страницы, и приводит к более частым “поломкам” в разных броузерах.
Возьмем самый простой пример, динамически без перезагрузки страницы обновим область в которую выведем коментарии, к какому либо сообщению нашего блога.
<!-- Выводим текст сообщения блога -->
<div>
Эта статья раскажет как обновлять старницу на лету
с помощью Ajax.Update из библиотеки prototype.js
</div>
<!-- Комментарии к статье -->
<div id=
"comments"> здесь будут коментарии... </div>
<script language=
"javascript">
new Ajax.Updater
('comments',
'/url_to_comments/comments.php',
{
method: get
})
</script>В примере выше, Ajax.Updater вызывает файл /url_to_comments/comments.php, который выводить комментарии к статье, и обновляется контейнер id=”comments”.
Контейнер id=”comments” полностью перезаписывается, поэтому в вызываемом файле comments.php нужно указывать открывающие и закрывающие <div> коментарии </div> теги.
Ajax.Updater имеет еще ряд параметров. Если сервер возвращает HTML, содержащий скрипты, и вы хотите чтоб они исполнялисть, в строке параметров нужно указать
evalScripts: true.
Русский перевод статьи об Ajax в protoype.js вы можете почитать на страницах блога Parabola.
Приведенный выше пример не совсем точно показывает всю прелесть обновления блоков на странице, ниже показан более правильный способ использования Ajax.Updater.
<form method=
"POST">
<!-- Выводим текст сообщения блога -->
<div>
Эта статья раскажет как обновлять старницу на лету
с помощью Ajax.Update из библиотеки prototype.js
</div>
<!-- Комментарии к статье -->
<div id=
"comments"> здесь будут коментарии... </div>
<input type=
"button" value=
"Показать комментарии" onclick=
"showComments()">
</form>
<script language=
"javascript">
function showComments
()
{
new Ajax.Updater
('comments',
'/url_to_comments/comments.php',
{
method: get
})
}
</script>В этом примере добавиласть кнопка “Показать комментарии”, т.е. при первоначальной загрузки старницы, комментариев под статьей нет, в момент нажатия на кнопку “показать комментарии”, вызывается функция showComments(). Которая обновляет контейнер id=”comments” и выводит комментарии к статье.
Работать с Ajax.Updater очень просто! Если у вас есть свои примеры использования этого метода оставляйте их в комментариях к этой статье.
В следующей статье я раскажу об методе Ajax.Autocompleter из библиотеки script.aculo.us, который во многом похож на Ajax.Updater и позволяет добавлять к полям формы автозаполнение по мере ввода текста в форму.
Не забывайте подписавать на рассылки.
Новая разработка Jaxer - выводит приложения использующие технологию Ajax на новый уровень.
