Zend Framework. Используем технологию Ajax.

Сегодня попробуем написать что-нибудь на Zend Framework с использованием технологии Ajax.  Надо сказать, что ZF довольно гибок и легко подцепляет различные сторонние библиотеки (не говоря уже о ваших собственных). Это я к чему? А к тому, что использование асинхронных запросов к серверу зачастую на практике организует с использованием каких либо библиотек или фрэймворков. Для меня наибольший интерес представляет jQuery. Не буду вдаваться в подробности почему, ведь многие и так знают все его удобства. jQuery можно использовать не только для создания визуальной привлекательности вашим страницам. Он имеет кроме всего этого довольно мощный функционал по созданию и управлению XHR объектами. Касаемо интеграцией с ZF тут проблем нет – подключай .js в bootstrap’е и вперед. Для любителей полной интеграции с PHP есть такая библиотека какjQuery-PHP. На своем опыте я ее не испытывал, но с первого взгляда преимущества там есть. Но давайте отложим в сторону все библиотеки кроме самой jquery.js, и попробуем написать маленькое приложение, где будут выводится “советы дня”. Нам нужна сама папка library с папкой Zend внутри и развернутый проект. Развернуть его можно с помощью Zend_Tool простой коммандой:

 

Итак, особой инициализации нам в нашем простеньком приложении не нужно. Об этом я хочу поговорить в следующих статьях. Сейчас нам достаточно того, что создастся автоматически. Для контроллеров это ErrorController и IndexController. Будем использовать indexAction и его скрипт вида для отображения index.phtml. Первое что нам нужно это создать layout для нашего приложения. Пусть это будет простой макет html разметки:

 

Здесь многое опущено и упрощено. В частности нет doctype’а, часть meta-тегов прописана вручную. Для всего этого есть специальные хелперы вида и нужно пользоваться именно ими (обычно это делается в инициализации). Как видно в body происходит рендеринг содержимого. В нашем случае это всегда будет index.phtml. Также я подключил библиотеку jquery и скрипт main.js с нашим кодом, который напишем чуть позже. Напишем немного разметки в скрипте вида index.phtml

 

Тут все просто. Ссылка будет генерировать нужное событие, а извлеченный ответ сервера в виде совета дня поместится в div. Откроем теперь main.js

 

Итак, здесь мы инициализирем post-запрос к серверу по указанному url ‘/index/index’, далее идет json объект данных для передачи, но нам не нужно ничего передавать, т.к. мы просто будем получать случайный совет дня. А далее идет callback-функция. Она получает ответ от сервера и добавляет его в наш div для советов. При этом используется плавное появление. В конце я поставил return false для того, чтобы ссылка по сути была нерабочая. Осталось только написать правильный контроллер IndexController. Сделаем это.

 

Таким образом мы создали содержимое действия index IndexController’а. В нем мы просто проверяем является ли запрос асинхронным, и если да, то отключаем рендеринг скрипта вида и layout’а. Далее просто выводим случайный совет, обрамленный тегом span. Этот тег с содержимым получит клиентский скрипт в response. Вот и все. Можно проверить как работает. Этим примером я хотел показать, что не только ZF удобен в интеграции с различными библиотеками, но и jQuery дает нам хороший функционал с лаконичным синтаксисом.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">