Разработка клиент-серверной технологии приложения

 

Технология AJAX представляет собой комплекс современных технологий, позволяющих создавать интерактивные веб-приложения нового уровня. Использование AJAX приводит к возможности динамического изменения контента веб-страницы: страница сама будет догружать нужные пользователю данные, при этом полностью не перегружаясь, а загружая лишь изменившиеся данные (рисунок 2.2)

Рисунок 2.2 – Технология AJAX

AJAX – это не проект вашей разработки – это всего лишь спосов передачи динамического контента страниц. Лихо Вы разобрались с проектом. J По анализу у Вас еще кое-что есть, по проектированию – практически ничего. А ведь называется ПРОЕКТ. Короче, читайте пособие, которое я Вам уже Высылал и высылаю еще. Кидайте все и пробуйте, хоть что-то сделать по второй главе на основе пособия и моих замечаний. Третья глава худо бедно сойдет, правда надо бы тоже какие-то поясняющие преамбулы повставлять

Удачи!

 

Продемонстрируем пример использования данной технологии при комплектовании выпускаемой продукции комплектующими (рисунок 2.3):

Рисунок 2.3 – Исходная форма для комплектования состава продукции

Исходный код данной формы:

<select name="selProd" id="selProd" onchange="JavaScript:GetKomplByIdProd();"><option value="-1">...</option><option value="2">Стол офисный №1 «Парламент» </option><option value="3">Стол офисный №2 «Харт» </option><option value="4">Стол офисный №3 «Авалон»</option><option value="5">Зеркало с подсветкой №1</option><option value="6">Зеркало с подсветкой №2</option><option value="7">Зеркало с подсветкой №3</option></select> <div id="ajxKomplProd"></div><br><br><table border="1" cellpadding="1" cellspacing="0"><tbody><tr><th colspan="2">Состав продукции</th></tr><tr align="center"><td>Комплектующие</td><td>Количество</td></tr><tr><td><select name="selTovar" id="selTovar"><option value="-1">...</option><option value="1">Стекло арт. 1524</option><option value="2">Стекло арт. 1525</option><option value="3">Стекло арт. 1587</option><option value="4">Ножка металлическая фигурная арт. 5465</option><option value="5">Ножка металлическая фигурная арт. 5487</option><option value="6">Ножка металлическая фигурная арт. 5497</option><option value="7">Фурнитура-блочек арт. 3265</option><option value="8">Фурнитура-блочек арт. 8475</option><option value="9">Лампа декоративная арт. 986</option></select></td><td><input id="txtKol" type="text"></td></tr><tr><td colspan="2" align="right"><input name="Ok" value="Добавить" onclick="JavaScript:AddKomplToProduction();" type="button"></td></tr></tbody></table>

 

Выводится элемент типа SELECT, в котором содержиться список готовой продукции. При выборе элемента списка срабатывает событие onClick и вызывается JavaScript функция GetKomplByIdProd().

function GetKomplByIdProd()

{

var idProd = document.getElementById("selProd").value;

$.ajax({

type: 'POST',

url: 'ajax/response.php',

scriptCharset: "utf-8",

data: 'action=AK_View&idProd='+idProd,

success: function(data)

{

$('#ajxKomplProd').html(data);

}

});

}

В переменной data формируется срока запроса, которая потом будет отправлена обработчику response.php. Одним из параметров является код готовой продукции, которую получаем из элемента SELECT следующим образом:

var idProd = document.getElementById("selProd").value;

Результат выполнения обработчика будет помещён в элемент <DIV>

с атрибутом id= ajxKomplProd.

if (isset($_POST) and $_POST['action']=='AK_View')

{

// необходимо показать кмоплектующие в товаре

$idProd = (int)mysql_escape_string($_POST['idProd']);

echo GetKomplByIdProd($idProd);

}

Обработчик response.php вызываем метод GetKomplByIdProd(), в качестве параметра которому передаёт код выбранного товара.

 

function GetKomplByIdProd($idProd)

{

// функция возвращает элемент Select со списком выпоскаемой продукции

global $dbName;

$sql = "SELECT tblTovar.nameTovar,tblTovar.idTovar, tblSostavProduct.kolTovar FROM `".$dbName."`.`tblProduct` INNER JOIN (tblTovar INNER JOIN tblSostavProduct ON tblTovar.idTovar = tblSostavProduct.idTovar) ON tblProduct.idProduct = tblSostavProduct.idProduct WHERE (((tblSostavProduct.idProduct)=".$idProd."))";

$result = mysql_query($sql);

if ($result and mysql_num_rows($result)>0)

{

$str.="<table border=1 cellpadding=1 cellspacing=1>";

$str.="<tr align=center><td>Позиция</td><td>&nbsp;Количество&nbsp;</td><td>&nbsp;</td></tr>";

while ($res = mysql_fetch_array($result))

{

$str.="<tr><td>&nbsp;".$res['nameTovar']."</td><td align=center>".$res['kolTovar']."</td><td><a href='JavaScript:DelKomplByTovar(&quot;".$res['idTovar']."&quot;);'>&nbsp;удалить&nbsp;</a></td></tr>";

}

$str.="</table>";

}

return $str;

}

 

Данный код выводит список комплектующих, входящих в состав выбранного изделия (рисунок 2.4):

Рисунок 2.4 – Вывод состава готовой продукции

Для добавления комплектующих в состав изделия необходимо в таблице «Состав продукции» выбрать наименование комплектующих, количество и нажать кнопку «Добавить». (рисунок 2.5)

Рисунок 2.5 – Добавление комплектующих в состав продукции

Срабатывает событие onClick и вызывается JavaScript функция AddKomplToProduction()

.

function AddKomplToProduction()

{

var idTovar = document.getElementById("selTovar").value;

var idProd = document.getElementById("selProd").value;

var Kol = document.getElementById("txtKol").value;

$.ajax({

type: 'POST',

url: 'ajax/response.php',

scriptCharset: "utf-8",

data: 'action=Add_Tovar_Prod&idProd='+idProd+"&idTovar="+idTovar+"&kolTovar="+Kol,

success: function(data)

{

$('#ajxKomplProd').html(data);

}

});

}

 

В обработчик response.php передаются три переменных:

– код продукции

– код комплектующих

– количество комплектующих

 

if (isset($_POST) and $_POST['action']=='AT')

{

// необходимо добавить комплектующие

$tovar = mysql_escape_string($_POST['tovar']);

if ($tovar=='')

{

echo "<h3><div class=negative>Заполните все поля формы!</div></h3>";

}

else

{

$sql = "INSERT INTO `".$dbName."`.`tblTovar` (`idTovar`, `nameTovar`) VALUES (NULL, '".$tovar."');";

$result = mysql_query($sql);

if ($result)

{

echo "<h3><div class=positive>Новый позиция добавлена!</div></h3>";

}

else

{

echo "<h3><div class=negative>Ошибка добавления данных!</div></h3>"; }

}

echo GetSpisTovar();

}

 

Обработчик при помощи sql-запроса добавляет сведения о комплектации товара, а затем вызывает метод GetSpisTovar(), результаты работы которого выводятся в блок <DIV> с атрибутом id= ajxKomplProd.

function GetSpisTovar()

{

// функция возвращает список

global $dbName;

$sql = 'SELECT * FROM `'.$dbName.'`.`tblTovar`';

$result = mysql_query($sql);

if ($result and mysql_num_rows($result)>0)

{

$str = "<table border=1 cellpadding=1 cellspacing=1>";

$str.="<tr><th>Комплектующие</th></tr>";

while ($res = mysql_fetch_array($result))

{

$str.="<tr><td>&nbsp;".$res['nameTovar']."</td></tr>";

}

$str.= "</table>";

}

else

{

$str = '<h3 class=negative>Данные не найдены</h3>';

}

return $str;

}

Метод GetSpisTovar() выводит список комплектующих для продукции с кодом idTovar (рисунок 2.6)

Рисунок 2.6 – Добавление комплектующих в состав изделия