Archives Posts
Обновление областей страниц на лету с помощью Ajax.Updater
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, содержащий скрипты, и вы хотите чтоб они исполнялисть, в строке параметров нужно указать
Русский перевод статьи об Ajax в protoype.js вы можете почитать на страницах блога Parabola.
Приведенный выше пример не совсем точно показывает всю прелесть обновления блоков на странице, ниже показан более правильный способ использования Ajax.Updater.
<!-- Выводим текст сообщения блога -->
<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 и позволяет добавлять к полям формы автозаполнение по мере ввода текста в форму.
Не забывайте подписавать на рассылки.
