[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / AJAX /

Simple AJAX Code-Kit (SACK) и движок DataLife

Источник: http://ajax.nnm.ru/

Рыская в интернете в поисках Ajax-готового новостного движка, я наткнулся на давно всем известный . Хотя этот довольно продвинутый php ресурс и содержит элементы Ajax, они по-моему не до конца раскрыты и используются довольно скупо. К сожалению, в самой документации движка ничего не поведано на тему как же использовать Ajax и создавать свои собственные модули. Придется эту заколдованную часть раскапывать самому. Тем, кто столкнулся с подобной проблемой, будет безинтересным узнать некоторые подробности , который довольно идентичен Ajax-движку DataLife. В качестве прмера используется обыкновенный авторизационный модуль.


SACK можно назвать одним из самых простых и нетребовательных к броузеру Ajax движков, который не требует особых знаний JavaScript или PHP. Особенно для начинающих строителей веб портала SACK позволит завершить проект в самое короткое время. SACK 1.2 включен в блоговый сайт WordPress 2.0 , что придает движку довольно значимый авторитет. SACK разработан Gregory Wild-Smith .


Простой JavaScript пример запроса

1. Создаем наш пользовательский JavaScript файл test.js, в котором описывам следующие функции:
whenLoading() – информируем пользователя о том, что создается SACK и готовятся данные к отправке.
whenLoaded() – информируем пользователя о том, что послан запрос к серверу и данные отправлены.
whenInteractive() – пока ожидаем ответ от сервера, то можем показать какую-нибудт движущуюся картинку или прогресс бар.
whenCompleted() - обрабатываем полученные данные и показываем результат.
doit() – этот код непосредственно создает SACK и устанавливает параметры запроса.

Первая строка var ajax = new sack(); создает копию SACK объекта.

 
  1. // незабудьте заменить первую строку, если хотите применить этот код в DataLife на эту:
    
  2. // var ajax = new dle_ajax();
    
  3. 
    		
  4. function whenLoading(){
    
  5.    document.getElementById('statusinfo').innerHTML = "<p>Отправляем данные...</p>";
    
  6. }
    
  7. 
    		
  8. function whenLoaded(){
    
  9.    document.getElementById('statusinfo').innerHTML = "<p>Данные отправлены...</p>";
    
  10. }
    
  11. 
    		
  12. function whenInteractive(){
    
  13.    document.getElementById('statusinfo').innerHTML = "<p>Получаем ответ...</p>";
    
  14. }
    
  15. 
    		
  16. function whenError(){
    
  17.    document.getElementById('statusinfo').innerHTML = "<p>Ошибка...</p>";
    
  18. }
    
  19. 
    		
  20. function whenCompleted(){ 
    
  21. 	if (ajax.responseStatus){
    
  22. 		var string = "<p>Статус код: " + ajax.responseStatus[0] + "</p><p>";
    
  23. 		      string += "Сообщение" + ajax.responseStatus[1] + "</p><p>";
    
  24. 		      string += "отправлен URLString: " + ajax.URLString + "</p>";
    
  25. 	} else {
    
  26. 		var string = "<p> отправлен URLString: " + ajax.URLString + "</p>";
    
  27. 	}
    
  28.     
    
  29.    document.getElementById('statusinfo').innerHTML = "<p></p>";
    
  30.    document.getElementById('sackdata').innerHTML = string;	
    
  31. }
    
  32. 
    		
  33. function doit(){
    
  34. 	var form = document.getElementById('myForm');
    
  35. 
    		
  36. 	ajax.AjaxFailedAlert = "Включите JavaScript, или используйте иной броузер";	
    
  37.                      ajax.setVar("login_name", form.user.value);
    
  38.                      ajax.setVar("login_password", form.pass.value);
    
  39. 	ajax.requestFile = "login.php";
    
  40. 	ajax.method = "POST";
    
  41. 	ajax.element = 'replaceme';
    
  42. 	ajax.onLoading = whenLoading;
    
  43. 	ajax.onLoaded = whenLoaded; 
    
  44. 	ajax.onInteractive = whenInteractive;
    
  45.                      ajax.onError = whenError;
    
  46. 	ajax.onCompletion = whenCompleted;
    
  47. 	
    
  48.                      ajax.runAJAX();
    
  49. // незабудьте заменить первую строку, если хотите применить этот код в DataLife на эту:
    
  50.                    //ajax.sendAJAX();
    
  51. }

В движке DataLife необходимо заменить некоторые переменные и методы на аналогичные (только с другим названием):
#1. var ajax = new sack(); Заменить на var ajax = new dle_ajax();
#49. ajax.runAJAX(); Заменить на ajax.sendAJAX

Рассмотрим функцию doit() более подробно:

• ajax.AjaxFailedAlert = string; - Содержит текст сообщения, которое будет показано пользователю, если его броузер не поддерживает XMLHttpRequest. Если необходимо отключить вывод такого сообщения, посто укажите null. Переменую нет необходимости указывать – содержится сообщение по умолчанию.
• ajax.setVar (string name, string value); – позволяет добавить переменную, которая будет добавлена в URLString запрос в виде пары &name=value. В нашем примере мы добавляем имя myTextBox, которое будет содержать данные из текстового поля формы. Данные не будут кодироваться в этой функции. Если необходимо закодировать данные в Unicode, то используйте аналогичную функцию encVar (string name, string value).
• ajax.requestFile = string; - переменная, которая содержит имя файла, куда будет отправлятся запрос. В нашем случае мы будем отправлять запрос в login.php.
• ajax.method = string; - любой доступный HTTP метод. Наиболее распространенные методы: POST - если посылаются на сервер данные для обработки или GET – если получаем от сервера информацию без предварительной отправки данных запроса.
• ajax.element = string; - Элемент страницы, который будет замещен текстом, полученным от сервера после запроса.
• ajax.onLoading = function; - указывает на JavaScript функцию, которая запускается в момент инициализации SACK.
• ajax.onLoaded = function; - указывает на JavaScript функцию, которая запускается после того, как SACK закончил инициализацию.
• ajax.onInteractive = function; - указывает на JavaScript функцию, которая запускается после того, как данные отправлены на сервер и ожидается получение результата.
• ajax.onCompletion = function; - указывает на JavaScript функцию, которая запускается после того, как получен ответ с результатами обработки запроса.
• ajax.onError = function; - указывает на JavaScript функцию, которая запускается, если получен ответ сервера с ошибкой или с иным кодом шапки нежели HEADER 200 OK. Иногда в целях конспирации полезно отправлять не 200 код (обычный код любой веб страницы), а код переадресации 3хх, 404 – страница не найдена, или 5хх – gateway error... Соответствующий код можно обработать в этой функции.
• ajax.encodeURIString = boolean; Переменная по умолчанию установлена в true. Кода переменная уснановлена в false, то посылаемые данные должны содержать только ASCII код или должны быть предварительно обработаны (например, если мы хотим убрать ненужный код из посылаемый на сервер данных – полезно при защите от хакерюг).
• ajax.execute = boolean;
• ajax.runAJAX (string URLString) – наконец-то, запускаем SACK и все, что создали - отправляем на сервер. В переменную urlstring можно пенредать данные в виде имя=данные&имя=данные, но желательно для этих целей применять вышеуказанный метод setVar(), тогда URLString можно не указывать. Класс SACK (или dle_ajax для DataLife) заполняется соответствующими данными (response, responseXML, responseStatus, и так далее – см. ниже). В движке Datalife аналогичная функция называется ajax.sendAJAX (string URLString)

2. Создаем HTML демо страницу, в которую вставляем наш файл test.js между тегами <HEAD>. Необходимо также добавить tw-sack.js – файл самого движка SACK.
 
  1. 	<script type="text/javascript" src="tw-sack.js"></script>
    
  2. <script type="text/javascript" src="test.js"></script>
    
  3. </head>

Чтобы подключить наш скрипт в движке DataLife необходимо вставить строку в переменную $ajax в файле index.php Незабудьте поставить DataLife тег {AJAX} в конце страницы перед </BODY>.
 
  1.                      <script type="text/javascript" src="test.js"></script>
    
  2. HTML;

Теперь создаем саму форму:
 
  1. 	<title>Simple AJAX Code-Kit (SACK) </title>
    
  2. 	<script type="text/javascript" src="test.js"></script>
    
  3. </head>
    
  4. <body>
    
  5.       <form id="myForm" method="POST" action="login.php" >
    
  6. Логин:   <input type="text" name="user" id="user">
    
  7. Пароль: <input type="password" name="pass" id="pass">
    
  8. 	<input type="submit" onClick="doit(); return false;" onDblClick="doit(); return false;" />
    
  9.       </form>
    
  10.    <div id="sackdata"></div>
    
  11. </body>
    
  12. </html>

3. Пишем серверную часть login.php, где обрабатываем отправленные данные
 
  1. $login = $_POST['login_name'];
    
  2. $password = $_POST['login_password'];
    
  3. 
    		
  4. //проверяем базу данных (вставьте свой код)
    
  5. 
    		
  6. // а теперь просто выводим тестовую информацию
    
  7. ob_start();
    
  8. 	print_r($_POST);
    
  9. $postdata = ob_get_clean();
    
  10. 
    		
  11. ob_start();
    
  12. 	print_r($_GET);
    
  13. $getdata = ob_get_clean();
    
  14. 
    		
  15. ob_start();
    
  16. 	print_r($_SERVER);
    
  17. $serverdata = ob_get_clean();
    
  18. 
    		
  19. $return = '<p>Получена следующая информация:</p>
    
  20. <p>Логин: <strong>'. $login .'</strong><br />
    
  21. Пароль: <strong>'. $password .'</strong></p>
    
  22. <table width="334" border="0" cellspacing="0" cellpadding="0">
    
  23.   <tr><th width="168" scope="col">POST data</th>
    
  24.     <th width="166" scope="col">GET data</th></tr><tr>
    
  25.     <td>$postdata</td>
    
  26.     <td>$getdata</td></tr></table><br />
    
  27. <table width="333" border="0" cellspacing="0" cellpadding="0">
    
  28.   <tr><th width="333" scope="col">SERVER data</th>
    
  29.   </tr><tr><td>$serverdata</td></tr></table> 
    
  30. HTML;
    
  31. echo $return;
    
  32. ?>


Авторизация пользователя в DataLife

Для того, чтобы авторизовать пользователя необходимо отправить POST запрос со следующими полями:
login_name=текстовое поле с именем пользователя
login_password=текстовое поле с паролем
action=login – закрытые даные формы
login=submit - закрытые даные формы

Для проверки данных вставляем в функцию doit()следующие определения:

 
  1.              ...
    
  2. //это специфические поля, используемые DataLife для авторизации пользователя
    
  3.             ajax.onShow ("Проверяем Ваш логин и пароль");
    
  4.             ajax.setVar("login_name", form.user.value);
    
  5.             ajax.setVar("login_password", form.pass.value);
    
  6.             ajax.setVar("action", "login");
    
  7.             ajax.setVar("login", "submit");
    
  8.             ajax.execute=true;
    
  9.            // не указывайте переменную ajax.element
    
  10.            // иначе JavaScript будет показываться пользователям
    
  11. }

Добавили дополнительные переменную и метод:

• ajax.execute = bool; - По умолчанию установлено false. Если переменную установить в true, то возвращенный ответ сервера будет расцениваться как JavaScript, а не как простой текст. По окончении обработки запроса будет вызвана функция runResponse, которая и запустит наш JavaScript.
• ajax.onShow(string); - Этот метод существует только в DataLife и указанный текст будет выводится в блоке, который появляется во время работы Ajax. Хотите, чтобы этот прямоугольник не показывался при работе ajax – закомментируйте эту строку или вообще уберите.


Пишем login.php, где обрабатываем отправленные данные
 

  1. //Обыкновенный скрипт модуля движка DataLife
    
  2. @error_reporting(7);
    
  3. @ini_set('display_errors', true);
    
  4. @ini_set('html_errors', false);
    
  5. 
    		
  6. define('DATALIFEENGINE', true);
    
  7. define('ROOT_DIR', '../..');
    
  8. define('ENGINE_DIR', '..');
    
  9. 
    		
  10. require_once ENGINE_DIR.'/data/config.php';
    
  11. require_once ENGINE_DIR.'/inc/mysql.php';
    
  12. require_once ENGINE_DIR.'/data/dbconfig.php';
    
  13. 
    		
  14. require_once ROOT_DIR.'/language/'.$config['langs'].'/website.lng';
    
  15. require_once ENGINE_DIR.'/modules/functions.php';
    
  16. 
    		
  17. // вставьте модуль sitelogin.php, который выполняет непосредственно всю авторизацию
    
  18. require_once ENGINE_DIR.'/modules/sitelogin.php';
    
  19. 
    		
  20. // выводим заголовок страницы
    
  21. @header("HTTP/1.0 200 OK");
    
  22. @header("HTTP/1.1 200 OK");
    
  23. @header("Cache-Control: no-cache, must-revalidate, max-age=0");
    
  24. @header("Expires: 0");
    
  25. @header("Pragma: no-cache");
    
  26. @header("Content-type: text/javascript; charset=".$config['charset']);
    
  27. 
    		
  28. //проверяем правильность запроса
    
  29. if ($is_logged) {
    
  30. /*
    
  31.  	Можем просто перегрузить страницу 
    
  32.  	или добавьте Ваш собственный код, чтобы вывести
    
  33.  	модули, видимые только зарегистрированным пользователям 
    
  34.  	без перезагрузки страницы
    
  35. */
    
  36.           $respond = "document.location.href=dle_root";
    
  37. } else {
    
  38.           $err = "<font color="red">Проверьте Ваш логин или пароль</font>";
    
  39.           $respond = "document.getElementById('statusinfo').innerHTML = "$err"";
    
  40. }
    
  41. echo $respond;
    
  42. ?>


Дополнительные переменные, которые возвращаются вместе с ответом сервера:

• ajax.responseStatus (Array) – Массив, который возвращает header статус: индекс [0] - указывает на номерной код заголовка (например, 200 – при удачном соединении), а индекс [1] - возвращает текствое описание статуса
• ajax.failed (Boolean) – Позволяет определить, поддерживает ли броузер XMLHttpRequest (true) или не поддерживает (false).
• ajax.response (String) – Текст, полученный от сервера.
• ajax.responseXML (String) – Ответ вервера в форме xml.
• ajax.vars (Array) – Содержит данные, которые отправлены серверу через URLString в форме name/value, при этом массив строится в форме {['name'] => 'value'}. Так же содержит статус закодированных данных.

Также можно использовать дополнительные методы:

sack (string file) – инициализирует SACK. Необязательный метод, который указывает путь и имя файла, доступ к которому будет осуществлен через XMLHttpRequest и содержание файла будет отправлено в переменную requestFile.
createAJAX() - Метод-конструктор данных SACK, который инициализирует объект XMLHttpRequest для совместимости с различными броузерами. Если не поддердивается, то переменная failed выставляется в true.
processURLString (string string, boolean encode); - разбивает сформатированную строку URLString и отправляет данные в форме name=value в различные функции. Установка encode в true указывает на то, должны ли данные кодироваться
createURLString (string URLstring) – Создает корректно сформатированную переменную URLString из любй существующей или переданной строки.
resetData – Обнуляет все данные, возвращет установки по умолчанию.
resetFunctions – Обнуляет функции onEvent, возвращет установки по умолчанию.
reset() - Запускает resetData и resetFunctions, обнуляя все даные до изначально установленного объекта ajax.

Возможно, существуют и другие неведомые переменные и функции в движке DataLife, которые, как мы надеемся, когда-нибудь станут явью.

Вуаля!




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / AJAX /

Asynchronous JavaScript and XML
06-12-2009   

Когда существующих возможностей становиться мало, а совершенствовать существующее уже некуда, тогда и происходит технологический прорыв. Таким прорывом и есть AJAX (Asynchronous JavaScript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, не перезагружаясь, сама догружает нужные пользователю данные. AJAX - один из компонентов концепции DHTML... подробнее

Кол. просмотров: общее - 3369 сегодня - 0

AJAX. Взаимодействие с жизненным циклом страницы
06-12-2009   

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

Кол. просмотров: общее - 3366 сегодня - 1

xAJAX: Легкий AJAX в массы
03-12-2009   

Не так давно я говорил, что буду предоставлять информацию относительно PHP и Ajax. На конференции которую я провел на прошлой неделе 10 ноября 2005г. Я также обещал людям что переведу все что я приготовил для публикации на моем блоге (автор так и не перевел все это дело на Голландский, тем самым очень мне облегчил перевод )... подробнее

Кол. просмотров: общее - 3536 сегодня - 0

«Hello, закладки!» - Добавить в закладки на AJAX
03-12-2009   

Давайте обсудим более рациональные и эффективные функции для нашего любимого сайта. Начнем с самой простой вещи - кнопки Добавить в закладки. По моему, это самое наболевшее место, которое так и просится чтобы его Ajax’стили... подробнее

Кол. просмотров: общее - 238371 сегодня - 0

Simple AJAX Code-Kit (SACK) и движок DataLife
03-12-2009   

Рыская в интернете в поисках Ajax-готового новостного движка, я наткнулся на давно всем известный . Хотя этот довольно продвинутый php ресурс и содержит элементы Ajax, они по-моему не до конца раскрыты и используются довольно скупо... подробнее

Кол. просмотров: общее - 3612 сегодня - 1



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects