И так что такое AJAX? Если вы нне знаете ответ на данный вопрос то рекомендую почитать здесь, если же вам понятны принципы работы AJAX приложений то нет нужды читать все это))
В первую очередь мы рассмотрим методы отладки.
В GoogleChrome вы можете воспользоватся инструментами разработчика(ctrl+Shift+I) вкладка Resources -> XHR
В Mozilla FireFox с установленным плагином FireBug вкладка сеть-> XHR
Все ответы переданные асинхронно через объект XMLHttpRequest будут отображатся
в этих панелях.
Теперь рассмотрим механизм AJAX реализованный в DLE.
В принципе все стандартно:
1.формирование заголовка
2.отправка запроса на сервер
3.получение ответа
4.выполнение функции по завершению основных действий.
Методы имеющиеся в DLE:
var ajax = new dle_ajax();
Присваеваем переменной ajax методы реализованные в dle_ajax(), через данную переменную мы будем вызывать все методы которые потребуются для передачи запроса серверу.
var varsString = "";
Объявляем переменную varsString.
ajax.onShow ('');
Метод onShow ('') предназначен для вывода скрытого элемента div во время выполнения запроса, данный способ не всегда отвечает нашим требованиям поэтому можно проводить другие действия во время передачи данных, например вставить в текущий элемент предназначенный для приема ответа от сервера gif анимацию.
ajax.setVar("", '' );
Метод setVar() устанавливает имя=значение переменной в запросе на сервер.
ajax.requestFile = ""
Переменная requestFile может быть указана при вызове экземпляра функции например так:
var ajax = new dle_ajax(файл к которому обращаемся);
или же указанием через ajax так:
ajax.requestFile = dle_root + "файл к которому обращаемся"
следует обратить внимание на появившуюся переменную dle_root в которой объявлен путь к корневой директории сайта, обычно эта переменная определена на странице:
var dle_root = '/';
если же она не определены то следует явно указать перед, или в функции с которой вы будете работать.
ajax.method
Данная переменная определяет метод передачи данных на сервер, по умолчанию её значение "POST", так же доступен метод "GET".
ajax.element
Переменная element должна содержать ID элемента в который будет возвращен ответ сервера, следует отметить что частой ошибкой начинающих остается определение нескольких ID с одинаковыми именами) во избежание ошибок следует соблюдать уникальность имен ID элементов на странице.
ajax.onCompletion = function(){функция()
}
Метод onCompletion фаполняется после завершения обмена данными между клиентом и сервером.
ajax.execute = true;
Переменная execute отвечает за обработку ответа сервера, если в ответе предполагается наличие кода JS то параметр true обеспечит его работоспособность в дальнейшем на стороне клиента. По умолчанию значение переменной false.
ajax.add_html
Переменная add_html отвечает за метод вставки ответа, по умолчанию её значение false при этом содержимое ответа заменит текущие содержание элемента element(ajax.element="id1"), при значение true произойдет добавление ответа к текущему содержимому элемента на странице.
ajax.sendAJAX(varsString)
Последним выэывается метод sendAJAX который отправляет сформированные переменные ajax.setVar("var1", 'val1' ); ajax.setVar("var2", 'val2' ); с помощю созданного объекта XMLHttpRequest на сторону сервера.
Теперь мы можем приступить к созданию серверного файла php.
Пример файла который примет наш запрос и выведет результат:
@error_reporting(7);// устанавливаем параметры обработки ошибок
@ini_set('display_errors', true);// устанавливаем параметры обработки ошибок
@ini_set('html_errors', false);// устанавливаем параметры обработки ошибок
@session_start();// начинаем новую сессию
define('DATALIFEENGINE', true);// объявляем константы
define('ROOT_DIR', '../..');// объявляем константы
define('ENGINE_DIR', '..');// объявляем константы
include ENGINE_DIR . '/data/config.php';//подключаем файлы необходимые для дальнейшей работы
require_once ENGINE_DIR . '/modules/functions.php';
require_once ENGINE_DIR . '/classes/mysql.php';
require_once ENGINE_DIR . '/data/dbconfig.php';
require_once ENGINE_DIR . '/modules/sitelogin.php';
/**
* Определение групп пользователей, в дальнейшем это может пригодится в случае если мы хотим отдавать разные результаты разным группам
* также при подключение файла sitelogin.php мы определили параметры пользовтеля которые находятся в переменной $member_id
* */
$user_group = get_vars("usergroup");
if (!$user_group)
{
$user_group = array();
$db->query("SELECT * FROM " . USERPREFIX . "_usergroups ORDER BY id ASC");
while ($row = $db->get_row())
{
$user_group[$row['id']] = array();
foreach ($row as $key => $value)
{
$user_group[$row['id']][$key] = $value;
}
}
set_vars("usergroup", $user_group);
$db->free();
}
if (!$is_logged)
$member_id['user_group'] = 5;
//здесь ваш код, следует заметить что ответ лучше всего поместить в переменную $buffer которая будет выведена после установки заголовка
if ($_REQUEST['action'] == "test")
{
$buffer = "Ответ от сервера";
}
@header("Content-type: text/css; charset=" . $config['charset']);
echo $buffer;
Пример функции выполняемой на стороне клиента:
function test1(){
var ajax = new dle_ajax();
var varsString = "";
ajax.onShow ('');
ajax.setVar("action", 'test');
ajax.requestFile = dle_root + "engine/ajax/file_1.php";
ajax.method = 'POST';
ajax.element = 'my_div1';
ajax.onCompletion = function(){aler('я выполнилась')
}
ajax.add_html = true;
ajax.execute = true;
ajax.sendAJAX(varsString);
return false;
};
Думаю принцип действия понятен, в следующем примере мы отправим произвольное количество переменных в тестовый файл, это может пригодится при отправке форм заказов, обратной связи и тд.
function test1(){
var ajax = new dle_ajax();
var varsString = "";
ajax.onShow ('');
ajax.setVar("action", 'test');
var param =['id1','id2','id3','id4','id5','id6','id7','id8','id9','id10','id11','id12','id13','id14','id15','id16','id17','id18' ];
for(var key in param){
if(document.getElementById(param[key])){
ajax.setVar('variable['+[param[key]]+']' , ajax.encodeVAR( document.getElementById(param[key]).value ));
}
}
ajax.requestFile = dle_root + "engine/ajax/file_1.php";
ajax.method = 'POST';
ajax.element = 'my_div1';
ajax.onCompletion = function(){aler('я выполнилась')
}
ajax.add_html = true;
ajax.execute = true;
ajax.sendAJAX(varsString);
return false;
};
В данной функции с помощь цикла вы установите значение переменных в массиве variable с ключами с id1 по id18 равными значению соответствующих полей с идеинтификаторами id1 - id18 в документе и отправите их на сервер))
На стороне сервера вы сможете получить данные из массива POST или GET в зависимости от выбранного метода передачи.
$_POST['variable']['id1']
//значение поля с id1 на странице с которои были отправленны данные, вы можете просто распечатать массив пост чтобы убедиться в успешной
//передаче данных.
В следующем уроке мы напишем модуль с использованием данной технологии, какой это будет модуль определяете вы, предложения по функционалу оставляйте в комментариях.
