Разработка клиент-серверной технологии приложения
Технология 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> Количество </td><td> </td></tr>";
while ($res = mysql_fetch_array($result))
{
$str.="<tr><td> ".$res['nameTovar']."</td><td align=center>".$res['kolTovar']."</td><td><a href='JavaScript:DelKomplByTovar("".$res['idTovar']."");'> удалить </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> ".$res['nameTovar']."</td></tr>";
}
$str.= "</table>";
}
else
{
$str = '<h3 class=negative>Данные не найдены</h3>';
}
return $str;
}
Метод GetSpisTovar() выводит список комплектующих для продукции с кодом idTovar (рисунок 2.6)
Рисунок 2.6 – Добавление комплектующих в состав изделия