AJAX Planet: Для начала хотелось бы, чтобы вы представили себя и вашу команду.

Warchief: Вопрос про команду – хороший, обычно все делают вид, что я один. Второй человек в команде – Макс Миронов, известный, как sham. Макс – пиксельный дизайнер, отвечает за весь «вижуал», организационные вопросы и работу с людьми.

AJAX Planet: Расскажите вкратце о Студии Электронных Развлечений, в каком направлении работает ваша студия.

Warchief: Мы стараемся заниматься развлечениями, не всегда электронными, но регулярно занимаемся сайтами, ибо у нас тяжелое веб-девелуперское прошлое, которое дает о себе знать. Наши проекты можно посмотреть на сайте студии – http://elens.ru/

AJAX Planet: Огромное количество людей уже знакомы с вашим проектом-игрой и все же не могли бы вы еще раз поведать идею проекта Blogowar? Чем он отличается от классических «пузомерок»?

Warchief: Блоговар – это «рейтинг для накручивания». Эксплуатирует любовь людей к пузомеркам, но в отличие от «серьезных» рейтингов, блоговар не меряет, фактически, ничего – кроме текущей активности игроков. Чем игрок активней – тем он выше в «рейтинге».

Ну или можно назвать Блоговар пародией на рейтинг.

AJAX Planet: Какова история создания проекта, как рождалась концепции? Был ли Blogowar навеян, каким либо сайтом/игрой.

Warchief: Сначала была простая мысль, что блоги — это MMORPG.

«По буквам» возражений нет. Massive? Да. Multiplayer? Да. Online? Да. Roleplaying? Да. Game? Пожалуй, да.

Потом была попытка облечь эту мысль в конкретную игровую форму.

AJAX Planet: Легко ли попасть в топ-20? Блоги с какой тематикой чаще всего оказываются в топе?

Warchief: Легко, с любой. Сложнее всего – удержаться в топе, а не попасть. Попасть же в топ можно за пару дней активной игры.

AJAX Planet: Блоговар приносит неплохой поток посетителей для тех, кто на вершине рейтинга, отсюда возникает вопрос: были ли попытки накрутки, мошенничества в игре?

Warchief: Мошенничества – да. Например, напишут «игровой» пост с ссылками, он засчитывается, после чего его удаляют. Такое легко отслеживается другими игроками, и в результате мошенники банятся.

«Накруток» же в классическом понимании нет, вся цель игры – «накрутить» рейтинг. Поэтому все «накрутки» являются вполне нормальным игровым процессом и были предусмотрены изначально. Тем не менее, осознание того, что ты что-то «накручиваешь», греет душу – тоже один из плюсов Блоговара.

AJAX Planet: Практически каждую неделю на поле боя появляются всевозможные новшества: различные зелья, заклинания, новое вооружение. Может, приоткроете завесу тайн и расскажете читателем, над какой очередной возможностью вы работаете в данный момент, если это конечно не секрет.

Warchief: На самом деле, после того, как сайт был сделан, все остальные изменения происходят «набегами», то есть: появилась идея – час на обдумывание, если обдумывание удалось – два часа на реализацию. Максимум через три часа все работает. Изменения-то пока что все небольшие (но приятные).

Если бы я сейчас работал над новшеством, через несколько часов оно уже было бы реализовано.

AJAX Planet: Давайте поговорим о технической части проекта. Интересно узнать каким сервером обслуживается проект, какая СУБД применяется и использовались ли какие либо php-фреймворки при создании проекта, опять же если это не секрет : ) ?

Warchief: Ничего нестандартного нет: mysql+php.

Фреймворки и чужие библиотеки не использовались, но есть небольшой набор собственных библиотек, который помогает при создании новых сайтов.

AJAX Planet: Есть ли планы по разработке подобного сайта для англоязычной интернет аудитории? У вашей студии недавно вышла настольная игра Большой куш, будет ли она интересна поклонникам Blogowar? Поделитесь планами будущих проектов…

Warchief: Про англоязычную аудиторию мы даже как-то и не думали. Своя блогосфера как-то ближе и понятней.

Большой куш – пока что самая любимая моя игра. Она простая и очень веселая, со смешными красочными иллюстрациями. Более того, у нее есть «фишка» – карты «Куша» к тому же имеют обычную карточную маркировку (масть и достоинство), поэтому «Кушем» при желании можно играть и в любую карточную игру.

Так что это – идеальная игра для отпусков, компаний и прочего. И как бизнес-подарок сложно придумать что-то более «прикольное», игра ведь про рейдеров и захват собственности. Купить игру можно на нашем сайте.

AJAX Planet: Большое спасибо, что выкроили время для нас, было интересно пообщаться.

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме Развлечения.

Обзор
В symfony есть Ajax хелпер, который позволяет очень быстро и просто создавать продуманные пользовательские интерфейсы. Это руководство покажет, как шаг за шагом создать Ajax-powered приложение, используя symfony, всего за 10 минут.

Вступление
Для лентяев, которых утомляет чтение, есть видео-пример, который показывает ниже изложенные действия.

Добавление позиции в корзину покупок в электронной торговли не очень близка к фактическому добавлению в корзину, поскольку требуется нажать на ссылку “добавить в корзину”, просмотреть открывшуюся страницу (“корзина”), а после вернуться на страницу с товаром.

Ajax позволяет приблизить метафорическое добавление товара в корзину в Интернет магазине к фактическому (как например вы это делаете в супермаркете). Подобный эффект достигается добавлением drag&drop возможности и моментальной перерисовки вышей корзины.

Описываемы в статье пример является портом примера корзины на сайте script.aculo.us. В примере используется JavaScript фреймворк prototype (который входит в состав symfony) и несколько скриптов из библиотеки script.aculo.us, которые входят в состав JavaScript хелпера.

Настройка
Для начала, создайте проект sfdemo, приложение app и модуль card:

$ cd /home/steve
$ mkdir sfdemo
$ cd sfdemo
$ symfony init-project sfdemo
$ symfony init-app app
$ symfony init-module app cart

Настройте ваш веб-сервер, чтобы был доступ к вашему новому приложению (неважно как вы этого добьётесь используя виртуальный хост или alias’ы (в unix-like системах с помощью этой команды создается псевдоним какого-либо скрипта или приложения), как описано в главе настройки веб-сервера в документации). Давайте предположим, что модуль card доступен отсюда:

http://localhost/cart/

Ваше приложение должно иметь доступ к symfony JavaScript библиотекам. Если приложение не работает, проверти доступ к библиотекам через браузер (зайдите на http://localhost/sf/js/prototype.js, например). Если страница не загрузилась, есть три способа решения этой проблемы:

Главная страница
Сначала нужно создать список продуктов, выставленных на продажу. Доступ к этому списку будет осуществляться через метод getProducts() action класса card. Корзина будет является полем объекта sfUser, устанавливаемый через Attribute parameter holder. Измените sfdemo/app/modules/cart/actions/actions.class.php на:


class cartActions extends sfActions
{
public function executeIndex()
{
$this->getUser()->setAttribute('cart', array());
$this->products = $this->getProducts();
}
private function getProducts()
{
return array('iPod black', 'iMac', 'iMac RC', 'iPod');
}
}


Главная страница модуля card будет содержать список товаров и место, куда они будут перетаскиваться (drop zone). Это место и будет корзиной. Итак, откройте шаблон sfdemo/app/modules/cart/templates/indexSuccess.php и впишите туда следующие:

symfony Apple store demo

Теперь товары будут отображаться в виде картинок. Эти картинки можно скачать в этом архиве, их следует положить в sfdemo/web/images/. Часть стилей уже сделаны, так что стоит их просто забрать отсюда, и положить в sfdemo/web/css/ также нужно добавить файл view.yml в sfdemo/app/modules/cart/config/ со следующим содержанием:

all:
stylesheets: [cart]

(Обратитесь к документации, если вас смущают *.yml)

Смотрим результат:

http://localhost/cart/

Фокусируемся на корзине.
Содержание корзины будет меняться, как только вы перенесете туда товар. Это значит что содержание корзины будет вынесено в отдельный файл шаблона. Для этого используем хелпер include_partial(). Товары в корзине будут «сохраняться» в div’ы со стилем float:left, а дальше после корзины нужно не забыть добавить стиль clear:both. (для тех, кто не понял зачем это смотрим спецификации) Измените конец шаблона indexSuccess.php на:

Cart:

Хелпер include_partial() заинклудит файл sfdemo/app/modules/cart/templates/_cart.php, который должен содержать следующее:

< ?php foreach($sf_user->getAttribute(’cart’) as $product_id => $quantity): ?>

< ?php if (!$sf_user->getAttribute(’cart’)): ?>
nothing yet in your shopping cart.
< ?php endif ?>

Если в корзине есть товар, то он отображается в виде картинок столько раз, сколько он туда добавлен. После группы товаров будет отображаться счетчик (переменная $quantity).
Можно опять посмотреть на нашу корзину:

http://localhost/cart/

На самом деле изменений не много, выглядит по-прежнему пусто… Настало время AJAX’a. (в оригинале «It’s time to make things AJAX».)

Добавляем JavaScript’овые события.
Добавьте в indexSuccess.php загрузку JavaScript хелпера:

< ?php use_helper(’Javascript’) ?>

Теперь нужно сделать картинки перетаскиваемыми (draggable), для этого нужно добавить вызов draggable_element:

< ?php foreach($products as $id => $title): ?>
< ?php echo image_tag(’product’.$id, array(
‘id’ => ‘product_’.$id,
‘class’ => ‘products’
)) ?>
< ?php echo draggable_element(’product_’.$id, array(’revert’ => true)) ?>
< ?php endforeach ?>

Этим мы добавим ко всем картинкам возможность перетаскивания. Опция revert добавляет возврат картинки на старую позицию, как только ее отпустят.

Теперь нужно определить, что будет происходить, как только пользователь бросит (перетащит) иконку товара в нашу корзину. Для этого укажем, какая часть шаблона должна обновится, какой action за это событие будет отвечать, и какие из перетаскиваемых элементов можно будет перетащить в корзину. Воспользуйтесь drop_receiving_elements хелпером для этого:

< ?php echo drop_receiving_element(’cart’, array(
‘update’ => ‘items’,
‘url’ => ‘cart/add’,
‘accept’ => ‘products’,
)) ?>

Снова можно проверить результат, попробуйте перетащить иконку товара в корзину, должно работать. Как только иконка перетаскивается в корзину, XMLHTTPRequest отправляет запрос add action’у, и результат отображается в div’е items. Только дело в том, что action add модуля card мы еще не создали…

Создаем action обновления.
Добавьте add action в sfdemo/app/modules/cart/actions/actions.class.php:

public function executeAdd()
{
$tmp = split('_', $this->getRequestParameter(’id’, ”));
$product_id = $tmp[1];

$cart = $this->getUser()->getAttribute(’cart’);
if (!isset($cart[$product_id]))
{
$cart[$product_id] = 1;
}
else
{
++$cart[$product_id];
}
$this->getUser()->setAttribute(’cart’, $cart);
$this->products = $this->getProducts();
}

Action разбирает присланные параметры (id товара) и добавляет этот товар в корзину.

Результатом работы action’а add будет шаблон addSuccess.php. Здесь простой инклуд (используя include_partial) _cart.php, только в этот раз необходимо передавать список товаров в параметрах:

< ?php include_partial(’cart’, array(’products’ => $products)) ?>

Шаблон не должен использовать глобальное расположение, чтобы изменить это отредактируйте sfdemo/app/modules/cart/config/view.yml, вписав следующие:

addSuccess:
has_layout: off

all:
has_layout: on
stylesheets: [cart]

Посмотрите результат: теперь элементы должны добавляться в корзину без проблем.

Фокусируемся на юзабилити.
Можно остановиться на этом, но есть один большой недостаток: пока корзина обновляется, интерфейс не меняется и это может смутить пользователя. Выход из этой ситуации – добавление индикатора, который показывает, что запрос в процессе обработки. И еще, пользователь может не понять, что перетаскиваемые элементы будут приняты «корзиной», поэтому стоит добавить стиль hover к слою cart.

Отредактируйте шаблон indexSuccess.php:

Сохраните картинку в файл sfdemo/web/images/indicator.gif

Теперь, нужно изменить в этом же шаблоне вызов хелпера drop_receiving_element(): добавить отображение индикатора и hover стиль:

< ?php echo drop_receiving_element(’cart’, array(
‘update’ => ‘items’,
‘url’ => ‘cart/add’,
‘accept’ => ‘products’,
’script’ => ‘true’,
‘hoverclass’ => ‘cart-active’,
‘loading’ => "Element.show(’indicator’)",
‘complete’ => "Element.hide(’indicator’)"
)) ?>

Заключение.
Полный код статьи можно скачать отсюда, также доступен рабочий пример он-лайн.

Пока полная документация по JavaScript хелперу не дописана, можно воспользоваться документацией script.aculo.us.

Оригинальная статья.

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Библиотеки и фреймворки.

Издателями в России выступили «Символ-Плюс», что означает (повторюсь за Борисом) высокое качество перевода. Также меня очень порадовала работа научного редактора, который добавил большое количество сносок поясняющих некоторые тонкие моменты, на которых авторы не сделали акцента. Аннотацию можно почитать тут, но она ничем не отличается от аннотаций других книг по Ajax. Я же попробую подробнее описать, какие аспекты рассмотрены в данном издании, для этого пробежимся по содержанию.

• Глава 1. Что такое Ajax? В этой главе рассматривается история термина Ajax, примеры сайтов, использующих эту технологию. Кстати, даже я, читавший ни одну статью с таким названием, нашел для себя несколько новых фактов
• Глава 2. Основы Ajax представляет собой введение в основы Ajax, описываются методы реализации с использованием iframe’ов и XMLhttp, их преимущества и недостатки, варианты применения. Большое внимание уделяется такому важному аспекту как юзабилити. Также показывается удобства работы с кросс-браузерной библиотекой zXMLhttp, разработанной авторами книги (нужно отметить, что действительно удобная вещь для небольших проектов)
• Глава 3. Шаблоны проектирования. Очень важная, на мой взгляд, глава. Мало того, что в ней описываются наиболее часто используемые паттерны Ajax, она дает задуматься о важности глубокого анализа своего проекта на предмет построения более правильного взаимодействия частей отвечающих за реализацию Ajax.
• Глава 4. XML, XPath и XSLT. Это небольшое введение в технологии сопутствующие Ajax, большое внимание уделено кросс-браузерности.
• Глава 5. Синдицирование с использованием RSS и Atom. Описываются история появления и развития технологий распространения информации через Веб, включая RSS и Atom, а также процесс создания и реализации веб-агрегатора RSS/Atom
• Глава 6. Веб-службы. Для меня глава оказалась действительно полезной, так как четко определяет понятия SOAP, REST, WSDL. Также из этого раздела можно узнать о создании веб-службы с помощью ASP.NET и C#, и способ решения проблемы междоменных запросов.
• Глава 7. JSON. Наличие этой главы очень меня порадовало, так как многие авторы, освещающие Ajax тему считают, что XML это единственный формат общения серверной и клиентской частей. Но даже в одном из документов Googl’a по Ajax API, говорится о том насколько удобнее применять JSON в среде работы с JavaScript. Итак, в этой главе будет рассмотрен пример работы Ajax приложения с использованием формата JSON для реализации поля ввода с авто-дополнением (auto-suggestion)
• Глава 8. Виджеты на веб-сайте. Рассмотрены примеры реализации виджета со сводкой новостей, виджета с информацией о погоде, виджета поиска в Сети и поиска по сайту.
• Глава 9. AjaxMail. Самая интересная и полезная глава, рассказывающая о создании законченного веб-приложения с использованием всех приведенных сведений из предыдущих глав (надо сказать, достаточно мощное приложение получается)
• Глава 10. Интегрированные системы Ajax. В этой главе описывается три интегрированных системы: JSPAN для работы c PHP, DWR для работы с Java и Ajax.NET, каждая из которых автоматизирует какую-то часть процесса разработки в Ajax.

К плюсам книжки еще нужно отнести актуальность версий описываемых продуктов, к минусам – большое количество опечаток. Также меня разочаровала последняя глава так как, на мой взгляд, в ней рассматриваются не очень удачные интегрированные системы.

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме Книги.


&ch=[checksum]
&client=navclient-auto
&output=xml

Этим мы как бы притворяемся Google Toolbar’ом, алгоритм получения checksum до недавнего времени был неизвестен, но кто-то похакал toolbar и достал его оттуда.
Пример запроса:
http://www.google.com/search?client=navclient-auto&hl=en&ch=6-1930753257&q=seo%20is%20for%20losers&output=xml&num=100

Полную реализацию своего поисковика на основе гугла можно скачать отсюда. На этом же сайте можно найти забавную заметку о том, как автор блога google-script.com, одурачил кучу народу сообщением о «новой» поисковой машине, которая лучше Google, Yahoo и MSN в несколько раз.

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме Без рубрики.

Итак представляю вам с вольный перевод коротенькой заметки «Improve your forms using HTML5!», которая, кстати, была написана еще до всех этих событий вокруг консорциума и HTML5…

Потапов Геннадий (TermiT)

Советы от dev.opera.com.
С момента релиза HTML4 в 1998 году язык совсем не обновлялся. Несмотря на это? начиная с 2004 года, участники WHATWG community (объединение разработчиков браузеров Safari, Opera, FireFox) продолжали работу над HTML, в итоге были добавлены новые возможности (некоторые из них, в принципе, давно уже напрашивались).

В данной статье будет рассмотрена функциональность форм HTML5, так называемые Web Forms 2. (Приведенные примеры отлично работаю в Opera, FireFox и Safari)

autofocus и пропуск атрибутов
Новые вебформы позволяют производить валидацию данных и много других интересных вещей, которые упрощают работу программистам/верстальщикам. Например, рассмотрим следующий код:

Его можно заменить, используя новые формы следующим кодом:

Часть кода из первого примера исчезла, и добавился новый атрибут autofocus. Благодаря атрибуту autofocus мы избавились от javascript’a и атрибута id, по которому обращался к input тот самый javascript. Атрибут method тэга form можно опустить, т.к. метод GET для формы будет установлен по умолчанию. Аналогично, input по умолчанию получит тип text. Также работая с Web Forms 2 мы можем опустить action в тэге form, эффект будет такой же, как если бы мы указали action пустую строку.

Валидация форм
Сейчас разработчики используют навороченные скрипты для проверки форм на стороне клиента, вскоре можно будет просто написать:

Код прост и понятен, словно читаешь текст на английском . Когда пользователь пытается отправить данные формы браузер проверяет все условия, если все в порядке, то данные отправляются, иначе пользователю выдаётся сообщение с ошибкой. Конечно, это не освобождает вас от проверки данных на серверной части, но это освобождает пользователя от лишних перезагрузок страницы и вас от лишнего кода.

В коде использовались новые компоненты url и email, а также новый атрибут required. Кроме того, в Web Forms 2 добавлены следующие элементы dates, time, numbers, add, remove. Примеры их работы можно посмотреть тут.

Стили
Задать стиль элементу очень просто, достаточно воспользоваться новыми псевдо-классами :

input:required { background:yellow }

Аналогично и с отключенными элементами (disabled control), отмеченными чекбоксами (checked checkboxe), кнопками отправки формы (default submit button),read-only элементами и т.д.:

input:disabled { … }
input:checked + label { … }
input[type=button]:default { … }
input:read-only { … }

Пример формы в действии.

Заключение
Web Forms 2 это только малая часть того, что реализовано и еще будет реализовано в HTML 5. Например, появляется замечательный тэг , который позволяет веб-разработчикам создавать двумерные рисунки при помощи JavaScript. (есть интересная статейка о использовании canvas: AJAX, HTML-холст, и Суперпоезд). Советую всем ознакомится с черновиком спецификации HTML 5

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме Технологии.

Итак чтобы воспользоваться API нужно перейти по урлу http://www.searchmash.com/results/[query], где [query] нужно заменить на интересующий вас запрос. Если задать урл в следующем формате http://www.searchmash.com/results/[query]?i=11&n=10, то вы получите десять результатов запроса начиная с одиннадцатого. Также можно получить результаты по изображениям, видео и блогам:

http://www.searchmash.com/results/images:[query]
http://www.searchmash.com/results/blogs:[query]

http://www.searchmash.com/results/video:[query]

Если вы захотите использовать это API через AJAX, то возможно вам потребуется веб-прокси для создания междоменых запросов.

В PHP можно получить результаты, воспользовавшись библиотекой pear.php.net/pepr/pepr-proposal-show.php?id=198:


$request = 'статьи о AJAX'
require_once("JSON.php");
$json = new Services_JSON();
$full_json_return = $json->decode(implode('',file('http://www.searchmash.com/results/'.urlencode(iconv('cp1251','UTF-8',$request)).'?n=10')));
print_r($full_json_return->result);


© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме Без рубрики.

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме Библиотеки и фреймворки, Без рубрики.

Это перевод статьи Джоана Хуртадо (Juan Hurtado) “GWT Small Guide”. Оригинал доступен на испанском и английском. Возможно перевод получится грубым, так как я очень торопился, буду рад узнать ваше мнение насчет качества перевода.

Потапов Геннадий (TermiT)

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме AJAX, Google, Java, Технологии, Библиотеки и фреймворки.

О статье
Автор заметки Stoyan Stefanov, он известен своими статьями о PEAR (скорей всего вы сталкивались с его статьей DB to MDB2), MySQL и AJAX. Речь пойдет о раскладке AJAX под MVC (казалось бы, вещь элементарная, но на самом деле легко допустить ошибку) и о мини-фреймворке, который предлагает вам автор. Критика по перевод приветствуется.

AJAX MVC
Это своего рода фреймворк для создания AJAX приложений, основанных на MVC паттерне. Да, я назвал много модных словечек, признаю, но это не должно восприниматься в серьез. Недавно я работал над несколькими небольшими проектами и как-то случайно (это вообще не входило в мои планы), разработал для себя маленький фреймворк. Потом, я заметил, что этот скрипт и его организация схож с MVC. Так как должен быть построен MVC когда мы имеем смесь толстого и тонкого клиента, HTML, JavaScript, XMLHttpRequest, PHP и СSS?

Как обычно работают AJAX приложения:

1. у нас есть HTML страничка, оформленная CSS
2. вы куда ни будь кликаете
3. JavaScript отправляет запрос на сервер (PHP скрипту)
4. JavaScript обновляет содержимое HTML страницы

Реализуем MVC паттерн
Итак, так какая часть будет отвечать за Model (Модель), View (Вид) и Controller (Контроллер)? С Моделью все просто, это бизнес логика: запись в базу и т.п. Модель – PHP скрипт. Вид? Очевидно это HTML страница, оформленная CSS. Надо заметить, что JavaScript, который будет обновлять страницу, тоже часть Вида. Неважно как это реализовано: innerHTML в JavaScript’e или DOM, в любом случае это часть HTML. А что насчет Контроллера? У нас будет два контроллера. Один на серверной части, PHP скрипт который будет получать запросы, и запрашивать у Модели данные. Другой на стороне клиента, JavaScript, который решает, что случится по нажатию кнопки и отправляет соответствующий AJAX запрос PHP контролеру. Поэтому я буду рассматривать любые действия JavaScript, включающие отлавливание событий и отправку HTTP запросов как часть Контролера. Схема:

В действии (пример)
Чтобы оправдать концепцию мы рассмотрим небольшое приложение в качестве примера. Простая HTML страница с кнопкой, оформленная CSS. Она содержит два JavaScript’a отвечающих за события (Контролер) и за обновления страницы (Вид). Также страница будет содержать два вспомогательных JavaScript’а, так как я использую YUI (Yahoo User Interface) библиотеку. JavaScript’овый Контролер будет связан с кнопкой, по нажатию этой кнопки он отправит запрос PHP Контролеру. PHP Контролер (просто switch) разбирает запрос и вызывает соответствующий объект бизнес модели. В нашем случае «объект модели» это простая функция, но вы легко можете ее расширить. Модель возвращает (в JSON формате) ответ, в нашем случае это список установленных расширений PHP. Теперь используя полученные данные, JavaScript Вида обновляет содержимое страницы. Затем Вид вызывает другую функцию из JavaScript’ого Контролера, которая добавляет новые обработчики событий для нового контента. (Оп, тут небольшая ошибочка, было бы лучше, если бы ответы Модели отлавливались JavaScript’овым контролером, который бы активировал обработчики обновления JavaScript’ового вида, в любом случае это легко исправить)

Структура каталогов:

Код для примера
Мы добрались до самого интересного – реализации. Начнем с простого .html страницы, главной части вида.

Index.html:


< ?xml version=”1.1″ encoding=”iso-8859-1″?>
< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Это фрагмент из behaviours.js:

// класс событий
var behaviours = {
phpcontroller: "../controller/switch.php?request=",
// продолжаются behaviour.methods ….
}

// загрузка страницы, добавляем onload событие
YAHOO.util.Event.addListener(
'thebutton', 'click', behaviours.theButtonClick);


Теперь, когда пользователь кликнет по кнопке, вызовется метод behaviours.theButtonClick(), что в свою очередь отправит запрос PHP контролеру и сообщит ему тип запроса: “loadSomething”:

theButtonClick: function(e) {
alert('Ouch! nnOK, I'll make a request for ya, buddy!');
YAHOO.util.Connect.asyncRequest (
'GET',
behaviours.phpcontroller + 'loadSomething',
{success: updates.writeContent}
);
},

PHP контроллер (controller/switch.php) получит запрос, пройдет switch (проверит тип запроса) и вызовет соответствующую (в нашем случае простую) функцию из бизнес модели. Полный код switch.php:


< ?php
// если это запрос
if (empty($_GET[’request’])) {
die();
}
// получить бизнес-логику
include_once ‘../model/business.php’;

// разбор запроса
// и вызов объекта логики
switch ($_GET[’request’])
{
case ‘loadSomething’:
echo loadSomething();
break;
case ‘loadSomeMore’: // не используется, только для примера
echo loadSomeMore();
break;
}
?>


Функция loadSomething() из PHP модели получает список установленных PHP расширений, кодируем в JSON и отправляем назад. Полный листинг ../model/business.php:

< ?php
function loadSomething() {
$extensions = get_loaded_extensions();
return ‘[”‘. implode(’”,”‘, $extensions) . ‘”]’;
}
?>

Если вернуться назад и взглянуть на AJAX запрос, можно увидеть, что в случае успеха, я вызываю метод updates.writeContent(). В ../view/updates.js содержится код обновления исходной html страницы, который создает HTML таблицу с результатами (списком расширений PHP). Потом я хотел прикрепить листенер к новой таблице, но это уже работа JavaScript’ового Контролера. Полный листинг updates.js:

var updates = {
writeContent: function (xmlhttp) {
if (!xmlhttp.responseText) {
alert("I got nothing from the server");
}
var data = eval(xmlhttp.responseText);
var write_to = document.getElementById('content');
write_to.innerHTML = '';

behaviours.updateTableBehaviour();
}
}


(Кстати, чтобы облегчить себе жизнь, при работе с DOM, я использовал свою небольшую утилиту html2dom)

И, наконец, оставшаяся часть JavaScript’ового Контролера (behaviours.js): метод behaviours.updateTableBehaviour(), который добавляет листенер к новой таблице и метод trClick(), который отлавливает клики по этой таблице. По клику просто меняется цвет выбранной строки.

trClick: function (e) {
var target = (e.srcElement) ?
e.srcElement.parentNode : e.target.parentNode;
if (target.tagName == 'TR') {
if (target.className == 'tr-on') {
target.className = '';
} else {
target.className = 'tr-on';
}
}
},
updateTableBehaviour: function () {
var el = document.getElementById('content').firstChild;
YAHOO.util.Event.addListener(
el, 'click', behaviours.trClick);
}

Демо и исходники
• Demo – on-line демонстрация
• Zipped demo – весь исходный код этого примера
• Template – исходный код примера, но часть кода закомментирована, так что вы можете использовать его в качестве шаблона для ваших будущий AJAX проектов. Единственное, что нужно сделать – кинуть YUI в папку _extras/yui.

© AJAX Planet, 2007. | Постоянная ссылка | Комментарии

Интересна эта тема? Посмотрите архив сообщений по теме Библиотеки и фреймворки.