Содержание

Интерактивные Web-документы

 

Стандартный язык разметки HTML позволяет легко и быстро создавать Web-страницы, передаваемые по сети Интернет. Это достаточно удобный инструмент работы в сети, однако загружаемые в окно браузера страницы являются статичными. Пользователь не может изменять их содержимое, не может взаимодействовать с ними. Мы живем в динамичном, меняющемся мире, и, естественно, хотели бы видеть то же самое и в рукотворном мире — мире Интернета.  

Для придания динамичности HTML-страницам был предложен  и реализован ряд технологий, "оживляющих" и создающих "реагирующие" на действия пользователя HTML-документы. Одной из первых технологий в этом ряду стоит технология, основанная на CGI-сценарии — программе, инициализируемой на сервере при передаче на него информации из полей форм HTML, создаваемых тэгом <FORM>. Ее недостатком является реализация простейшего сценария вида: "Я вам послал сообщение, а вы мне на него ответили". Более того, подобный сценарий существенно влияет на загрузку сети: любой запрос и ответ занимает ресурсы сети. А если для выполнения некоторого действия на сервере переданы неправильные данные? Пользователь получит вместо ожидаемого (возможно достаточно длительное время) ответа всего лишь сообщение о неверно введенных данных.  

Чтобы избежать подобных ситуаций, фирмой Netscape был разработан специальный язык сценариев JavaScript. Программы, написанные на этом языке, встраиваются в документ HTML и интерпретируются браузером, используемым для его просмотра. Подобная технология снимает нагрузку на сеть, избавляя пользователя от ненужных пересылок недостоверной информации, ибо теперь можно написать выполняемый на стороне клиента код для проверки введенных данных. Фирма Microsoft, браузер которой Internet Explorer конкурирует с браузером Netscape Navigator фирмы Netscape, разработала и активно продвигает собственный язык сценариев — VBScript, являющийся подмножеством широко используемого для разработки Windows-приложений языка Visual Basic.  

Языки сценариев действительно делают HTML-страницы интерактивными. Содержание страницы может зависеть от желания  пользователя, однако для его изменения все равно необходимо производить загрузку новой страницы либо во фрейм отображаемой страницы, либо в новое окно браузера. Причем эти изменения связаны с необходимостью взаимодействия с элементами управления: кнопка, поле ввода, переключатель и т. п. Хотелось бы, чтобы страницы действительно стали динамичными, как наш меняющийся мир: за поворотом мы видим открывающийся новый вид, не взаимодействуя ни с какими "элементами управления". Двигаясь по странице и перемещая по ней курсор мыши, хочется увидеть новую информацию, скрытую до тех пор, пока курсор не пройдет, например, над определенным словом или изображением, расположенным на странице. Поместив курсор мыши на некоторый элемент списка, хотелось бы увидеть уточняющую информацию, скрытую для пользователя до этого момента. Или, указав просто на слово "дальше", увидеть на странице очередную картину любимого художника. Все это реализуется с помощью так называемого динамического языка разметки страниц (Dynamic HTML), который, по существу, состоит из трех компонентов — каскадной таблицы стилей (CSS), JavaScript и HTML, соединенные объектной моделью документа (DOM).  

Перечисленные технологии являются мощными инструментами  создана интерактивных Web-страниц, однако они ограничены возможностями соответствующих языков сценариев, которые напрямую связаны с располагаемыми на странице элементами, задаваемыми тэгами языка HTML. Апплеты Java и элементы управления ActiveX, создаваемые с помощью современны) языков программирования, поддерживающих объектно-ориентированные технологии, позволяют внедрять в документ программируемые объекты и взаимодействовать с ними, меняя их свойства и вызывая их методы посредством языков сценариев. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Интерактивные формы на Web-страницах

 

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

Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью  каких программ получает и использует информацию из сети Интернет, а также  выясним, какую информацию они хотели бы видеть на нашем сайте.

Вся форма  заключается в контейнер<form></form>.

<form></form>.

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

Текстовые поля.

Для получения  этих данных разместим в форме  два однострочных текстовых поля для ввода информации.

Текстовые поля создаются с помощью тэга <INPUT>

<INPUT>

со значением  атрибута TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, за-дающее длину поля ввода в символах.

Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки <br>. 
 
 

Переключатели.

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

Для этого  необходимо создать группу переключателей («радиокнопок»). Создается такая  группа с помощью тэга «INPUT» со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".

Еще одним  обязательным атрибутом является VALUE, которому присвоим значения «учащийся», «студент» и «учитель». Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно оно передается серверу. 

Флажки.

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

Флажки  создаются с помощью тэга «INPUT»  со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут  иметь различные значения атрибута NAME. Например, NAME="boxl", NAME="box2" и т. д. 

Еще одним  обязательным атрибутом является VALUE, которому присвоим значения «WWW», «e-mail»  и «FTP». Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно оно пере-дается серверу.

Поля  списков.

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

Для реализации раскрывающегося списка используется контейнер <selectx/select>

<selectx/select>

, в котором  каждый элемент списка определяется  тэгом <opinion>

<opinion>

. 

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

SELECTED. 

Текстовая область.

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

Создается текстовая область с помощью  тэга <textarea>

<textarea>

с обязательными  атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS —  число столбцов области. 

Отправка  данных из формы.

Отправка  введенной в фор-му информации осуществляется с помощью щелчка по кнопке.

Кнопка  создается с помощью тэга "INPUT". Атрибуту TYPE необходимо присвоить значение «submit», а атрибуту VALUE, который задает надпись на кнопке, присвоить значение «Отправить». 

Щелчком по кнопке Отправить можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибуту ACTION контейнера "FORM" надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных:

<form   action="mailto:username@server.ru" metod="post"    enctype="text/plain">...</form 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Методы  доступа

 

Самой главной директивой HTTP-запроса является метод доступа. Он указывается первым словом в первой строке запроса. В нашем примере это GET. Различают четыре основных метода доступа:

GET

HEAD

POST

PUT  

Кроме этих четырех методов существует еще около пяти дополнительных методов  доступа, но они редко бывают реализованы  на практике.  

Метод GET  

Метод GET используется клиентом при запросе к серверу по умолчанию. При этом методе клиент сообщает адрес ресурса(URL), который он хочет получить, версию протокола HTTP, MIME-типы документов, которые он поддерживает, версию и название клиентского программного обеспечения. Все эти параметры указываются в заголовке HTTP-запроса. Тело в запросе не передается.  

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

Метод HEAD  

Метод HEAD используется для минимизации  обменов при работе по протоколу HTTP. Он аналогичен методу GET за исключением  того, что в отклике не передается тела сообщения. Данный метод используется для проверки времени последней модификации ресурса, для проверки срока годности кэшированных ресурсов, при использовании программ сканирования ресурсов World Wide Web. Одним словом, метод HEAD предназначен для минимизации объема передаваемой по сети информации в рамках HTTP-обмена.  

Метод POST  

Метод POST - это альтернатива методу GET. При  обмене данными по методу POST в запросе  клиента присутствует тело HTTP-сообщения. Это тело может формироваться  из данных, которые вводятся в HTML-форме, или из присоединенного внешнего файла. В отклике как правило присутствует и заголовок и тело HTTP-сообщения. Для инициирования обмена по методу POST в атрибуте method контейнера form следует указать значение "post".  

Метод PUT  

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

В отклике  обычно тело ресурса не передается, а в заголовке сообщения указывается код возврата, который определяет успешное или неуспешное размещение ресурса.  

Оптимизация обмена  

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

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

К недостаткам  такой схемы обмена относятся: необходимость установки соединения для каждого обмена и невозможность поддерживать сессию работы с информационным ресурсом. При инициализации соединения по транспортному протоколу TCP и разрыве этого соединения требуется передать довольно большой объем служебной информации. Отсутствие поддержки сессий в HTTP существенно осложняет работу с такими ресурсами как базы данных или ресурсами требующими аутентификации.