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

(0 голосов)

Источник: 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 объекта.

	// незабудьте заменить первую строку, если хотите применить этот код в DataLife на эту:

```
	// var ajax = new dle_ajax();
	
```
```
	function whenLoading(){
	
```

	   document.getElementById('statusinfo').innerHTML = "<p>Отправляем данные...</p>";

```
	}
	
```
```
	function whenLoaded(){
	
```

	   document.getElementById('statusinfo').innerHTML = "<p>Данные отправлены...</p>";

```
	}
	
```
```
	function whenInteractive(){
	
```

	   document.getElementById('statusinfo').innerHTML = "<p>Получаем ответ...</p>";

```
	}
	
```
```
	function whenError(){
	
```

	   document.getElementById('statusinfo').innerHTML = "<p>Ошибка...</p>";

```
	}
	
```
```
	function whenCompleted(){ 
	
```
```
		if (ajax.responseStatus){
	
```

			var string = "<p>Статус код: " + ajax.responseStatus[0] + "</p><p>";

			      string += "Сообщение" + ajax.responseStatus[1] + "</p><p>";

			      string += "отправлен URLString: " + ajax.URLString + "</p>";

```
		} else {
	
```

			var string = "<p> отправлен URLString: " + ajax.URLString + "</p>";

```
		}
	
```
```
	    
	
```

	   document.getElementById('statusinfo').innerHTML = "<p></p>";

	   document.getElementById('sackdata').innerHTML = string;

```
	}
	
```
```
	function doit(){
	
```

		var form = document.getElementById('myForm');

		ajax.AjaxFailedAlert = "Включите JavaScript, или используйте иной броузер";

	                     ajax.setVar("login_name", form.user.value);

	                     ajax.setVar("login_password", form.pass.value);

```
		ajax.requestFile = "login.php";
	
```
```
		ajax.method = "POST";
	
```
```
		ajax.element = 'replaceme';
	
```
```
		ajax.onLoading = whenLoading;
	
```
```
		ajax.onLoaded = whenLoaded; 
	
```

		ajax.onInteractive = whenInteractive;

	                     ajax.onError = whenError;

```
		ajax.onCompletion = whenCompleted;
	
```
```
		
	
```
```
	                     ajax.runAJAX();
	
```

	// незабудьте заменить первую строку, если хотите применить этот код в DataLife на эту:

	                   //ajax.sendAJAX();

```
	}
	
```

В движке 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.

```
		…
	
```

		<script type="text/javascript" src="tw-sack.js"></script>

	<script type="text/javascript" src="test.js"></script>

```
	</head>
	
```

Чтобы подключить наш скрипт в движке DataLife необходимо вставить строку в переменную $ajax в файле index.php Незабудьте поставить DataLife тег {AJAX} в конце страницы перед </BODY>.

```
		…
	
```

	                     <script type="text/javascript" src="test.js"></script>

```
	HTML;
	
```

Теперь создаем саму форму:

		<title>Simple AJAX Code-Kit (SACK) </title>

		<script type="text/javascript" src="test.js"></script>

```
	</head>
	
```
```
	<body>
	
```

	      <form id="myForm" method="POST" action="login.php" >

	Логин:   <input type="text" name="user" id="user">

	Пароль: <input type="password" name="pass" id="pass">

		<input type="submit" onClick="doit(); return false;" onDblClick="doit(); return false;" />

```
	      </form>
	
```
```
	   <div id="sackdata"></div>
	
```
```
	</body>
	
```
```
	</html>
	
```

3. Пишем серверную часть login.php, где обрабатываем отправленные данные

```
	$login = $_POST['login_name'];
	
```

	$password = $_POST['login_password'];

	//проверяем базу данных (вставьте свой код)

```
	…
	
```

	// а теперь просто выводим тестовую информацию

```
	ob_start();
	
```
```
		print_r($_POST);
	
```
```
	$postdata = ob_get_clean();
	
```
```
	ob_start();
	
```
```
		print_r($_GET);
	
```
```
	$getdata = ob_get_clean();
	
```
```
	ob_start();
	
```
```
		print_r($_SERVER);
	
```
```
	$serverdata = ob_get_clean();
	
```

	$return = '<p>Получена следующая информация:</p>

	<p>Логин: <strong>'. $login .'</strong><br />

	Пароль: <strong>'. $password .'</strong></p>

	<table width="334" border="0" cellspacing="0" cellpadding="0">

	  <tr><th width="168" scope="col">POST data</th>

	    <th width="166" scope="col">GET data</th></tr><tr>

```
	    <td>$postdata</td>
	
```

	    <td>$getdata</td></tr></table><br />

	<table width="333" border="0" cellspacing="0" cellpadding="0">

	  <tr><th width="333" scope="col">SERVER data</th>

	  </tr><tr><td>$serverdata</td></tr></table>

```
	HTML;
	
```
```
	echo $return;
	
```
```
	?>
	
```

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

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

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

```
	             ...
	
```

	//это специфические поля, используемые DataLife для авторизации пользователя

	            ajax.onShow ("Проверяем Ваш логин и пароль");

	            ajax.setVar("login_name", form.user.value);

	            ajax.setVar("login_password", form.pass.value);

	            ajax.setVar("action", "login");

	            ajax.setVar("login", "submit");

```
	            ajax.execute=true;
	
```

	           // не указывайте переменную ajax.element

	           // иначе JavaScript будет показываться пользователям

```
	            …
	
```
```
	}
	
```

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

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

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

	//Обыкновенный скрипт модуля движка DataLife

```
	@error_reporting(7);
	
```
```
	@ini_set('display_errors', true);
	
```
```
	@ini_set('html_errors', false);
	
```
```
	define('DATALIFEENGINE', true);
	
```
```
	define('ROOT_DIR', '../..');
	
```
```
	define('ENGINE_DIR', '..');
	
```

	require_once ENGINE_DIR.'/data/config.php';

	require_once ENGINE_DIR.'/inc/mysql.php';

	require_once ENGINE_DIR.'/data/dbconfig.php';

	require_once ROOT_DIR.'/language/'.$config['langs'].'/website.lng';

	require_once ENGINE_DIR.'/modules/functions.php';

	// вставьте модуль sitelogin.php, который выполняет непосредственно всю авторизацию

	require_once ENGINE_DIR.'/modules/sitelogin.php';

	// выводим заголовок страницы

```
	@header("HTTP/1.0 200 OK");
	
```
```
	@header("HTTP/1.1 200 OK");
	
```

	@header("Cache-Control: no-cache, must-revalidate, max-age=0");

```
	@header("Expires: 0");
	
```
```
	@header("Pragma: no-cache");
	
```

	@header("Content-type: text/javascript; charset=".$config['charset']);

	//проверяем правильность запроса

```
	if ($is_logged) {
	
```
```
	/*
	
```

	 	Можем просто перегрузить страницу

	 	или добавьте Ваш собственный код, чтобы вывести

	 	модули, видимые только зарегистрированным пользователям

	 	без перезагрузки страницы

```
	*/
	
```

	          $respond = "document.location.href=dle_root";

```
	} else {
	
```

	          $err = "<font color="red">Проверьте Ваш логин или пароль</font>";

	          $respond = "document.getElementById('statusinfo').innerHTML = "$err"";

```
	}
	
```
```
	echo $respond;
	
```
```
	?>
	
```

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

• 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, которые, как мы надеемся, когда-нибудь станут явью.

Вуаля!

« Рассмотрение технологий Ajax: Часть 2. Измените свою жизнь при помощи		Рассмотрение технологий Ajax: Часть 1. Обзор без рекламных слоганов »

Вернуться

Joomla - компоненты, модули, маботы, сайты - разработка и поддержка

Главное меню

Програмирование Joomla

Программирование

Photoshop

Наши работы

Услуги

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

Ajax

CSS

DHTML