ЛАБОРАТОРНАЯ РАБОТА №10

Тема: Использование технологии AJAX при разработке клиент-серверного приложения

Цель: Рассмотрение особенностей работы серверного приложения, использующего технологию AJAX

ОГЛАВЛЕНИЕ

 Оглавление

1 Использование технологии AJAX

AJAX (от англ. Asynchronous Javascript and XML) – асинхронный JavaScript и XML) представляет собой технологию, позволяющую при необходимости в фоновом режиме (не прерывая работы пользователя и незаметно для него) выполнять запросы к серверу и получать дополнительные данные для обновления отдельных частей Web-страницы, тем самым исключая необходимость повторной загрузки страницы. Например, выполнять на стороне сервера проверку правильности заполнения данных пользоваетелем по мере их ввода.
Без использования технологии AJAX для решения этой задачи имеются такие возможности:

• выполнять проверку на стороне сервера, но в этом случае необходимо формировать новую Web-страниц, что увеличивает загрузку сети и увеличивает время ожидания клиента;
• выполнять проверку на стороне клиента, но при этом зачастую необходимо хранить большой объем информации на компьютере клиента.

В целом использование AJAX имеет следующие преимущества:

• Экономия трафика:
  • Использование AJAX позволяет значительно сократить трафик при работе с Web-приложением благодаря тому, что часто вместо загрузки всей страницы достаточно загрузить только изменившуюся часть, как правило, довольно небольшую;
• Уменьшение нагрузки на сервер:
  • AJAX позволяет несколько снизить нагрузку на сервер. К примеру, на странице работы с почтой, когда отмечаются прочитанные письма, серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции без необходимости повторно создавать страницу и передавать ее клиенту;
• Ускорение реакции интерфейса:
  • Поскольку нужно загрузить только изменившуюся часть Web-страницы, пользователь видит результат своих действий быстрее.

Недостатки использования AJAX:

• Отсутствие интеграции со стандартными инструментами браузера:
  • Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад», предоставляющая пользователям возможность вернуться к просмотренным ранее страницам, но существуют скрипты, которые могут решить эту проблему;
  • Другим недостатком изменения содержимого страницы при постоянном URL является невозможность сохранить закладки на желаемый материал (это можно решить с помощью History.pushState).
• Динамически загружаемое содержимое недоступно поисковикам (если не проверять запрос, обычный он или XMLHttpRequest):
  • Поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта.
• Старые методы учета статистики сайтов становятся неактуальными:
  • Многие сервисы статистики ведут учет просмотров новых страниц сайта, для сайтов, страницы которых широко используют AJAX, такая статистика теряет актуальность.
• Усложнение проекта:
  • Перераспределяется логика обработки данных – происходит выделение и частичный перенос на сторону клиента процессов первичного форматирования данных. Это усложняет контроль целостности форматов и типов;
  • Конечный эффект технологии может быть нивелирован необоснованным ростом затрат на кодирование и управление проектом, а также риском снижения доступности сервиса для конечных пользователей.
• Требуется включенный в браузере JavaScript:
  • JavaScript может быть выключен из соображений безопасности;
  • AJAX-страницы труднодоступны неполнофункциональным браузерам, роботам и веб-архивам.

Для применения AJAX необходимы следующие компоненты:

• JavaScript (основной компонент);
• объект XMLHttpRequest;
• серверные технологии (например, PHP или Python).

Первоначально технологию AJAX разработала фирма Microsoft в виде объекта ActiveX для браузера Internet Explorer. Затем программисты проекта Mozilla создали объект XMLHttpRequest с (почти) идентичными API, который после доработки стандартизирован организацией W3C и в настоящее время поддерживается всеми ведущими браузерами. Последнее обновление действующего стандарта XMLHttpRequest (Living Standart) произошло 25.11.2015 года.
Технология AJAX стала популярной в 2005 году в связи с появлением сервиса Google Suggest (англ. suggest – предлагать) – технологии автозаполнения строки поискового запроса на основе общей статистики самых популярных запросов. Таким образом, запрос пользователя предсказывается после ввода уже нескольких символов, и в выпадающем списке предлагается выбор готовых слов и словосочетаний.

 Оглавление

1.1 Объект XMLHttpRequest

Объект XMLHttpRequest дает возможность отправлять асинхронные HTTP-запросы из кода JavaScript серверу, принимать от него ответы и обновлять отдельные части Web-страницы, не прерывая работу пользователя. Имеет следующие методы:

• abort() – отменяет любые сетевые действия;
• getAllResponseHeaders() – возвращает все HTTP-заголовки ответа сервера в виде строки (кроме Set-Cookie);
• getResponseHeader(header) – возвращает указанный HTTP-заголовок ответа сервера в виде строки (кроме Set-Cookie);
• open(method, URL [, async = true [, username = null [, password = null]]]) – инициализирует параметры запроса, где:
  • method – один из методов обмена данными с сервером: наиболее часто используются GET и POST, но разрешены также методы HEAD, TRACE, PUT или DELETE;
  • URL – абсолютный или относительный URL-адрес сервера (кроме http:// протокола могут быть также использованы протоколы ftp:// и file://);
  • async (необязательнлый параметр) – значение true означает асинхронный режим работы с сервером: скрипт, послав запрос серверу, продолжает свою работу (значение по умолчанию), значение false означает синхронный режим работы с сервером: скрипт, послав запрос серверу, приостанавливает свою работу, ожидая ответа от сервера;
  • username (необязательнлый параметр) – имя пользователя для аутентификации, если параметр равен null или "" и сайт требует аутентификации, то появляется окно login;
  • password (необязательнлый параметр) – пароль пользователя для аутентификации, если равен Null или "", то игнорируется;
• overrideMimeType(mime) – задает для заголовка ответа Content-Type значение mime;
• send([data=null]) – выполняет запрос (аргумент игнорируется для методов GET или HEAD);
• setRequestHeader(name, value) – добавляет заголовок запроса name со значением value, например:
  
  xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

и свойства:

• onreadystatechange – используется для регистрации обработчика события readystatechange, возникающим в асинхронном режиме при изменении состояния запроса;
• readyState – возвращает состояние запроса, значение может быть задано числом или константой:
  • 0 (UNSENT) – объект создан;
  • 1 (OPENED) – метод open() успешно вызван. В течение этого состояния с помощью метода setRequestHeader() могут быть установлены HTTP-заголовки запроса и выполнен с использованием метода send() запрос;
  • 2 (HEADERS_RECEIVED) – все перенаправления (англ. redirect) сделаны (если они есть) и получены HTTP-заголовки ответа;
  • 3 (LOADING) – получено тело (содержимое) ответа;
  • 4 (DONE) – обмен данными завершен или произошла ошибкм.
• response – возвращает тело ответа (тип ответа указан в свойстве responseType);
• responseText – возвращает ответ сервера в виде строки;
• responseType [ = value ] – устанавливает или возвращает тип ответа (по умолчанию – пустая спрока):
  • "arraybuffer";
  • "blob";
  • "document" (игнорируется если значением JavaScript global environment является worker environment);
  • "json";
  • "text";
• responseXML – возвращает ответ сервера в формате XML;
• status – возвращает HTTP-код состояния запроса (запросы по протоколам ftp:// и file:// не возвращают статуса, поэтому нормальным для них является status=0);
• statusText – возвращает сообщение о состоянии запроса;
• timeout – указывает или возвращает время в миллисекндах. Если значение не равно 0 – проверяет, не вышло ли время ожиданич ответа за указанное значение. Если вышло – вызывается исключение (значение по умолчанию 0);
• upload – возвращает ассоциированный объект XMLHttpRequestUpload, который может быть использован при передаче файла на сервер для получения информации о передаче;
• withCredentials – указывает, надо ли передавать учетные данные пользователя (credentials).

Во время функционирования объекта XMLHttpRequest при изменении его состояния (которое указывается в свойстве readyState) возникает событие onreadystatechange, которое может быть использовано для определения текущего состояния объекта.
Кроме того современная спецификация предусматривает следующие события оазвития (progress events), т.е. возникающие по ходу обработки запроса:

• loadstart – запрос начат;
• progress – браузер получил очередной пакет данных, можно прочитать текущие полученные данные в responseText;
• abort – запрос был отменен вызовом меторда abort();
• error – произошла ошибка;
• load – запрос был успешно (без ошибок) завершен;
• timeout – запрос был прекращен по таймауту;
• loadend – запрос был завершен (успешно или нет).

Для создания экземпляров объекта XMLHttpRequest при использовании браузеров, которые его поддерживают – все бразеры, за исключением IE5 и IE6, необходимо использовать конструктор XMLHttpRequest(), а для браузеров Internet Explorer версий 5 и 6 – конструктор ActiveXObject("Microsoft.XMLHttp"). Поэтому для создания объекта xhr, который имеет все методы и свойства объекта XMLHttpRequest, можно предложить следующий код:

var xhr;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

Создание объекта xhr, использование его методов, свойств и обработчиков событий приведено в примерах №1, №1a и №1b, в которых осуществлен прием текстовых данных из локального сервера, а также в примере №2, в котором в процессе тестирования выполнена передача серверу имени тестируемого, прием тестов от сервера и передача ответов серверу.

 Оглавление

1.2 Чтение текста из локального сервера

В примере №1 показано чтение текстового файла из локального сервера с помощью технологии AJAX. Особенностью этого примера является то, что в нем, помимо решения основной задачи – получения текстовых данных из сервера и вывода их на текущей странице, решаются также задачи получения и вывода дополнительной информации учебного и отладочного характера:

 Оглавление

Пример 1

<!DOCTYPE html>
<html>
<head>
<title> Чтение текста из локального сервера с помощью технологии AJAX</title>
</head>
<body>
<div id="myDiv" />
<script>
var myDiv=document.getElementById("myDiv");
var xhr;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else { // IE5,IE6
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
myDiv.innerHTML="Состояние 0 (UNSENT): Объект xhr создан; <br>";
xhr.open("GET", "http://zykov/data.txt?r="+Math.random(),true);
xhr.onreadystatechange=handleStateChange;
xhr.send() ;
myDiv.innerHTML+="Скрипт продолжает работать<br>";
function handleStateChange() {
switch(this.readyState) {
case 1: myDiv.innerHTML+=
"Состояние 1 (OPEND): Метод open() успешно вызван; <br>";break;
case 2: myDiv.innerHTML+=
"Состояние 2 (HEADERS RECEIVED): получены HTTP-заголовки ответа :<br>"+
"Content-Type: <span style='color:blue'>"+ this.getResponseHeader("Content-Type")+
"</span<br>"+
"Date: <span style='color:blue'>"+ this.getResponseHeader("Date")+ "</span> "+
this.statusText+ "<br>"; break;
case 3: myDiv.innerHTML+=
"Состояние 3 (LOADING): тело ответа получено; "+this.statusText+"<br>"; break;
case 4: { myDiv.innerHTML+=
"Состояние 4 (DONE) передача данных завершена "+ this.statusText+"<br>";
if(this.status==200) {
try {
resp=this.responseText;
myDiv.innerHTML+="Сервер передал:
<span style='color:blue; font-size:5.5mm'>"+resp+"</span><br>";
}
catch(e) {
myDiv.innerHTML+="Ошибка чтения ответа: "+e.name.toString()+" "+
e.message;
}
} else myDiv.innerHTML+="Ошибка получения данных: статус: "+this.status;
}
}
}
</script>
</body>
</html>

При запуске примера №1 выполняются следующие действия:

• создается объект xhr – экземпляр объекта XMLHttpRequest;
• создается ссылка myDiv на элемент <div />, который используется для вывода данных в окно браузера;
• в объект myDiv заносятся данные о начальном состоянии запроса к серверу;
• с помощью метода open() объекта xhr задаются следующие значения параметров соединения с сервером:
  • метод – GET;
  • адрес файла на сервере – "http://zykov/data.txt";
  • значение флага асинхронного режима – true;
• в качестве обработчика события onreadystatechange указывается функция handleStateChange;
• с помощью метода send() объекта xhr посылается запрос на сервер.

Отметим, что использование в методе open() аргумента URL, имеющего значениее "http://zykov/data.txt?r="+Math.random(), позволяет передать на сервер не только url-адрес текстового файла, но и случайное число, генерируемое методом random() объекта Math. Поскольку при этом каждый вызов будет отличаться от предыдущего, браузер будет передавать клиенту данные не из своего кэша, а непостредственно из сервера. Этот режим можно использовать, например, при отладке скрипта для разных значений данных на сервере.
При каждом изменении состояния запроса (свойство readyState), начиная с состояния 1, происходит вызов функции handleStateChange(), которая осуществляет такие действия:

• вывод данных о текущем состоянии запроса (для состояний 1,2,3 и 4 – для пояснения и отладки):
  • номер и наименование состояния;
  • краткую характеристику состояния;
  • значение статуса ответа сервера (свойство statusText) – для тех состояний для которых браузер передает этот статус;
• в состоянии 2 (HEADERS RECEIVED) получает и выведит в окно браузера значения следующих HTTP-заголовков ответа:
  • Content-Type;
  • Date;
• в состоянии 4 (DONE), в котором завершается обмен данными с сервером, проверяет статус ответа сервера. Если он равен 200, т.е. обмен завершен успешно:
  • проверяет с помощью оператора try/catch правильность прочитанных их сервера с помощью свойства responseText данных;
  • Если данные прочитаны правильно – заносит их в элемент myDiv для вывода в окно браузера;
  • в противном случае – выводит сообщение "Ошибка чтения ответа" и свойства объекта Error;
• если же в состоянии 4 статус ответа сервера не равен 200 – выводит сообщение "Ошибка получения данных" и статус ответа.

При выполнении примера №1 в окно браузера были выведены следующие результаты его работы:

Состояние 0 (UNSENT): Объект xhr создан;
Состояние 1 (OPEND): Метод open() успешно вызван;
Скрипт продолжает работать
Состояние 2 (HEADERS RECEIVED): получены HTTP-заголовки ответа :
Content-Type: text/plain
Date: Fri, 11 Dec 2015 15:33:34 GMT OK
Состояние 3 (LOADING): тело ответа получено; OK
Состояние 4 (DONE) передача данных завершена OK
Сервер передал: Привет, клиент!

В случае выполнения примера №1 в синхронном режиме (async=false) были получены следующие результаты его работы:

Состояние 0 (UNSENT): Объект xhr создан;
Состояние 4 (DONE) передача данных завершена OK
Сервер передал: Привет, клиент!
Скрипт продолжает работать

Эти результаты работы в синхронном режиме показывают следующее:

• событие readystatechange не вызывается при изменении состояния запроса;
• скрипт после отправления запроса на сервер ожидает получения данных из сервера и только после этого продолжает свою работу.

Поэтому синхронный режим в дальнейшем использоваться не будет.
В примере №1a решается та же задача, что и в примере №1 – получение данных из текстового файла сервера. Но в нем, в отличие от примера №1 не задействованы средства пояснения и отладки – это пример уже отлаженного скрипта, поэтому объем его кода значительно меньше:

 Оглавление

Пример 1a

<!DOCTYPE html>
<html>
<head>
<title> Чтение текста из локального сервера</title>
</head>
<body>
<div id="myDiv" />
<script>
var myDiv=document.getElementById("myDiv");
var xhr=new XMLHttpRequest();
xhr.open("get", "http://zykov/data.txt?r="+Math.random());
xhr.onreadystatechange=handleReadyState;
xhr.send();
function handleReadyState() {
if(this.readyState==this.DONE&&this.status==200) {
myDiv.innerHTML+="<span style='color:blue; font-size:5.5mm'>"+ this.responseText+
"</span>";
}
}
</script>
</body>
</html>

Результат работы примера №1a:

Привет, клиент!

Пример №1b отличается от примера №1a тем, что в нем использованы возможности, указанные в новой спецификации объекта XMLHttpRequest (см. подраздел 1.1), а именно:

• события продвижения (вместо события readystatechange):
  • load – возникает, когда передача данных сервером успешно завершена;
  • error – возникает в случает возникновения ошибки при передачи данных из сервера;
• свойство response (вместо свойства responseText), которое возвращает данные, полученные от сервера, в виде строки, если значение свойства responseType не задано (его значение по умолчанию – строка).

 Оглавление

Пример 1b

<!DOCTYPE html>
<html>
<head>
<title> Чтение текста из локального сервера</title>
</head>
<body>
<div id="myDiv" />
<script>
var myDiv=document.getElementById("myDiv");
var xhr=new XMLHttpRequest();
xhr.open("get", "http://zykov/data.txt?r="+Math.random());
xhr.onerror=function(e) {
myDiv.innerHTML+=" Error";
}
xhr.onload=function() {
myDiv.innerHTML+="<span style='color:blue; font-size:5.5mm'>"+ this.response+
"</span>";
}
xhr.send();
</script>
</body>
</html>

Результат работы примера №1b такой же, как результат работы примера №1a:

Привет, клиент!

Отметим, что в примере №1b вместо события load можно использовать событие progress и получать данные по частям (пакетам). Но в данном случае данные из сервера имеют небольшой размер и результат работы будет такой же, как и при использовании события load:

Привет, клиент!

Необходимо сказать, что приведенные результаты работы примеров №1, №1a и №1b были получены только при использовании браузера Internet Explorer. На остальных ведущих браузерах примеры №1 и №1a не дадут никакого разультата, а пример №1b даст сообщение "Error". Это связано с несколько различной трактовкой браузерами политики "одинакового произхождения" ("the same origin"), которая была введена для междоменных передач данных с целью повышения их безопастности, и которую поддерживает технология AJAX (см. подраздел 1.3).

 Оглавление

1.3 Обеспечение безопасности и конфиденциальности данных в сети

С целью обеспечения безопасности и конфиденциальности данных при их обмене в сети были разработаны правила, названные "политикой одинакового источника" (same-origin policy). Две Web-страницы имеют одинаковый источник, если:

• имеют одинаковые схемы (протоколы);
• имеют одинаковые порты (если указаны);
• имеют одинаковые хосты (hosts).

Пусть, например, Web-страница имеет следующий URL: http://www.company.com/dir/page.html. Тогда результаты проверки на одинаковый источник следующих страниц дадут такие результаты:

• http://www.company.com/dir2/other.html – "+";
• http://www.company.com/dir/inner/another.html – "+";
• https://www.company.com/secure.html – "-" (другой протокол);
• http://www.company.com:81/dir/etc.html – "-" (другой порт);
• http://news.company.com/dir/other.html – "-" (другой хост).

Знак "+" означает, что проверяемая страница имеет одинаковый источник с исходной страницей, а знак "-" – разный.
Политика same-origin предусматривает, что две Web-страницы могут обмениваться данными без ограничений только при условии, что они имеют одинаковый источник. Отметим, что браузер Internet Explorer имеет два исключения из этого правила:

• если оба домена находятся в "зоне доверия" (highly trusted zone), то к этим доменам правило одинакового происхождения не применяется;
• порты не включаются в компоненты происхождения.

Поскольку объект XMLHttpRequest() подчиняется политике одинакового источника, то при доступе к данным локального сервера просходит сравнение происхождения страницы, вызвавшей запрос, и сервера, отправляющего ответ браузеру. И хотя в примерах №1, №1a и №1b скрипты, формирующие запросы к серверу, и сам сервер распололагаются на одном и том же компьютере, считается, что они имеют разный источник, поскольку используют разные схемы. Поэтому браузер Internet Explorer, за счет исключения из общего правила, разрешил чтение данных из локального сервера, а браузеры, подчиняющиеся всем правилам политики одинакового источника, – нет.
Выходом из создавшегося положения является использование предложенного группой W3C механизма CORS (Cross-Origin Resource Sharing), т.е. совместное использование ресурсов при обмене, осуществляемом страницами разного источника (кросс-доменными страницами), который состоит из набора HTTP-заголовков и указывает Web-серверу путь, разрешающий доступ к требуемым ресурсам для определенных сайтов. Если сервер в своем ответе указывает HTTP-заголовок Access-Control-Allow-Origin со значениями "*", то это означает, что он разрешает доступ к данным сервера всем сайтам. Другое значение указывает имя сайта, для которого разрешен доступ. Отметим, что разрешение действует только для методов GET и POST, на методы PUT и DELETE оно не распространяется.
Таким образом, чтобы данные на сервере стали доступны объекту XMLHttpRequest(), необходимо, чтобы сервер в своем ответе наряду с данными передал HTTP-заголовок "Access-Control-Allow-Origin: *". Однако это можно сделать, только применив серверное приложение, например, следующий скрипт на языке Python

#!c:/ . . . /python.exe
print("Access-Control-Allow-Origin: *")
print()
print("Hello, client!"),

который расположен по адресу "http://zykov/PYTHON/data.py" и выполняет следующие действия:

• вызывает интерпретатор языка Python (первая строка);
• создает и передает клиенту ответ сервера (последующие три строки с использованием функции print()):
  • первая формирует HTTP-заголовок ответа;
  • вторая – пустую строку для отделения HTTP-заголовка от тела ответа;
  • третья – данные, передаваемые клиенту.

Если в примере №1b изменить URL-адрес запрашиваемого ресурса с http://zykov/data.txt?r=' + Math.random() на http://zykov/PYTHON/data.py?r=' + Math.random(), то при запуске созданного таким образом примера №1c

 Оглавление

Пример 1c

<!DOCTYPE html>
<html>
<head>
<title> Чтение текста из локального сервера</title>
</head>
<body>
<div id="myDiv" />
<script>
var myDiv=document.getElementById("myDiv");
var xhr=new XMLHttpRequest();
xhr.open("get", "http://zykov/PYTHON/data.py?r="+Math.random());
xhr.onerror=function(e) {
myDiv.innerHTML+=" Error";
}
xhr.onload=function() {
myDiv.innerHTML+="<span style='color:blue; font-size:5.5mm'>"+ this.response+
"</span>";
}
xhr.send();
</script>
</body>
</html>

получим корректный результат:

Привет, клиент!

уже на всех популярных браузерах: Internet Explorer, Chrome, Firefox, Opera и Safari. Такие же результаты будут получены и при изменении метода GET на метод POST.

 Оглавление

2 Разработка приложения с использованием технологии AJAX

В качестве примера разработки приложения, использующего в рамках технологии "клиент-сервер" средства AJAX, выбрана задача тестирования пользователя на стороне клиента. Взаимодействие между клиентом и сервером осуществляется следующим образом.
Тестирование начинается с того, что клиент запрашивает имя пользователя и передает его серверу. Сервер последовательно тест за тестом отправляет клиенту сформированные и хранящиеся на сервере тесты. Клиент визуализирует тесты на Web-странице, принимает по каждому тесту ответ пользователя и передает его серверу. После окончания тестирования сервер передает клиенту результаты тестирования. Все обмены данными между сервером и клиентом происходят в рамках технологии AJAX, т.е. без формирования новых Web-страниц.
Далее мы рассмотрим более подробно работу клиенткой части приложения и работу ее серверной части.

 Оглавление

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 style='color:blue;font-size:5.5mm'>"+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 Разработка серверной части

2.2.1 Разработка тестов

Тесты предлагается формировать в виде строки, которая содержит:

• заголовок теста, указывающий номер теста (n) в виде "Тест №n.";
• основную часть, состоящую из утверждения (или вопроса) по заданной тематике и трех вариантов ответа, каждый из которых имеет номер (1, 2, 3) и задается с новой строки;
• эталонное значение, отделенное от основной части точкой с запятой.

Имеется несколько подходов к формированию вариантов ответа и эталонного значения. Например, из всех вариантов ответа только один вариант сделать правильным, а остальные – неправильными. Но при таком подходе и при трех вариантах ответа полуается слишком большая вероятность угадывания правильного ответа (1/3). Чтобы не увеличивать число вариантов ответа предлагается такой подход к формированию тестов.
Каждый из трех вариантов ответа может быть как правильным, так и неправильным. Если вариант правильный, он имеет значение 1, если нет – 0). Эталонное значение теста формируется из значений вариантов ответа в виде трех двоичных цифр: самой левой цифре соответствует значение первого варианта ответа, средней цифре – значение второго варианта ответа и правой цифре – значение третьего варианта ответа. Например, эталонное значение 101 означает, что первый и третий варианты ответа были правильными, а второй вариант – нет. При таком подходе вероятность угадать правильный ответ уменьшается до 1/8.
Для формирования тестов и записи их на диск разработана программа form_test.py, которая не является серверным приложением и может запускаться на выполнение из среды разработки Python:

import pickle
TESTS=[ 'Тест №1. Изменяемые типы данных:' \
'<br>1. кортеж<br> 2. словарь <br>3. строка;010' ,
'Тест №2. Выполняется только чтение из текстового файла:' \
'<br>1. mode=\'\' <br>2. mode=\'r\' <br>3. mode=\'r+\';110' ,
'Тест №3. Выполняется удаление существующего файла:' \
'<br>1. mode=\'w\' <br>2. mode=\'w+\' <br>3. mode=\'a\';100' ,
'Тест №4.В качестве ключа словаря могут быть использованы:' \
'<br>1. кортежи <br>2. числа <br>3. строки;111' ,
'Тест №5. Модуль mod имеет фукцию func(). При каком подключении модуля' \
'фукция func() будет непосредсвтвенно доступна программе?' \
'<br>1. import mod <br>2. from mod import func <br>3. from mod import *;011' ]

f= open ( 'tests.dat' , 'wb' )
pickle.dump(TESTS,f)
f.close()
print ( "It/s done" )

Таким образом в соответствии с выше описанным подходом сформировано пять тестов в виде списка строк TESTS, который с помощью метода dump() модуля pickle в сериализованном виде записан в двоичный файл tests.dat и в последствии может быть использован для получения тестов (см. подраздел 2.2.1).

 Оглавление

2.2.2 Разработка тестирующей программы

В качестве примера серверного приложения, осуществляющего AJAX-взаимодействие с клиентским приложением (см. пример №2 в подразделе 2.1) разработана программа testing.py:

#!c:/ . . . /python.exe
print ( "Access-Control-Allow-Origin: *" )
print ()
import cgi, cgitb, random, pickle
from my_mod import write_results, D
cgitb.enable()
def get_test (file_name): # Функция считывает из файла file_name тесты
f= open (file_name, 'rb' ) # и возвращает один из них
test_list=pickle.load(f)
f.close()
test=random.choice(test_list)
test_list.remove(test)
f= open ( 'cur_tests.dat' , 'wb' )
pickle.dump(test_list,f)
f.close()
return test

max_test=3
data=cgi.parse()
if 'name' in data:
# От клиента получено имя тестируемого
test=get_test( 'tests.dat' )
print (D, test.split( ';' )[0])
user_dict={ # Словарь данных тестируемого содержит:
'name' :data[ 'name' ][0], # имя
'number_test' :1, # порядковй номер очередного теста
'tests' :[test], # список переданных тестов
'answers' :[], # список ответов пользователя
'points' :0 } # число набранных баллов
f= open ( 'user.dat' , 'wb' )
pickle.dump(user_dict,f)
f.close()
if 'answer' in data:
# От клиента получен ответ тестируемого
f= open ( 'user.dat' , 'rb' )
user_dict=pickle.load(f)
user_dict[ 'answers' ]+=[data[ 'answer' ][0]]
tests=user_dict[ 'tests' ]
etalon=tests[ len (tests)-1:][0].split( ';' )[1]
if data[ 'answer' ][0]==etalon: user_dict[ 'points' ]+=1
if user_dict[ 'number_test' ]<'max_test:
test=get_test( 'cur_tests.dat' )
print (D, test.split( ';' )[0])
user_dict[ 'number_test' +=1
user_dict[ 'tests' +=[test]
f= open ( 'user.dat' , 'wb' )
pickle.dump(user_dict,f)
f.close()
else :
write_results(user_dict,out_points=1,out_tests=1,out_answers=1)

 Оглавление

В начале своей работы программа testing.py подключает необходимые ей для работы модули: cgi, cgitb, random, pickle и функцию write_results с константой D из модуля my_mod. После получения запроса от клиента программа преобразует, используя метод parse() модуля cgi, полученные данные в словарь data и осуществляет их анализ.
Если клиентская часть передала имя пользователя, т.е. словарь data содержит ключ "name", то выполняются следующие действия:

• с помощью функции get_test('tests.dat'), аргументом которой является имя файла, содержащего разработанные тесты (см. подраздел 2.2.1), осуществляется выбор теста с именем test:
  • из файла, заданного аргументом filename, выполняется с помощью метода load() модуля pickle чтение двоичных данных и преобразование их в список тестов test_list;
  • с помощью метода choice() модуля random из списка test_list осуществляется случайный выбор теста и занесение его содержимого в переменную test;
  • производится удаление этого теста из test_list и запись с помощью метода dump() модуля pickle измененного списка тестов в файл "cur_tests.dat", который отличается от файла "tests.dat" тем, что содержит только те тесты, вкоторые еще не были использованы при тестировании;
  • возвращается содержимое выбранного теста;
• у выбранного теста выделяется его часть, не содержащая эталонное значение, и передается клиенту в следующем виде (см. подраздел 2.2.1):
  
  

  Тест №3. Выполняется удаление существующего файла:
  1. mode='w'>
  2. mode='w+'
  3. mode='a';
  
  

• выполняется создание словаря пользователя user_dict и инициализация его элементов:
  • элемент с ключем "name" класса str получает значение имени, переданное клиентом – data['name'][0];
  • элемент с ключем "number_test" класса int, предназначенный для хранения числа переданных клиенту тестов, получает значение 1;
  • элемент с ключем "tests" класса list, предназначенный для хранения тестов, переданных клиенту, получает значение переменной test;
  • элемент с ключем "answers" класса list, предназначенный для хранения ответов пользователя при тестировании, получает пустое значение ([]), поскольку на этом этапе от клиента было получено только имя пользоватея;
  • элемент с ключем "points" класса int, предназначенный для хранения числа набранных баллов получает начальное значение 0.
• текущее состояние словаря пользователя user_dict запоминается в файле 'user.dat';

Если клиентская часть передает значение ответа пользователя, т.е. словарь полученных данных data содержит ключ "answers", то выполняются следующие действия:

• производится считывание из файла 'user.dat' текущего значения словаря данных пользователя и добавление в его элемент с ключем 'answers', хранящий в виде списка ответы пользователя, значение очередного ответа;
• из словаря пользователя выбирается список тестов, заданных пользователю, в нем определяется последний тест и из этого теста берется эталонное значение, которое заносится в переменную etalon;
• производится сравнение полученного от пользователя ответа с эталонным значением и, если ответ правильный, число набранных баллов пользователя увеличивается на 1;
• проверяется текущее значение числа проведенных тестов (элемент "number_test" словаря данных пользователя) с числом тестов, указанных для тестирования (max_test) и, если оно меньше, т.е. тестирование не закончено, то выполняются следующие действия:
  • чтение с помощью функции get_test('cur_tests.dat') модифицированного набора тестов (чтобы тесты не повторялись), случайный выбор одного из них, модификаця файла 'cur_tests.dat' и передача клиенту очередного теста;
  • производится изменение элементов с ключами "number_test" и "tests" словаря пользователя – значение "number_test" увеличивается на 1, к значению "tests" добавляется новый тест;
  • текущее состояние словаря пользователя user_dict запоминается в файле 'user.dat';
• если значение элемента "number_test" равно или больше max_test, то тестирование прекращается и его результаты передаются клиенту с помощью функции write_results() (описание функции см. в подразделе 2.2.3):

Результаты тестирования:
Имя – Сидоров Евгений
Оценка – "Отлично"

 Оглавление

2.2.3 Передача результатов тестирования

Для передачи клиенту результатов проведенного тестирования разработана функция write_results():

def write_results (user_dict, out_points=0, out_tests=0, out_answers=0):
print (D, '<i><b>Результаты тестирования:</b></i>' ,
'<br>Имя &ndash; ' , user_dict[ 'name' ])
if out_points:
print ( '<br>Получено баллов &ndash; ' ,
user_dict[ 'points' ], ' из ' , user_dict[ 'number_test' ])
if out_tests:
print ( '<br>Тесты &ndash; ' )
for el in user_dict[ 'tests' ]: print (el.split( '.' )[0])
if out_answers:
print ( '<br>Ответы &ndash; ' )
for el in user_dict[ 'answers' ]: print (el)
print ( '<br>Оценка &ndash; ' )
m=user_dict[ 'points' ]
if m==0: mark= "Неудовлетворительно"
elif m==1: mark= "Удовлетворительно"
elif m==2: mark= "Хорошо"
else : mark= "Отлично"
print ( '"' , mark, '"' ],

которая имеет один обязательный параметр – словарь user_dict, содержающий следующие ключи, отражающие отдельные компоненты тестирования:

• name – имя тестируемого;
• number_test – число проведенных тестов;
• tests – список этих тестов;
• answers – список ответов тестируемого;
• points – число набранных при тестировании баллов

и необязательные (опциональные) параметры: out_points, out_tests и out_answers, которые указывают, надо ли передавать для вывода на стороне клиента значение соответствующей компоненты тестирования (значение 1), или нет (значение 0). По умолчанию все они имеют значение 0, т.е. если не указывать эти аргументы при вызове функции write_results(), то такие данные, как число проведенных тестов, список тестов, список ответов и число баллов выводиться не будут. Будет выведено только имя тестирующего и полученная им оценка (см. работу программы testing.py в подразделе 2.2.2).
Чтобы получить наиболее полную информацию о проведенном тестировании, нужно вызвать функцию write_results(), указав в ней значения всех необязательных аргументов, равными 1:

write_results(user_dict,out_points=1,out_tests=1,out_answers=1)

При этом клиенту будет передана информация в следующем виде:

Результаты тестирования:
Имя – Сидоров Евгений
Получено баллов – 3 из 3
Тесты – Тест №3 Тест №1 Тест №5
Ответы – 100 010 111
Оценка – " Хорошо "

 Оглавление

#!c:/Documents and Settings/ZYKOV/AppData/Local/Programs/Python/Python35-32/python.exe
print ( "Content-Type: text/html" )
print ()
import cgi, cgitb, pickle, random
from my_mod import write_results,D
cgitb.enable()
data=cgi.parse()
f=open('all_users.dat','rb')
if "name" in data:
if data["name"][0]=='all':
print(D,'all')
while True:
try:
user_dict=pickle.load(f)
write_results(user_dict,points=1, tests=1, answers=1)
except EOFError: break
else:
found=False
while True:
try:
user_dict=pickle.load(f)
if user_dict["name"]==data["name"][0]:
write_results(user_dict,points=1,tests=1,answers=1)
found=True
except EOFError:
if not found:
print(D,data["name"][0],": Результаты тестироемого не найдены")
break
f.close()

Индивидуальные задания

Разработать приложение на базе технологий "клиент-сервер" и AJAX, осуществляющее тестирование пользователя на стороне клиента.
Клиентскую часть реализовать в виде HTML-документа с включенными фрагментами JavaScript, задачами которого являются:

• прием имени пользователя (способ реализации указан в табл. 1);
• передача на сервер имени пользователя с использованием AJAX-технологии;
• прием из сервера тестов с использованием AJAX-технологии и визуализация их на Web-странице (способ реализации указан в табл. 1);
• прием ответов пользователя (способ реализации указан в табл. 1);
• прием из сервера результатов тестирования с использованием AJAX-технологии и визуализация их на Web-странице (так же, как и тесты).

В задачи серверной части приложения входит:

•   Разработка не менее четырех тестов в виде списка строк по одной из следующих тем (язык Python):
  • 1) строки;
  • 2) кортежи и списки;
  • 3) множества и сериализация;
  • 4) словари;
  • 5) операторы;
  • 6) функции и сортировка элементов;
  • 7) работа с файлами;
  и сохранение его на диске в виде двоичного файла. Номер темы для варианта указан в табл. 1;
• Каждый тест состоит из заголовка, в котором указывается номер теста, основной части и эталонного значения ответа. Основная часть теста состоит из вопроса/утверждения и трех вариантов ответа. При разработке вариантов ответов необходимо реализовать одно из следующих правил определения эталонного значения ответа:
  • 1) это номер единственного истинного варианта ответа;
  • 2) это номер единственного ложного варианта ответа;
  • 3) это 1 – если большинство вариантов ответов истинные, и 0 – если большинство вариантов ответов ложные;
  номер правила указан в табл. 1;
• прием данных от клиента;
• определение фамилии и ответов тестируемого пользователя;
• выбор случайным образом одного из тестов и передача его на сторону клиента;
• число тестов, переданных пользователю должно быть не менее трех;
• формирование словаря, содержащего такие данные о процессе тестирования:
  • 1)фамилию пользователя, число выполненных тестов, число правильных ответов;
  • 2)фамилию и ответы пользователя, число правильно выполненных тестов;
  • 3)фамилию и ответы пользователя, правильные ответы;
  номер содержимого словаря для варианта указан в табл. 1;
• после окончания тестирования передача клиенту собранных данных.

 Оглавление