2.1 Разработка клиентской части

2. 1 Разработка клиентской части

Клиентская часть приложения реализована в виде примера №2, при выполнении которого создается Web-страница, содержащая заголовок (" Тестирование" ), кнопки " СТАРТ" и " ОТВЕТ", а также поле для помещения тестов (тег < div... />. CSS свойства кнопок " Начать тестирование" и " Указать ответ" задаются из файла " lab. css" , который подклюяается к HTML-файлу данного примера (см. раздел 2 лаб. раб. №7).

Оглавление

Пример 2

< html>
< head>
< title> Тестирование пользователя с использованием технологии AJAX< /title>
< link rel=stylesheet href=".. /lab. css" >
< script>
var name='', answer='', //Фамилия и ответ пользователя
xhr=new XMLHttpRequest();
function subm1() {
name=prompt('Введите фамилию', '');
if(name) {
xhr. open('GET', 'http: //zykov/PYTHON/testing. py? r='+ Math. random()+'& name='+name);
xhr. send(null);
}
else alert(" Имя не введено" );
}
function subm2() {
answer=prompt('Введите ответ в виде трех двоичных цифр', '');
if (answer) {
xhr. open('GET', 'http: //zykov/PYTHON/testing. py? r='+ Math. random()+'& answer='+answer);
xhr. send(null);
}
else alert(" Ответ не указан" )
}
xhr. onerror=function(e) {
myDiv. innerHTML+=" Ошибка получения данных из сервера";
}
xhr. onload=function() {
myDiv=document. getElementById(" div" );
resp=this. responseText;
myDiv. innerHTML=" < p> < span > " +resp+ " < /span> ";
}
}
< /script>
< /head>
< body>
< h1> Тестирование< /h1>
< button onclick=" subm1()" > Начать < br> тестирование< /button>
< button onclick=" subm2()" > Указать < br> ответ< /button>
< div id=" div" />
< /body>
< /htnl>

Оглавление

Пример №2 начинает свою работу с создания объекта xhr, реализующего механизм AJAX. Это делается с помощью конструктора XMLHttpRequest() без использования альтернативного варианта в виде конструктора ActiveXObject(" Microsoft. XMLHTTP" ), как это было выполнено в примере №1. Кроме того, с целью уменьшения объема скрипта не были использованы средства отладки и диагностики. При необходимости все эти программные стредства могут быть добавлены в код.
Процесс тестирования начинается с нажатия пользователем (тестируемым) кнопки " Начать тестирование". При этом по событию onclick происходит вызов функции submit1(), которая:

· с помощью метода prompt() объекта window принимает имя тестируемого пользователя и заносит его в переменную name (в данной работе имя пользователя задается в виде его фамилии и инициалов, например, Петров А. А. );

· если имя не задано – предлагает пользователю его ввести;

· если имя задано:

§ с помощью метода open() объекта xhr формирует запрос к серверному скрипту по адресу " http: //. . . /Python/testing. py" с указанием метода " GET" и передаваемых клиентом данных – случайного числа, генерируемого методом random() объекта Math, и имени пользователя. Случайное число при передаче данных на сервер необходимо для того, чтобы браузер всегда получал ответ не из кэш-памяти, а непосредственно от сервера;

§ с помощью метода send() объекта xhr передает серверу указанные данные;

Затем с помощью обработчика события onerror() объекта xhr проверяется, не возникла ли ошибка при обмене данными между клиентом и сервером. Если ошибка возникла – клиенту выдается соответствующее сообщение и тестирование завершается.
При успешном завершении приема данных от сервера – по событию onload объекта xhr производится считывание данных, переданных сервером, в переменную resp с последующим отображением ее значения на данной Web-странице с помощью тега < div>.
Сервер в соответствии с работой серверного приложения (см. описание программы testing. py в подразделе 2. 2. 2) передает клиенту данные двух типов:

· если тестирование не завершено – очередной тест (разработку тестов см. в подразделе 2. 2. 1);

· после завершения тестирования – его результаты.

Когда сервер передает тест, пользователь формирует ответ на этот тест в виде трех двоичных цифр ( см. подраздел 2. 2. 1) и нажимает кнопку " Указать ответ". При этом по событию onclick происходит вызов функции submit2(), которая:

· с помощью метода prompt() принимает от тестируемого ответ и заносит его в переменную answer;

· если ответ не задан – предлагает пользователю его ввести;

· в случае успешного занесения ответа, выполняются те же действия, что и при выполнении функции submit1() – только вместо передачи имени (переменная name), передается ответ тестируемого (переменная answer).

Если сервер передал вместо очередного теста результаты тестирования, то это обозначает, что процесс тестирования завершен. Чтобы выполнить тестирование нового пользователя или протестировать текущего пользователя еще раз, необходимо нажать кнопку " Начать тестирование".

Оглавление

2. 2 Разработка серверной части