7.4.4. Подготовьте отчет о выполнении лабораторной работы.
7.5. Оформление отчета о выполнении лабораторной работы
По результатам работы каждая бригада студентов оформляет индивидуальный отчет, который включает:
- титульный лист (с указанием номера и темы работы, фамилию и инициалы исполнителей, цифр группы и т.д.);
- конкретизированную цель лабораторной работы;
- ход выполнения работы и полученные результаты по каждому из пунктов задания:
а) исходный код XHTML-документа;
б) исходный код импортируемого js-файла, содержащего комментарии к каждой включенной в него функции;
в) скришот(ы) XHTML-документа, в котором выделены поля, непрошедшие валидацию и выведены комментарии, объясняющие причину возникновения ошибок.
г) скриншот, иллюстрирующий успешную обработку сервером формы, которая прошла валидацию на клиенте.
==========================================================
д) скриншоты с данными, считанными из установленных cookie.
e) скриншоты с данными хранимых cookie, просмотренными средствами браузера.
- выводы.
7.6. Контрольные вопросы и задания
1. Перечислите и охарактеризуйте все html-элементы, используемые в формах.
2. Охарактеризуйте все атрибуты тега форм и их возможные, которые обеспечивают формирование, настройку и отправку HTTP-запроса.
3. Опишите свойства cookie как объекта, хранимого браузером.
4. Охарактеризуйте виды HTTP-запросов, их преимущества и недостатки.
5. Охарактеризуйте преимущества и недостатки валидации форм на клиенте и на сервере?
8 Реализация асинхронного взаимодействия браузера с web-сервером с помощью технологии ajax
Цель работы
Изучение принципов организации асинхронного взаимодействия интерфейса пользователя web-приложений с сервером. Изучение особенностей применения форматов XML и JSON для описания передаваемых данных.
8.2 Методические указания по организации самостоятельной работы
При подготовке к лабораторной работе необходимо изучить рекомендованную литературу, лекционный материал по дисциплине и ознакомиться с функциональными возможностями среды разработки Eclipse и браузеров IE и Firefox.
8.3 Описание лабораторной установки
Лабораторная работа выполняется на ЭВМ с использованием среды разработки Eclipse и браузеров Firefox, Internet Explorer, Opera, Chrome, Safari и т.д.
8.3.1 Требования к эвм:
Процессор Pentium 3 или выше;
не менее 128 Мбайт оперативной памяти;
SVGA-дисплей;
Linux, Windows XP, Vista, Windows 7.
8.4 Порядок выполнения и методические указания по выполнению работы
Создайте XHTML-документ, соответствующий предметной области сайта-визитки предприятия, рассматриваемой в предыдущих лабораторных работах. Данная страница должна содержать две кнопки, по нажатию которых будет осуществляться асинхронная загрузка данных с сервера в формате XML и JSON.
Для этого необходимо выполнить следующие действия:
8.4.1. Разработайте JSON-файл, который по своему содержимому будет идентичен используемому в предыдущих лабораторных работах XML-файлу.
8.4.2. Создайте XHTML-документ, соответствующий предметной области сайта-визитки предприятия, рассматриваемой в предыдущих лабораторных работах, содержащий две кнопки («Получить XML» и «Получить JSON»), а также две область для вывода данных, полученных в результате выполнения запросов к web-серверу (например, теги <div> с определенными id: <div id="xml_data"></div><br><div id="json_data"></div>).
Рис. 8.1 – Структура XHTML-файла
8.4.3. Создайте внешний JS-файл, подключите его к созданному XHTML-документу и разместите в нем:
а) функцию, осуществляющую создание и выполнение AJAX-запроса. Данная функция должна содержать два входных параметра: URL и функцию обратного вызова, используемую для обработки полученных результатов.
Используйте GET-запросы. Чтобы они не кешировались, добавьте уникальный идентификатор запроса с использованием Math.random().
б) две функции-обработчика событий onclick кнопок «Получить XML» и «Получить JSON» (внесите соответствующие дополнения в XHTML-документ). Данные функции должны вызывать функцию, создающую AJAX-запрос и передавать ей требуемые URL и функции обратного вызова.
в) две функции обратного вызова, осуществляющие обработку полученных с сервера XML и JSON-объектов и выводящие содержащуюся в них информацию в созданные ранее теги <div id="xml_data"> и <div id="json_data"> XHTML-документа.
Данные следует выводить в виде таблиц, содержащих столбцы, аналогичные полям XML-документа или свойствам JSON-объектов.
Для доступа к объекту класса XMLHttpRequest внутри этих функций используйте указатель this.
Например, вместо
xmlDoc = xmlhttp.responseXML;
(где xmlhttp – имя объекта XMLHttpRequest) следует писать
xmlDoc = this.responseXML;
8.4.4. Разместите JSON-, XML-, JS и HTML-файлы на web-сервере.
Используйте ftp-соединение с адресом ftp://stud@10.12.53.159
Здесь stud – это имя пользователя, имеющего аналогичный пароль.
Для записи имен файлов используйте формат номер_группы_номер_бригады_название.расширение.
Например:
1_3_books.xml
1_3_books.json
1_3_books.js
1_3_books.html
8.4.5. Разместив файлы на web-сервере убедитесь, что они доступны по протоколу HTTP, используя адреса
http://10.12.53.159:8111/stud/имя_файла.xml
http://10.12.53.159:8111/stud/имя_файла.json
http://10.12.53.159:8111/stud/имя_файла.js
http://10.12.53.159:8111/stud/имя_файла.html
8.4.6. Откройте созданную XHTML-страницу на web-сервере (используйте адрес http://10.12.53.159:8111/stud/имя_файла.html), выполните асинхронные запросы и проверьте корректность полученных результатов. При отладке JavaScript-кода и анализе AJAX-запросов используйте утилиту Firebug браузера Firefox (путь запуска приведен на рис. 8.2).
Рис. 8.2 – Запуск утилиты «Firebug»