ВУЗ: Новосибирский государственный технический университет
Категория: Решение задач
Дисциплина: Программирование
Добавлен: 15.02.2019
Просмотров: 391
Скачиваний: 5
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ
ВЫСШЕГО ОБРАЗОВАНИЯ
«НОВОСИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»
Кафедра вычислительной техники
ОТЧЕТ
ПО ЛАБОРАТОРНОЙ РАБОТЕ №8
«Технология AJAX»
ПО ДИСЦИПЛИНЕ «WEB-ПРОГРАММИРОВАНИЕ»
Факультет: АВТФ Преподаватель: Новицкая Ю.В.
Группа: АВТ-412
Студенты:
Евтушенко Никита Сергеевич
Лазаревич Михаил Михайлович
Новосибирск 2017г.
Цель работы:
Получить практические навыки в использовании технологии AJAX.
Задание:
Создать документ с двумя раскрывающимися списками. Перечень вариантов в первом раскрывающемся списке разметить с помощью языка разметки гипертекста HTML. Выбор варианта в первом раскрывающемся списке определяет тот или иной набор вариантов для выбора во втором раскрывающемся списке. Варианты для выбора во втором раскрывающемся списке должны быть сформированы с использованием технологии AJAX.
Порядок выполнения лабораторной работы:
-
Разметить html-документ.
-
Написать скрипт с использованием технологии AJAX.
-
Протестировать созданный скрипт.
html-разметка созданного документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>AJAX</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>
var list2;
window.onload=function()
{
list2=document.getElementById("list2");
listchange();
};
function listchange()
{
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function()
{
if(this.readyState==4)
{
if(this.status==200)
list2.innerHTML=this.responseText;
else
list2.innerHTML="";
}
};
//list2.innerHTML="";
xhttp.open("GET","lab8_listmaker.php?list1="+document.getElementById("list").value,true);
xhttp.send();
}
</script>
</head>
<body onunload="">
<form method="POST" id="form_block" action="lab8.php" autocomplete="off">
<select id="list" name="list1" onchange="listchange()">
<option value="0">Факультет автоматики и вычислительной техники (АВТФ)</option>
<option value="1">Факультет летательных аппаратов (ФЛА)</option>
<option value="2">Механико-технологический факультет (МТФ)</option>
</select>
<select id="list2" name="list2">
</select>
<input type="submit" value="Подтвердить выбор.">
</form>
</body>
</html>
PHP:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Это результаты:</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<?php
function R1($x, $y)
{
if($x==0)
{
$Result="Факультет автоматики и вычислительной техники (АВТФ) ";
//echo $Result;
if($y==1)
{
$Result1=$Result."Автоматизированных систем управления (АСУ)";
return $Result1;
}
if($y==2)
{
$Result1=$Result."Автоматики (АВТ)";
return $Result1;
}
if($y==3)
{
$Result1=$Result."Вычислительной техники (ВТ)";
return $Result1;
}
if($y==4)
{
$Result1=$Result."Защиты информации (ЗИ)";
return $Result1;
}
if($y==5)
{
$Result1=$Result."Интеграционные информационные системы (ИИС)";
return $Result1;
}
}
if($x==1)
{
$Result="Факультет летательных аппаратов (ФЛА) ";
//echo $Result;
if($y==1)
{
$Result1=$Result."Автономных информационных и управляющих систем (АИУС)";
return $Result1;
}
if($y==2)
{
$Result1=$Result."Аэрогидродинамики (АГД)";
return $Result1;
}
if($y==3)
{
$Result1=$Result."Газодинамических импульсных устройств (ГДУ)";
return $Result1;
}
if($y==4)
{
$Result1=$Result."Инженерных проблем экологии (ИПЭ)";
return $Result1;
}
if($y==5)
{
$Result1=$Result."Прочности летательных аппаратов (ПЛА)";
return $Result1;
}
if($y==6)
{
$Result1=$Result."Самолето- и вертолетостроения (СиВС)";
return $Result1;
}
if($y==7)
{
$Result1=$Result."Технической теплофизики (ТТФ)";
return $Result1;
}
}
if($x==2)
{
$Result="Механико-технологический факультет (МТФ) ";
//echo $Result;
if($y==1)
{
$Result1=$Result."Инженерной графики (ИГ)";
return $Result1;
}
if($y==2)
{
$Result1=$Result."Материаловедения в машиностроении (ММ)";
return $Result1;
}
if($y==3)
{
$Result1=$Result."Проектирования технологических машин (ПТМ)";
return $Result1;
}
if($y==4)
{
$Result1=$Result."Технологии машиностроения (ТМС)";
return $Result1;
}
if($y==5)
{
$Result1=$Result."Химии и химической технологии (ХХТ)";
return $Result1;
}
}
}
$Result1=$_REQUEST['list1'];
$Result2=$_REQUEST['list2'];
echo "Вы выбрали: ";
echo R1($Result1, $Result2);
?>
</body>
</html>
<?php
$number=$_REQUEST['list1'];
switch($number)
{
case 0:
//Факультет автоматики и вычислительной техники (АВТФ)
echo "<option value=\"1\">Автоматизированных систем управления (АСУ)</option>";
echo "<option value=\"2\">Автоматики (АВТ)</option>";
echo "<option value=\"3\">Вычислительной техники (ВТ)</option>";
echo "<option value=\"4\">Защиты информации (ЗИ)</option>";
echo "<option value=\"5\">Интеграционные информационные системы (ИИС)</option>";
break;
case 1:
//Факультет летательных аппаратов (ФЛА)
echo "<option value=\"1\">Автономных информационных и управляющих систем (АИУС)</option>";
echo "<option value=\"2\">Аэрогидродинамики (АГД)</option>";
echo "<option value=\"3\">Газодинамических импульсных устройств (ГДУ)</option>";
echo "<option value=\"4\">Инженерных проблем экологии (ИПЭ)</option>";
echo "<option value=\"5\">Прочности летательных аппаратов (ПЛА)</option>";
echo "<option value=\"6\">Самолето- и вертолетостроения (СиВС)</option>";
echo "<option value=\"7\">Технической теплофизики (ТТФ)</option>";
break;
case 2:
//Механико-технологический факультет (МТФ)
echo "<option value=\"1\">Инженерной графики (ИГ)</option>";
echo "<option value=\"2\">Материаловедения в машиностроении (ММ)</option>";
echo "<option value=\"3\">Проектирования технологических машин (ПТМ)</option>";
echo "<option value=\"4\">Технологии машиностроения (ТМС)</option>";
echo "<option value=\"5\">Химии и химической технологии (ХХТ)</option>";
break;
}
?>
Скриншоты документа:
Выводы по работе:
Были изучены основы работы с AJAX, а также его возможности.