МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

Федеральное государственное бюджетное образовательное

учреждение высшего образования
«Тихоокеанский государственный университет»

Кафедра
«Автоматика и Системотехника»

Лабораторная работа №9
по курсу «Архитектура информационных систем»
Тема: AJAX-запрос с передачей текстовых данных
формы с XMLHttpRequest2 и HTML5

Выполнил: студент группы

ИС(аб)-71 Белим Л.В.

Проверил:
Конопелько Г.К.

г. Хабаровск
 2020 г.
Лабораторная работа №9
«AJAX-запрос с передачей текстовых данных
формы с XMLHttpRequest2 и HTML5
Цель работы: ознакомление с основными компонентами Ajax, организация
запроса и обработка ответа на HTML странице.
Задание:
1. Сделать форму с полями ввода и кнопкой “submit” в центральной части
страницы. Имена html-файлов и файлов Perl-скриптов должны содержать
русские буквы.
2. Разработать сценарии для организации асинхронного AJAX-запроса.
3. Сценарии должны предусматривать вывод сообщений об ошибках
приема-передачи и о состоянии запроса.
4. Для передачи данных формы использовать методы и свойства объекта
XMLHttpRequest2.
5. Предусмотреть контроль корректности заполнения элементов формы.
6. HTML-файлы и Perl-скрипты должны формировать ответ браузеру в виде
текста, включающего русские буквы. Ответ должен отображаться в
центральной части HTML-страницы.
Внимание! Использовать библиотечные функции при выполнении работы
запрещается!

Ход работы:
файл index.html /home/var/www/html/is1-02/Labs/index.html

<script type="text/javascript" language="javascript"

src="script/ajax89.js"></script>
<form id="form3">
<div class="nice"> <br> <label>Л/р №8 и №9 (AJAX)</label><br><br>
<label for="Familiy">Фамилия:</label>
<input type="text" name="Familiy" id="Familiy"><br>

<label for="Name">Имя:</label>
<input type="text" name="Name" id="Name"><br>

<label for="Name3">Отчество:</label>
<input type="text" name="Name3" id="Name3"><br>

<label for="Year1">Год поступления:</label>

<input type="number" name="Year1" id="Year1" step="1"
min="2000" max="2500"><br>

<label for="Year2">Год рождения:</label>

Лист
Лабораторная работа №9
ТОГУ, ИС(аб)-71, Белим Л.В.
по курсу АИС 2
 <input type="number" name="Year2" id="Year2" step="1"
min="1990" max="2017"><br>

<label for="NumberOfGroup">Номер группы:</label> <br>

<input type = "radio" name="Number1" id="Number1" value='ИС-71'>ИС-71
<input type = "radio" name="Number1" id="Number2" value='ВМ-71'>ВМ-71
<input type = "radio" name="Number1" id="Number3" value='ПО-71'>ПО-71

<br> <input type="button" value=" Ajax9 " class="ButtonSumbit"

onclick="sendPost_9()"><br>
<input type="button" value=" Ajax8 " class="ButtonSumbit"
onclick="sendPost_8()">
</div> </form>

ajax89.js /home/var/www/html/ is1_02/Labs/ script/ajax89.js

function createRequest()
{
if (typeof XMLHttpRequest != "undefined")
{
return new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
var aVersions = [
"MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp",
"Microsoft.XMLHttp"];
for (var i = 0; i < aVersions.length; i++)
{
try
{
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
} catch (Error) {}
throw new Error("Ошибка XMLHttp.");
} }}

function print_9(resp1)
{document.getElementById('serverResponse_9').innerHTML = resp1;
}

function SendRequest(r_method, r_args, r_path, r_handler, r_picture, boundary)

{ var Request = createRequest(); //Создаем запрос
Лист
Лабораторная работа №9
ТОГУ, ИС(аб)-71, Белим Л.В.
по курсу АИС 2
 if (!Request) //Проверяем существование запроса
{ return;
}

Request.onreadystatechange = function()
{
if (Request.readyState == 4)
{
if (Request.status != 200)
{
alert(Request.status + ': ' + Request.statusText);
}
else
{
r_handler(Request.responseText);
} } return; }

if (r_method.toLowerCase() == "get" && r_args.length > 0)//Проверяем какой

запрос
{
r_path += "?" + r_args;
}
Request.open(r_method, r_path, true);

if (r_method.toLowerCase() == "post")
{
if (r_picture.toLowerCase() == "true")
{Request.setRequestHeader("Content-Type","multipart/form-data;
boundary=" + boundary);
}
else
{ Request.setRequestHeader("Content-Type","application/x-www-
form-urlencoded; charset=utf-8");

}
Request.send(r_args);
}
else { Request.send(null); }}

function sendPost_9()
{ var r_args = "&Familiy=" +
encodeURIComponent(document.getElementById("form3").Familiy.value) +
"&Name=" +
encodeURIComponent(document.getElementById("form3").Name.value) +
"&Name3=" +
encodeURIComponent(document.getElementById("form3").Name3.value) + Лист
Лабораторная работа №9
ТОГУ, ИС(аб)-71, Белим Л.В.
по курсу АИС 2
 "&Year1=" +
encodeURIComponent(document.getElementById("form3").Year1.value) +
"&Year2=" +
encodeURIComponent(document.getElementById("form3").Year2.value) +
"&Number1=" +
encodeURIComponent(document.getElementById("form3").Number1.value);

SendRequest("post", r_args, "../../../Тест9lida.pl", print_9, "false", "");

}

Файл Тест9lida.pl /home/var/www/html/ Тест9lida.pl

#!/usr/bin/perl
require("cgi-lib.pl");
use utf8;
use Encode qw(decode encode);
print "Content-type: text/html\n\n";
$buffer = $ENV{'QUERY_STRING'};
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
@pairs = split("&", $buffer);
foreach $pair (@pairs) {
($name, $value) = split("=", $pair);
$value =~ tr/+/ /;
$value =~ s/%(..)/pack("c", hex($1))/ge;
$parameter{$name} = decode('UTF-8',$value);
}
print "
<label>
<br><strong>Фамилия</strong>: $parameter{'Familiy'}</label>
<label>
<br><strong>Имя</strong>: $parameter{'Name'}</label>
<label>
<br><strong>Отчество</strong>: $parameter{'Name3'}</label>
<label>
<br><strong>Год поступления в университет</strong>: $parameter{'Year1'}
</label>
<label>
<br><strong>Год рождения</strong>: $parameter{'Year2'}</label>
<label>
<br><strong>Номер студенческой группы</strong>: $parameter{'Number1'}
</label>"

Вывод: Выполняя данную лабораторную работу, я ознакомилась с

основными компонентами Ajax, организация запроса и обработка ответа на HTML
странице.
Замечания: Отсутствуют

Лист
Лабораторная работа №9
ТОГУ, ИС(аб)-71, Белим Л.В.
по курсу АИС 2