Сегодня попробуем написать что-нибудь на Zend Framework с использованием технологии Ajax. Надо сказать, что ZF довольно гибок и легко подцепляет различные сторонние библиотеки (не говоря уже о ваших собственных). Это я к чему? А к тому, что использование асинхронных запросов к серверу зачастую на практике организует с использованием каких либо библиотек или фрэймворков. Для меня наибольший интерес представляет jQuery. Не буду вдаваться в подробности почему, ведь многие и так знают все его удобства. jQuery можно использовать не только для создания визуальной привлекательности вашим страницам. Он имеет кроме всего этого довольно мощный функционал по созданию и управлению XHR объектами. Касаемо интеграцией с ZF тут проблем нет – подключай .js в bootstrap’е и вперед. Для любителей полной интеграции с PHP есть такая библиотека какjQuery-PHP. На своем опыте я ее не испытывал, но с первого взгляда преимущества там есть. Но давайте отложим в сторону все библиотеки кроме самой jquery.js, и попробуем написать маленькое приложение, где будут выводится “советы дня”. Нам нужна сама папка library с папкой Zend внутри и развернутый проект. Развернуть его можно с помощью Zend_Tool простой коммандой:
|
1 2 3 |
bin/zf.sh create project //для Linux bin\zf.bat create project //для Windows |
Итак, особой инициализации нам в нашем простеньком приложении не нужно. Об этом я хочу поговорить в следующих статьях. Сейчас нам достаточно того, что создастся автоматически. Для контроллеров это ErrorController и IndexController. Будем использовать indexAction и его скрипт вида для отображения index.phtml. Первое что нам нужно это создать layout для нашего приложения. Пусть это будет простой макет html разметки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ru'> <head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <meta http-equiv='Content-Language' content='ru_RU' /> <?php $this->headScript()->appendFile('/js/jquery.js'); $this->headScript()->appendFile('/js/main.js'); echo $this->headScript(); ?> </head> <body> <?php echo $this->layout()->content;?> </body> </html> |
Здесь многое опущено и упрощено. В частности нет doctype’а, часть meta-тегов прописана вручную. Для всего этого есть специальные хелперы вида и нужно пользоваться именно ими (обычно это делается в инициализации). Как видно в body происходит рендеринг содержимого. В нашем случае это всегда будет index.phtml. Также я подключил библиотеку jquery и скрипт main.js с нашим кодом, который напишем чуть позже. Напишем немного разметки в скрипте вида index.phtml
|
1 |
<a class='getnotice' href='#'>Получить совет!</a> <div class='notice'></div> |
Тут все просто. Ссылка будет генерировать нужное событие, а извлеченный ответ сервера в виде совета дня поместится в div. Откроем теперь main.js
|
1 2 3 4 5 6 7 8 |
$(function(){ $('a.getnotice').click(function(){ $.post('/index/index',{},function(response){ $('div.notice').prepend($(response).hide().fadeIn()); }); return false; }); }); |
Итак, здесь мы инициализирем post-запрос к серверу по указанному url ‘/index/index’, далее идет json объект данных для передачи, но нам не нужно ничего передавать, т.к. мы просто будем получать случайный совет дня. А далее идет callback-функция. Она получает ответ от сервера и добавляет его в наш div для советов. При этом используется плавное появление. В конце я поставил return false для того, чтобы ссылка по сути была нерабочая. Осталось только написать правильный контроллер IndexController. Сделаем это.
|
1 2 3 4 5 6 7 8 9 10 11 |
class IndexController extends Zend_Controller_Action{ protected $_notices=array('Не ешь после 18-00','Пей зеленый чай без сахара','Кушай больше фруктов'); public function indexAction(){ if($this->getRequest()->isXmlHttpRequest()){ $this->_helper->viewRenderer->setNoRender(); $this->_helper->layout->disableLayout(); echo '<span>'.array_rand($this->_notices).'</span>'; } } } |
Таким образом мы создали содержимое действия index IndexController’а. В нем мы просто проверяем является ли запрос асинхронным, и если да, то отключаем рендеринг скрипта вида и layout’а. Далее просто выводим случайный совет, обрамленный тегом span. Этот тег с содержимым получит клиентский скрипт в response. Вот и все. Можно проверить как работает. Этим примером я хотел показать, что не только ZF удобен в интеграции с различными библиотеками, но и jQuery дает нам хороший функционал с лаконичным синтаксисом.