Теория и практика разработки современных клиентских веб-приложений

Теория и практика разработки современных
клиентских веб-приложений

2-е издание, исправленное

Сычев А.В.

Национальный Открытый Университет “ИНТУИТ”
2016

2

Теория и практика разработки современных клиентских веб-приложений/ А.В. Сычев - М.:
Национальный Открытый Университет “ИНТУИТ”, 2016

В рамках курса рассматриваются теоретические и практические аспекты технологий разработки
современных клиентских веб-приложений, в том числе насыщенных (RIA) приложений, а также
вопросы, связанные c безопасностью и улучшением usabilty в клиентских приложениях (на примере
MS Internet Explorer 8).
Предлагаемый курс включает в себя лекционную и практическую части. Первая часть предполагает
представление теоретического материала в лекционном формате, и предполагает формирование у
студентов базовых знаний по технологиям клиентской разработке веб-приложений. Для каждой
лекции приводятся вопросы для проверки первичного понимания студентами материала.Во второй
части студент должен будет выполнить лабораторные занятия с использованием Developer Tools в
Internet Explorer 8, Visual Web Developer 2008 Express для практического изучения технологий
клиентской веб-разработки.В конце каждой лабораторной работы приводятся задания для
самостоятельного выполнения.Данный курс может рассматриваться в качестве основы для
специализированных курсов, ориентированных на более глубокое изучение отдельных направлений
веб-технологий.В результате освоения данного курса студент должен на практике познакомиться с
инновационными продуктами и технологиями, предлагаемыми компанией Microsoft для разработки и
управления веб-контентом.

(c) ООО “ИНТУИТ.РУ”, 2010-2016
(c) Сычев А.В., 2010-2016

3

Введение. Структура веб-технологий

Показывается, каким образом в веб-технологиях реализуются общие принципы клиентсерверных технологий и рассматриваются ключевые элементы базового протокола
HTTP.

Предметом данного курса являются технологии глобальной сети World Wide Web
(сокращенно WWW или просто Web ). На русском языке распространенным вариантом
является название “Веб”.

В частности, в рамках курса будут рассмотрены такие вопросы как: базовые стандарты
и протоколы сети Веб, языки разметки и программирования веб-страниц, инструменты
разработки и управления веб-контента и приложений для Веб, средства интеграции
веб-контента и приложений в Веб.

Сеть Веб представляет собой глобальное информационное пространство, основанное на
физической инфраструктуре Интернета и протоколе передачи данных HTTP. Зачастую,
говоря об Интернете, подразумевают именно сеть Веб.

Клиент-серверные технологии Веб

Базовым протоколом сети гипертекстовых ресурсов Веб является протокол HTTP. В
его основу положено взаимодействие ” клиент-сервер “, то есть предполагается, что:

1. Потребитель- клиент инициировав соединение с поставщиком-сервером посылает

ему запрос;

2. Поставщик- сервер, получив запрос, производит необходимые действия и

возвращает обратно клиенту ответ с результатом.

При этом возможны два способа организации работы компьютера-клиента:

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

Прежде чем перейти к конкретным клиент-серверным веб-технологиям, рассмотрим
основные принципы и структуру базового протокола HTTP.

Протокол HTTP

HTTP ( HyperText Transfer Protocol - RFC 1945, RFC 2616 ) - протокол прикладного
уровня для передачи гипертекста.

4

Центральным объектом в HTTP является ресурс, на который указывает URI в запросе
клиента. Обычно такими ресурсами являются хранящиеся на сервере файлы.
Особенностью протокола HTTP является возможность указать в запросе и ответе
способ представления одного и того же ресурса по различным параметрам: формату,
кодировке, языку и т. д. Именно благодаря возможности указания способа кодирования
сообщения клиент и сервер могут обмениваться двоичными данными, хотя изначально
данный протокол предназначен для передачи символьной информации. На первый
взгляд это может показаться излишней тратой ресурсов. Действительно, данные в
символьном виде занимают больше памяти, сообщения создают дополнительную
нагрузку на каналы связи, однако подобный формат имеет много преимуществ.
Сообщения, передаваемые по сети, удобочитаемы, и, проанализировав полученные
данные, системный администратор может легко найти ошибку и устранить ее. При
необходимости роль одного из взаимодействующих приложений может выполнять
человек, вручную вводя сообщения в требуемом формате.

В отличие от многих других протоколов, HTTP является протоколом без памяти. Это
означает, что протокол не хранит информацию о предыдущих запросах клиентов и
ответах сервера. Компоненты, использующие HTTP, могут самостоятельно
осуществлять сохранение информации о состоянии, связанной с последними запросами
и ответами. Например, клиентское веб-приложение, посылающее запросы, может
отслеживать задержки ответов, а веб-сервер может хранить IP -адреса и заголовки
запросов последних клиентов.

Все программное обеспечение для работы с протоколом HTTP разделяется на три
основные категории:

Серверы - поставщики услуг хранения и обработки информации (обработка
запросов).
Клиенты - конечные потребители услуг сервера (отправка запросов).
Прокси-серверы для поддержки работы транспортных служб.

“Классическая” схема HTTP-сеанса выглядит так.

1. Установление TCP -соединения.
2. Запрос клиента.
3. Ответ сервера.
4. Разрыв TCP -соединения.

Таким образом, клиент посылает серверу запрос, получает от него ответ, после чего
взаимодействие прекращается. Обычно запрос клиента представляет собой требование
передать HTML-документ или какой-нибудь другой ресурс, а ответ сервера содержит
код этого ресурса.

В состав HTTP-запроса, передаваемого клиентом серверу, входят следующие
компоненты.

Строка состояния (иногда для ее обозначения используют также термины строка
5

статус, или строка запроса).
Поля заголовка.
Пустая строка.
Тело запроса.

Строку состояния вместе с полями заголовка иногда называют также заголовком
запроса.

Рис. 1.1.  Структура запроса клиента

Строка состояния имеет следующий формат:

метод_запроса   URL_pecypca  версия_протокола_НТТР

Рассмотрим компоненты строки состояния, при этом особое внимание уделим методам
запроса.

Метод, указанный в строке состояния, определяет способ воздействия на ресурс, URL
которого задан в той же строке. Метод может принимать значения GET, POST, HEAD,

PUT, DELETE и т.д. Несмотря на обилие методов, для веб-программиста по-настоящему
важны лишь два из них: GET и POST.

GET. Согласно формальному определению, метод GET предназначается для
получения ресурса с указанным URL. Получив запрос GET, сервер должен прочитать
указанный ресурс и включить код ресурса в состав ответа клиенту. Ресурс, URL
которого передается в составе запроса, не обязательно должен представлять собой
HTML-страницу, файл с изображением или другие данные. URL ресурса может
указывать на исполняемый код программы, который, при соблюдении
определенных условий, должен быть запущен на сервере. В этом случае клиенту
возвращается не код программы, а данные, сгенерированные в процессе ее
выполнения. Несмотря на то что, по определению, метод GET предназначен для
получения информации, он может применяться и в других целях. Метод GET
вполне подходит для передачи небольших фрагментов данных на сервер.

6

POST. Согласно тому же формальному определению, основное назначение метода

POST - передача данных на сервер. Однако, подобно методу GET, метод POST может
применяться по-разному и нередко используется для получения информации с
сервера. Как и в случае с методом GET, URL, заданный в строке состояния,
указывает на конкретный ресурс. Метод POST также может использоваться для
запуска процесса.
Методы HEAD и PUT являются модификациями методов GET и POST.

Версия протокола http, как правило, задается в следующем формате:

HTTP/версия.модификация

Поля заголовка, следующие за строкой состояния, позволяют уточнять запрос, т.е.
передавать серверу дополнительную информацию. Поле заголовка имеет следующий
формат:

Имя_поля: Значение

Назначение поля определяется его именем, которое отделяется от значения
двоеточием.

Имена некоторых наиболее часто встречающихся в запросе клиента полей заголовка и
их назначение приведены в таблице 1.1.

Таблица 1.1. Поля заголовка запроса HTTP

Поля

заголовка

HTTPзапроса

Значение

Host
Доменное имя или IP -адрес узла, к которому обращается клиент

Referer
URL документа, который ссылается на ресурс, указанный в строке
состояния

From
Адрес электронной почты пользователя, работающего с клиентом

Accept
MIME -типы данных, обрабатываемых клиентом. Это поле может иметь
несколько значений, отделяемых одно от другого запятыми. Часто поле
заголовка Accept используется для того, чтобы сообщить серверу о том,
какие типы графических файлов поддерживает клиент

AcceptLanguage
Набор двухсимвольных идентификаторов, разделенных запятыми, которые
обозначают языки, поддерживаемые клиентом

AcceptCharset
Перечень поддерживаемых наборов символов

ContentType

MIME -тип данных, содержащихся в теле запроса (если запрос не состоит из
одного заголовка)

ContentLength
Число символов, содержащихся в теле запроса (если запрос не состоит из
одного заголовка)

Range
Присутствует в том случае, если клиент запрашивает не весь документ, а
лишь его часть

Connection

7

Используется для управления TCP -соединением. Если в поле содержится
Close, это означает, что после обработки запроса сервер должен закрыть
соединение. Значение Keep-Alive предлагает не закрывать TCP соединение, чтобы оно могло быть использовано для последующих
запросов

User-Agent Информация о клиенте

Во многих случаях при работе в Веб тело запроса отсутствует. При запуске CGI сценариев данные, передаваемые для них в запросе, могут размещаться в теле запроса.

Ниже представлен пример HTML-запроса, сгенерированного браузером

GET http://oak.oakland.edu/ HTTP/1.0
Connection: Keep-Alive
User-Agent: Mozilla/4.04 [en]   (Win95;  I)
Host: oak.oakland.edu
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */*
Accept-Language: en
Accept-Charset: iso-8859-l,*,utf-8

Получив от клиента запрос, сервер должен ответить ему. Знание структуры ответа
сервера необходимо разработчику веб-приложений, так как программы, которые
выполняются на сервере, должны самостоятельно формировать ответ клиенту.

Подобно запросу клиента, ответ сервера также состоит из четырех перечисленных
ниже компонентов.

Строка состояния.
Поля заголовка.
Пустая строка.
Тело ответа.

Ответ сервера клиенту начинается со строки состояния, которая имеет следующий
формат:

Версия_протокола   Код_ответа  Пояснительное_сообщение

Версия_протокола задается в том же формате, что и в запросе клиента, и имеет тот
же смысл.
Код_ответа - это трехзначное десятичное число, представляющее в
закодированном виде результат обслуживания запроса сервером.
Пояснительное_сообщение дублирует код ответа в символьном виде. Это строка
символов, которая не обрабатывается клиентом. Она предназначена для
системного администратора или оператора, занимающегося обслуживанием
системы, и является расшифровкой кода ответа.

Из трех цифр, составляющих код ответа, первая (старшая) определяет класс ответа,
остальные две представляют собой номер ответа внутри класса. Так, например, если

8

запрос был обработан успешно, клиент получает следующее сообщение:

HТТР/1.0    200    ОК

Как видно, за версией протокола HTTP 1.0 следует код 200. В этом коде символ 2
означает успешную обработку запроса клиента, а остальные две цифры (00) - номер
данного сообщения.

В используемых в настоящее время реализациях протокола HTTP первая цифра не
может быть больше 5 и определяет следующие классы ответов.

1 - специальный класс сообщений, называемых информационными. Код ответа,
начинающийся с 1, означает, что сервер продолжает обработку запроса. При
обмене данными между HTTP-клиентом и HTTP-сервером сообщения этого класса
используются достаточно редко.
2 - успешная обработка запроса клиента.
3 - перенаправление запроса. Чтобы запрос был обслужен, необходимо
предпринять дополнительные действия.
4 - ошибка клиента. Как правило, код ответа, начинающийся с цифры 4,
возвращается в том случае, если в запросе клиента встретилась синтаксическая
ошибка.
5 - ошибка сервера. По тем или иным причинам сервер не в состоянии выполнить
запрос.

Примеры кодов ответов, которые клиент может получить от сервера, и поясняющие
сообщения приведены в таблице 1.2.

Таблица 1.2. Классы кодов ответа сервера

Код Расшифровка
Интерпретация

100 Continue
Часть запроса принята, и сервер ожидает от клиента продолжения
запроса

200 OK
Запрос успешно обработан, и в ответе клиента передаются данные,
указанные в запросе

201 Created
В результате обработки запроса был создан новый ресурс

202 Accepted
Запрос принят сервером, но обработка его не окончена. Данный код
ответа не гарантирует, что запрос будет обработан без ошибок

206 Partial

Content
Сервер возвращает часть ресурса в ответ на запрос, содержавший
поле заголовка Range

301 Multiple

Choice
Запрос указывает более чем на один ресурс. В теле ответа могут
содержаться указания на то, как правильно идентифицировать
запрашиваемый ресурс

302 Moved

Permanently Затребованный ресурс больше не располагается на сервере

302 Moved

Temporarily Затребованный ресурс временно изменил свой адрес

400 Bad Request В запросе клиента обнаружена синтаксическая ошибка
403 Forbidden
Имеющийся на сервере ресурс недоступен для данного
пользователя

9

Not Found
Ресурс, указанный клиентом, на сервере отсутствует

405 Method Not

Allowed
Сервер не поддерживает метод, указанный в запросе

500 Internal

Server Error Один из компонентов сервера работает некорректно

501 Not

Implemented Функциональных возможностей сервера недостаточно, чтобы

выполнить запрос клиента

503 Service

Unavailable Служба временно недоступна

505 HTTP Version

not
Supported

Версия HTTP, указанная в запросе, не поддерживается сервером

В ответе используется такая же структура полей заголовка, как и в запросе клиента.
Поля заголовка предназначены для того, чтобы уточнить ответ сервера клиенту.
Описание некоторых из полей, которые можно встретить в заголовке ответа сервера,
приведено в таблице 1.3.

Таблица 1.3. Поля заголовка ответа веб-сервера

Имя поля
Описание содержимого

Server
Имя и номер версии сервера

Age
Время в секундах, прошедшее с момента создания ресурса

Allow
Список методов, допустимых для данного ресурса

ContentLanguage
Языки, которые должен поддерживать клиент для того, чтобы корректно
отобразить передаваемый ресурс

ContentType

MIME -тип данных, содержащихся в теле ответа сервера

ContentLength
Число символов, содержащихся в теле ответа сервера

LastModified
Дата и время последнего изменения ресурса

Date
Дата и время, определяющие момент генерации ответа

Expires
Дата и время, определяющие момент, после которого информация,
переданная клиенту, считается устаревшей

Location
В этом поле указывается реальное расположение ресурса. Оно
используется для перенаправления запроса

CacheControl
Директивы управления кэшированием. Например, no-cache означает, что
данные не должны кэшироваться

В теле ответа содержится код ресурса, передаваемого клиенту в ответ на запрос. Это не
обязательно должен быть HTML-текст веб-страницы. В составе ответа могут
передаваться изображение, аудио-файл, фрагмент видеоинформации, а также любой
другой тип данных, поддерживаемых клиентом. О том, как следует обрабатывать
полученный ресурс, клиенту сообщает содержимое поля заголовка Content-type.

Ниже представлен пример ответа сервера на запрос, приведенный в предыдущем
разделе. В теле ответа содержится исходный текст HTML-документа.

HTTP/1.1 200 OK

10