Обновление областей страниц на лету с помощью Ajax.Updater
Ajax.Updater - один из методов библиотеки prototype.js
В web 2.0 проектах часто приходиться обновлять некоторые области на страничке, для упрощения жизни пользователя, к примеру:
- Вывод системного сообщения без перезагруки страницы
- Показать форму входа или регистрации
- Обновить блок новостей
это небольшой список из того, где можно использовать Ajax.Updater
Хочу заметить, что через мерное применение большого количества обновляемых элементов на странице не улучшает ее, а зачастую снижает общую скорость загрузки страницы, и приводит к более частым “поломкам” в разных броузерах.
Возьмем самый простой пример, динамически без перезагрузки страницы обновим область в которую выведем коментарии, к какому либо сообщению нашего блога.
[cc lang="php"]
с помощью Ajax.Update из библиотеки prototype.js
[/cc]
В примере выше, 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.
[cc lang="php"]
[/cc]
В этом примере добавиласть кнопка “Показать комментарии”, т.е. при первоначальной загрузки старницы, комментариев под статьей нет, в момент нажатия на кнопку “показать комментарии”, вызывается функция showComments(). Которая обновляет контейнер id=”comments” и выводит комментарии к статье.
Работать с Ajax.Updater очень просто! Если у вас есть свои примеры использования этого метода оставляйте их в комментариях к этой статье.
В следующей статье я раскажу об методе Ajax.Autocompleter из библиотеки script.aculo.us, который во многом похож на Ajax.Updater и позволяет добавлять к полям формы автозаполнение по мере ввода текста в форму.
Не забывайте подписавать на рассылки.
December 5th, 2007 at 12:16 pm
у меня проблема с этим ajax.updater в том, что в IE он не хочет возвращать теги форм, т.е. если написано [form]text[/form] то в IE ничегон не работает, а в FF и в Opera все нормально. Если убрать то все работает.
Подскажите как с этим бороться?
December 10th, 2007 at 2:21 pm
как раз искал про ajax updater - отличная статья, пишите еще
December 10th, 2007 at 3:59 pm
Скоро будет статья про Ajax.Autocompleter поку на примере одну хитрость, которая не докоментирована, но без которой нельзя практически использовать комплитер.
По поводу того, что формы действительно при простом запросе в IE не передаются и весь запрос выдает false - это действительно есть, как найду решение этой проблемы “правильное” напишу об этом. А сейчас вы можете выносить теги form за пределы области обновления.
July 8th, 2008 at 3:46 pm
Всем привет, пробую пример, неработает(, прототайп скачал с сайта, последня версия, при нажатии на кнопку во втором примере, в ие7 - ошибка ява скрипта. В опере ничего тоже не подгружает, файл пхп, он выводит хтмл в тегах .
Что можно попробовать?
July 8th, 2008 at 10:21 pm
Покажи, как ты сделал. Ссылку дай на сайт. Вообще легче всего отслеживать ошибки в FireFox используя http://www.getfirebug.com
July 13th, 2008 at 11:22 am
Вот что файрбаг выдает:
post is not defined
showComments()test.php (line 17)
onclick(click clientX=0, clientY=0)test.php (line 1)
[Break on this error] method: post
July 13th, 2008 at 11:47 am
Так давай на форуме пообщаемся, вот тут http://www.symfony.org.ua, создай тему по ajax и положи полностью все как ты написал, вплоть до путей своих.
August 28th, 2008 at 12:08 pm
Хм… Но, как говорится в пословице, а воз и ныне там