 |
|
|
|
xAjax – простой путь создания асинхронных веб-приложений
xAjax – простой путь создания асинхронных веб-приложений Если вы в полную силу используете DHTML, но вам кажется, что даже это не обеспечивает должного уровня интерактивности, или вас смущает то, что после заполнения формы ваша веб-страница недоступна клиенту, пока не придет ответ от сервера, – самое время начать использовать xAjax. Ajax – мода в веб-программировании Сейчас в Интернете все чаще и чаще появляются сайты, использующие новую технологию, называемую Ajax. Такая популярность объясняется возможностью динамического изменения контента страницы, что фактически превращает обычный браузер в среду выполнения, а гипертекстовый документ – в приложение. Такой эффект достигается за счет совместного использования DHTML (JavaScript + DOM + CSS, но третий пункт скорее опциональный) и любого из серверных языков. Что такое xAjax Новые веяния в программировании сопровождаются появлением новых инструментов, позволяющих облегчить труд программисту – например, IDE и библиотеки готовых функций. Прелесть таких инструментариев заключается в том, что от программиста спрятана «черная» работа, и, более того, она уже сделана за него, осталось только воспользоваться плодами. Конечно, существование таких инструментов не освобождает программиста от необходимости знать внутреннюю схему работы, и не все возможно реализовать с их помощью. Так, для ASP недавно Microsoft выпустила дополнение к Visual Studio – Atlas, набор «компонентов», которые автоматизируют создание запросов на стороне клиента и обработку их на стороне сервера. Но поскольку Visual Studio является коммерческой средой, да и не все сайты хостятся на Windows, то определенный интерес вызывает то, что происходит в Open Source-сообществе. Здесь существует много библиотек. Сегодня речь пойдет о библиотеке xAjax (официальный сайт – www.xajaxproject.org), написанной на для серверного языка PHP. Рассмотрим основные вехи использования этой замечательной библиотеки. Сначала необходимо загрузить библиотеку (например, здесь http://downloads.sourceforge.net/xajax/xajax_0.5_beta2.zip; конечно, лучше посетить http://community.xajaxproject.org, чтобы получить последнюю версию библиотеки). Схема использования библиотеки очень проста – подключаете библиотеку, пишете все необходимые функции PHP и регистрируете их, а xAjax сгенерирует функции-врапперы (wrapper functions) на языке JavaScript, доступ к которым вы сможете получить уже из ваших скриптов. Чтобы ясно и кратко раскрыть смысл и технологию использования xAjax, рассмотрим пример. Исходная ситуация – база данных, PHP, JavaScript и браузер, задача – используя xAjax, обеспечить асинхронный вывод данных из базы данных и их обновление. Задача несложная сама по себе, а уж с использованием xAjax это станет еще проще. Как это работает... Условимся, что библиотека xajax (папки xajax_core и xajax_js) лежит в одном каталоге с индексным файлом. Первая часть HTML\PHP-кода страницы: Листинг 1 01 <html> 02 <head> 03 <title>test</title> 04 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 05 <?php 06 $xajax->printJavascript(""); 07 ?> 08 </head> 09 <script language="javascript"> 10 function getData() 11 { 12 document.getElementById('data').innerHTML='Загрузка...'; 13 xajax_getData(document.getElementById('xid').value); 14 return; 15 } 16 function updateData(frmid) 17 { 18 xajax_updateData(xajax.getFormValues(frmid)); 19 getData(); 20 return; 21 } 22 </script> 23 <body onLoad="xajax_getData(1)"> 24 <div> 25 <h1>Данные</h1> 26 // Введите id // 27 <form> 28 <select id="xid" name="xid" size="1" onChange="getData();"> 29 <option value="1" selected>1</option> 30 <option value="2">2</option> 31 <option value="3">3</option> 32 </select> 33 <div id="data"> 34 // Загрузка... // 35 </div> 36 </div> 37 <div> 38 <h1>Редактирование</h1> 39 <form method="post" name="upForm" id="upForm" onSubmit="updateData(this.id);return false;"> 41 <b>Field-1</b> <input name="editF1" type="text" id="editF1" /> 42 <br /> 43 <b>Field-2</b> <input name="editF2" type="text" id="editF1" /> 44 <br /> 45 <input type="submit" value="Обновить" /> 46 </form> 47 </div> 48 <div id="done"> 49 </div> 50 </body> 51 </html> Здесь нас мало что интересует (но от гипертекстовой разметки никуда не денешься), кроме JavaScript и вставки на PHP. Начнем со второго – код на PHP (листинг 1, строки 5-7) добавляет в HTML инструкции о включении файла с JavaScript, которые сгенерировал xAjax. Такой подход весьма интересен хотя бы тем, что не загромождается код страницы, которую получит клиент. Далее описаны две функции getData() и updateData(frmid) (строки 10-21), здесь по названию понятно, за что они отвечают, но внутри этих функций происходит вызов других – тех самых , что сгенерировал xAjax, основываясь на нашем PHP-коде, который приведен в листинге 2 (к xajax.getFormValues вернемся немного позже). Листинг 2 <?php 01 define("XAJAX_DEFAULT_CHAR_ENCODING", "windows-1251"); 02 require_once("xajax_core/xajax.inc.php"); 03 define("HOST","xxx.xxx.xxx"); 04 define("DBNAME","xxx"); 05 define("DBUSER","xxx"); 06 define("DBPASS","xxx"); 07 $DB = mysql_connect(HOST, DBUSER, DBPASS) or die("Could not connect : " . mysql_error()); 08 mysql_select_db(DBNAME) or die("Could not select database"); 09 function getData($id) 10 { 11 $query = "SELECT field1, field2 FROM mytable WHERE field1= $id"; 12 $result = mysql_query($query) or die("Query failed : ". mysql_error()); 13 $data = mysql_fetch_array($result, MYSQL_ASSOC); 14 mysql_free_result($result); 15 $objResponse = new xajaxResponse(); 16 $response = "<b>поле1</b> - ".$data["field1"]." <b>поле2</b> - ".$data["field2"]; 17 $objResponse->assign("data","innerHTML",$response); 18 $script = "document.getElementById('editF1').value=".$data["field1"]."; document.getElementById('editF2').value='".$data["field2"]."';"; 19 $objResponse->script($script); 20 return $objResponse; 21 } 22 function updateData($frmData) 23 { 24 $query = "UPDATE mytable SET field2='".$frmData["editF2"]."' WHERE field1=".$frmData["editF1"]; 25 $result = mysql_query($query) or die("Query failed : ". mysql_error()); 26 mysql_free_result($result); 27 } 28 $xajax = new xajax(); 29 $xajax->setFlag('DecodeUTF8Input', true); 30 //$xajax->setFlag('debug', true); 31 $xajax->registerFunction("getData"); 32 $xajax->registerFunction("updateData"); 33 $xajax->processRequest(); 34 ?> Второй строкой идет подключение xAjax-библиотеки. Остальной код, пожалуй, стоит просматривать с конца – со строки $xajax = new xajax() (листинг 1, строка 28). Здесь мы создаем новый xAjax-объект и определяем его свойства. Немного о кодировках Если вы хотите работать с кодировками, отличными от UTF-8 (в xAjax пересылка данных между браузером и сервером ведется именно в таком формате), то помимо строки $xajax->setFlag('DecodeUTF8Input', true) (листинг 2, строка 29) необходимо определить константу XAJAX_DEFAULT_CHAR_ENCODING, что и было сделано в первой строке листинга 2, и, как видно, используемая кодировка – Windows-1251. Продолжим... Продолжим разбор листинга 2. Во время написания программы и ее отладки очень интересно знать, что же происходит в ее недрах, обмен какими данными происходит, вызов каких функций производится, а иногда необходимо знать, и сколько времени все это занимает. Разработчики xAjax позаботились об этих вещах: если раскомментировать строку «$xajax->setFlag('debug', true)» (листинг 2, строка 30), то при выполнении каждого запроса браузер откроет дочернее окно (оно будет «незапрашиваемым», и мало-мальски приличный браузер блокирует его, так что, если у вас явно указано блокировать такие окна, разрешите принимать их с вашего узла), в котором и будут отображены все интересующие сведения. Далее с помощью метода registerFunction (листинг 2, строки 31-32) регистрируются все функции, к которым можно будет обратиться из JavaScript, используя префикс xajax_ (который, кстати, можно менять... делается это следующим образом – «$xajax = new xajax("","xajax_");). Ну и наконец, $xajax->processRequest() – разрешаем xAjax обрабатывать асинхронные запросы. Функции работы с БД я комментировать не буду. Займемся более интересным делом – рассмотрим подробнее объект $objResponse = new xajaxResponse() (листинг 2, строка 15). Это и есть тот самый рычаг, с помощью которого можно управлять внешним видом вашей страницы. В качестве примера я использовал метод assign (листинг 2, строка 17), который c параметрами получает id элемента страницы, его тег (можно даже написать style.color) и новое значение тега, и метод script (листинг 2, строка 19) – xAjax позволяет не просто обмениваться данными между клиентом и сервером, но и «действиями»! Больше информации о методах и флагах можно почерпнуть из примеров, которые идут вместе с библиотекой, и из описания класса xajaxResponse. После того как $objResponse получил все «свойства» и «методы», его можно со спокойной совестью передать клиенту. А теперь вернемся к обещанному – xajax.getformvalues (листинг 1, строка 18). Эта функция на входе получает id формы и возвращает массив, который можно передать в PHP-функцию. Этот ассоциативный массив будет доступен на стороне сервера под именем, указанным для параметра в описании получающей функции (в примере – updateData($frmData) (листинг 2, строка 22)). Все просто, но есть две вещи, о которых не стоит забывать при обработке форм:
О безопасности и совместимости О безопасности стоит сказать одно – использование xAjax не освобождает вас от необходимости принимать те же самые меры безопасности, что вы применяете в обычных синхронных запросах (например, замена некорректных символов на escape-последовательности). Пример претендует лишь на роль учебного и не годится для использования в реальных условиях. Совместимость библиотеки с различными браузерами напрямую зависит от того, как они поддерживают JavaScript. Разработчики обещают, что вы сможете использовать xAjax в Firefox, Mozilla (и, возможно, основанных на Mozilla браузерах), IE и Safari. От себя замечу, что библиотека прекрасно себя зарекомендовала и в Opera. А пример был протестирован в Opera 9, IE 7 и Firefox 1.5. Выводы Стоит заметить, что xAjax не является единственной библиотекой в своем роде (аналоги sAjax, cakePHP, при желании в любом поисковике можно найти и больше), но продуманность ее строения и большой функционал делают её не только одной из самых простых в использовании, но и одной из самых мощных. |
Виктор ЕрмолаевКомментарии отсутствуют
| Добавить комментарий |
|
Комментарии могут оставлять только зарегистрированные пользователи |
|
