Главная
Новости
Статьи
Скрипты
Плагины
Сервисы

ГлавнаяСтатьи:

Легкий AJAX в массы

Сейчас много различных библиотек и фреймворков доступно для разработчиков. Честно говоря я думаю, что их слишком много. Я изучил прекрасную библиотеку на javascript — Prototype.js и удивительную библиотеку script.aculo.us для создания визуальных эффектов.Однако эти решения полностью написаны на javascript и исполняются на машине клиента. Цитируя некоторых именитых PHP разработчиков имеющих посредственные знания в javascript, что делает очень затруднительным использование этих библиотек в PHP приложениях. К счастью я натолкнулся на библиотеку xAJAX, которая полностью написана на PHP, который включает Ajax функции.

При использовании библиотеки xAJAX требуется ОЧЕНЬ мало знаний по javascript, однако при использовании других библиотек я бы сказал что требуются солидные знания javascript. Я полагаю что интеграция Prototype.js в библиотеку xAJAX сделала бы его еще лучше, и разработчикам пришлось бы сталкиваться с javascript еще меньше. Хорошо что все это планируется в новых версиях xajax. Учитывая все это, я полагаю xAJAX это наиболее подходящий выбор для PHP разработчиков, которые будут интегрировать в свои вебприложения Ajax.

Основные принципы xAJAX При начале работы с xAJAX вы должны привыкнуть к некоторым вещам. Мы должны увидеть в PHP коде xAJAX, некоторый вид циклического процесса, который содержит в себе события на стороне клиент и события на стороне сервера.

Мощь xAJAX заключается в том, что мы можем вызвать PHP функцию напрямую из клиентского окружения. Функции, описанные в бекенде (PHP функции на сервере) доступны во фронтенде (dhtml/javascript на стороне клиента). Очень мощный встроенный механизм. Хорошие новости для разработчиков – фактически 99% javascript генерируются автоматически посредством xajax. Давайте ознакомимся с начальными сведениями – из чего состоит xAJAX .

Я создал четыре различных примера, которые помогут понять различные способы применения xAJAX. Однако есть некоторые принципы относящиеся ко всем примерам. Давайте посмотрим что это за принципы:

Шаг 1: подключение класса – библиотеки xAJAX require_once(«xajax.inc.php»); Мы всегда подключаем библиотеку xajax.

Шаг 2: Функция xajax на стороне сервера function makeBold($p_sArg) { $sOut = ».$p_sArg.»; $objResponse is new xajaxResponse(); $objResponse->addAssign(‘my_element’, ‘innerHTML’, $sOut); return $objResponse->getXML(); } Функция получает строковый параметр $p_sArg в качестве аргумента и возвращает его в тегах .

Первым делом мы инициализируем объект xajaxResponse который будет обрабатывать ответ на клиентской стороне. Вторым мы назначаем элемент HTML, который будет обновлятся посредством объекта xajaxResponse.

Метод xajaxResponse->addAssign() имеет 3 аргумента:

Значение id тега элемента HTML на нашей странице Свойство, которое мы хостим изменить на стороне клиента Данные, которые мы хотим передать на сторону клиента В заключении, мы возвращаем ответ используя метод xajaxResponse->getXML().

Эти действия ВСЕГДА совершаются на стороне сервера посредством функций Ajax functions. Но здесь я хочу рассказать немного больше о классе xajaxResponse. Кроме того о методе я хочу рассказать поподробней xajaxResponse->addAssign().

Я взял список ниже с домашней страницы xajax и добавил несколько пояснений.

addAssign($sTargetId,$sAttribute,$sData)

Назначает свойству ($sAttribute) элемента, с id равным $sTargetId новые данные ($sData).

В связи с этим мы можем заменять данные определенного элемента новыми, сгенерированными на сервере.

$objResponse->addAssign(«contentDiv»,»innerHTML», «Some Text»);

$objResponse->addAssign(«checkBox1″,»checked»,»true»);

addAppend($sTargetId,$sAttribute,$sData)

Добавляет после, данные ($sData) к свойству элемента ($sAttribute), с id равным $sTargetId. Это значит, что в содержание свойства элемента будет находится старое значение, после которого добавлен результат выполнения функции на стороне сервера.

$objResponse->addAppend(«contentDiv»,»innerHTML», «Some Text»);

addPrepend($sTargetId,$sAttribute,$sData)

Добавляет перед, данные ($sData) к свойству элемента ($sAttribute), с id равным $sTargetId.

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

$objResponse->addPrepend(«contentDiv»,»innerHTML», «Some Text»);

addReplace($sTargetId,$sAttribute,$sSearch,$sData) заменяет все вхождения поиска ($sSearch) данными ($sData) в свойстве ($sAttribute) элемента HTML с id = $sTargetId

$objResponse->addReplace(«contentDiv»,»innerHTML», «text»,»text»);

addClear($sTargetId,$sAttribute) Удаляет значение свойства($sAttribute) элемента HTML с id=$sTargetId

$objResponse->addClear(«Input1″,»value»);

addCreate($sParentId, $sTagname, $sId, $sType)

Добавляет элемент-потомок ($sTagName) существующего элемента с id= $sParentId, и назначает id элемента-потомка ($sId), также можно задать тип элемента потомка $sType.

$objResponse->addCreate(«form1″,»input», «pass», «password»);

addRemove($sElementId)

Удаляет элемент с id=$sElementId из вашего приложения

$objResponse->addRemove(«div1»);

addAlert($sMsg) Показывает предупреждение javascript c текстом = $sMsg $objResponse->addAlert(«The server said: Hi!»);

addScript($sJS) Выполняет код JavaScript, содержащийся в $sJS.

Этим мощным методом мы можем отсылать на сторону клиента для немедленного исполнения.

$objResponse->addAlert(«var txt = prompt(‘get some text’);»);

Шаг 3: Для всего этого создаем оболочку. После установки одной или нескольких функций конечно же ничего не случается.

Мы должны сделать некоторые обязательные вещи:

$objAjax = new xajax(); $objAjax->registerFunction(‘makeBold’);

$objAjax->processRequests();

Первым делом мы создаем экземпляр класса xajax. Этот обект будет обрабатывать все события. Вторым мы регистрируем функцию для объекта xAJAX, которую ранее создали.

Делаем это посредством метода xajax->registerFunction().

В заключении мы можем обработать запросы методом xajax->processRequests().

Вы удивитесь ‘Ну и что мы с этого получили?’.

Остался только один шаг для того чтобы доставить до клиентской стороны всю мощь языка PHP. После создания функций и установки объекта xAJAX мы можем отправлять HTML с сервера. Теперь мы добавим xAJAX на страницу HTML, для этого используем простой код, который должен располагаться в теге :

$objAjax->printJavascript();

Теперь мы можем закончить нашу страницу и использовать функции которые мы описали на первых шагах, напрямую со стороны клиента. В Для завершения нашего примера нам нужно взять элемент HTML с ID = ‘my_element’:

I’m gonna have my ass kicked by xajax!(этот юмор переводить не буду)
Если мы добавим ссылку на страницу вызывающую наши функции с сервера, то они выделят текст жирным шрифтом без перезагрузки. Вид этой ссылки приведен ниже: Kick his ass! Ура, мы сделали это! Мы создали нашу первую AJAX ссылку. Щелкните по ней, чтобы увидеть магию AJAX. Как вы можете увидеть функции с сервера всегда вызывается посредством javascript функции с таким же именем, только с префиксом xajax_. В нашем примере мы вызываем xajax_makeBold().

Мы используем document.getElementById(‘my_element’) для изменения содержания элемента HTML. Мы можем определить содержание этого элемента как заключенного в теги и . Двигаемся дальше Это всё? По основам, все! Это действительно легко. Конечно, немного больше вы узнаете, дочитав статью до конца, основные принципы вы уже получили. Теперь продемонстрируем мощь библиотеки и легкость использования в полнофункциональном приложении.

Демонстрации имеют полностью документированный код с понятными объяснениями, как это все работает. Поэтому если статья вас заинтересовала создайте мини сайт и посмотрите xAJAX в действии.

Посмотреть демо сайт!

И в заключении Если вы могли заметить, при прочтении этой статьи, что создание сайтов на AJAX не так сложно, как вы могли себе представить. Библиотека xAJAX сделана на границе Ajax и PHP, что позволяет писать приложения почти также легко как и на обычном PHP. Конечно, есть множество других библиотек, которые определенно стоит посмотреть. Я просто выбрал xajax потому что его можно непринужденно использовать, и при этом имеет такие большие возможности. Я надеюсь что эта статья будет для вас полезна.

Счастливо поAJAXить!

Обновлено: Дж. Макс Вилсон, создатель xajax сообщил прекрасную новость:

Привет. Я создатель php библиотеки xAJAX. Спасибо за презентацию (прим. перев. : автор проводил презентацию xAJAX)! Сейчас мы ведем сложную работу над новым релизом xAJAX. Мы выпускаем бета версию на следующей неделе. Новые изменения включают: Новая обработка ошибок: Ошибки, которые не являются критическими могут теперь скрываться и записываться только в лог файл или показываться пользователю в предупреждениях. ООП: Вы теперь можете регистрировать объекты и статические методы для вызова через xAJAX.

Эта особенность делает xAJAX легким для применения в различных ООП CMS-разработках (CMS – система управления сайтом). Локализация: xajax по умолчанию использует UTF-8, но мы добавляем возможность определять нужную вам кодировку. Регистрация внешних функций: вы можете теперь регистрировать функции во внешних файлах .php и xajax будет динамически включать файл и вызывать функцию только если она запрошена. Мы имеем сообщество разработчиков, использующих xajax.

Оригинал www.i-marco.nl/weblog/archive/2005/11/12/easy_ajax_for_the_masses_with
Автор: Марко Ван Хилкам
Перевод: Федоринов Григорий

Источник: www.myjoomla.ru


1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 3,40 out of 5)
Loading...

Оставить комментарий







Авторам:

Популярные статьи:

Web-просмотрщик картинок. Lightbox2 (14)
AJAX скрипт для определения Google Pagerank (13)
Карта кликов вашего сайта. ClickHeat (13)
Анимация загрузки: AjaxLoad (13)
Чекбокс с прозрачностью (10)