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 объекта.

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

Вуаля!

При разработке CMS S.Builder наша команда активно использовала AJAX. Теперь вот решили поделиться накопленным опытом. Начнем с этого хабратопика. Не буду здесь затрагивать различные фреймворки и библиотеки. Свой код всегда роднее. Для работы с AJAX-ом в S.Builder написана библиотека sbAJAX. Можете качать и пользоваться :). В этом файле есть функция sbEvalJS. Для тех, кто не знает, объясню. При подгрузке через AJAX и вставке на страницу HTML-кода, содержащего JavaScript, JavaScript выполняться не будет или полезут баги. Эта функция как раз решает поставленную задачу.

Обзор нового релиза самой мощной Ajax библ....

Хотя наш обзор немного запоздал, оригинальный Dojo 1.2 вышел в релизной версии ещё 6-го октября, но сейчас мы наверстаем упущенное. И так, Dojo Toolkit — это самая мощная и гибкая ajax-библиотека из всех, что есть на рынке, она активно развивается и имеет большое комьюнити. Кстати, это самое комьюнити, совместно с компанией Sitepen, имеет ещё несколько проектов, среди которых и Cometd и некоторые другие, не менее интересные, о которых мы скоро вам расскажем. Сегодня же все внимание на флагманский продукт — Dojo 1.2.

Если вы профессиональный веб-разработчик и постоянно имеете дело с разработкой и отладкой сложных AJAX приложений, то наверняка знаете и используете Firebug — плагин для браузера Firefox, предназначенный для отладки и исследования веб-приложений. Текущая его версия, 1.2х достаточно стабильная и функциональна, чтобы помочь в 99% проблем, которые могут возникнуть при разработке. Но и этот инструмент не лишён если не недостатков, то некоторых фич, которые могли бы облегчить работу. И даже идеальный инструмент можно сделать ещё более идеальным, как бы это не звучало.