Основы web-программирования
На протяжении трех последующих глав мы будем изучать программирование для
World Wide Web (Всемирная паутина). Это очень большая тема, и в настоящей
главе вы получите хорошие знания как о таящихся в ней трудностях, так и об уди-
вительных открывающихся возможностях. В следующей главе мы познакомимся
с использованием ASP.NET, однако для начала нам придется потратить некоторое
время для рассмотрения того, что было раньше и каким образом возникли Интер-
нет вообще и Всемирная паутина в частности.
В этой главе будут рассматриваться следующие темы:
• Устройство Интернета
• Основы HTML и HTML-форм
• Различия между неизменяемыми и активными web-страницами
• Различия между сценариями клиентской и серверной сторон
• Вопрос о том, почему ASP.NET представляет собой
наилучший выбор для разработки современных web-решений
Краткая история Интернета
Интернет впервые был создан в 60-х гг. прошлого века как проект Министер-
ства обороны США. Он получил название ARPANET (Advanced Research Projects
Agency Network — сеть Агентства по перспективным исследовательским проектам).
Его основной целью было объединение различных компьютеров, разбросанных по
Западному побережью США/с тем чтобы они могли взаимодействовать друг
с другом даже в случае начала атомной войны. В то время компьютеры были очень
редкими и дорогостоящими устройствами, которые могли позволить себе только
университеты и правительственные организации. Связав воедино несколько
компьютеров, можно было организовать общий доступ к различной информации
и данным, что еще больше увеличивало ценность каждого отдельного компьютера.
Протокол, предназначенный для работы в данной сети, был разработан таким об-
разом, чтобы быть устойчивым к нарушениям целостности сети. Это было сделано
для того, чтобы даже при выходе из строя в результате ядерной атаки одного или
нескольких компьютеров, сеть сохраняла бы свою работоспособность.
Результатом разработки ARPANET явилось создание TCP/IP (Transmission
Control Protocol/Internet Protocol — протокол управления передачей/межсетевой
протокол). Это протокол, позволяющий вести обмен сигналами, в которых содер-
жатся компьютерные данные и информация, по телефонным линиям, по волоконно-
Основы гиеЪ-программирования 657
оптическим кабелям и через спутники. Протокол TCP/IP позволяет различным
компьютерам обмениваться между собой информацией по сети, и его принятие
расчистило дорогу для появления Интернета в том виде, в котором он знаком нам
сегодня.
На протяжении 70-х и 80-х гг. Интернет по-прежнему оставался, в основном,
областью, в которой работали академические институты и правительственные уч-
реждения. Но по мере того, как компьютеры становились более дешевыми, а пер-
сональные компьютеры стали получать большее распространение, Интернет также
продолжал развиваться. С появлением в 90-х гг. прошлого века World Wide Web
развитие Интернета стало происходить по экспоненциальному закону. На сегод-
няшний день огромное количество людей, обладающих компьютерами, используют
их для доступа к Web, и, как следствие, большая часть современного бизнеса ис-
пользует Web для продажи или продвижения своих продукции и услуг. Не будет
преувеличением сказать, что Интернет в целом и World Wide Web в частности
в корне изменили ведение бизнеса.
World Wide Web
Простой вопрос — знаете ли вы, чем отличается Интернет от World Wide Web?
Если вы отвечаете "ничем", то вам стоит продолжить чтение. Интернет — это
цельная связанная сеть компьютеров, которая охватывает весь земной шар. На
миллионах серверов располагаются миллиарды web-страниц, групп электронной
почты, дискуссионных страниц и FTP-сайтов. Интернет целиком работает в режи-
ме онлайн, включая электронную почту, FTP, новости, Gophet-сайты, чат-про-
граммы и т. п. World Wide Web появилась позже Интернета. Первый web-сервер
заработал в 1991 г., но на сегодняшний день Всемирная паутина — это огромная
часть Интернета, состоящая из взаимосвязанных web-страниц, в которых содер-
жится текст, графика и мультипликация. Ключевым компонентом World Wide Web
являются гиперссылки (текстовые или графические), которые позволяют пользо-
вателю переходить на другие web-страницы. Это оказывается возможным благодаря
использованию HyperText Markup Language (HTML, язык гипертекстовой раз-
метки), к рассмотрению которого мы вскоре перейдем.
До появления Паутины Интернет в основном базировался на тексте. Паутина
представляет собой чрезвычайно дружественную по отношению к пользователям
среду для взаимодействия их друг с другом, что оказывается по-настоящему при-
влекательным для подавляющего большинства людей. Использование Интернета
для получения информации перестало быть прерогативой только ученых и специа-
листов. Помните об этом, когда будете разрабатывать свой очередной сайт! В этой
книге мы будем рассматривать исключительно программирование для World Wide
Web.
Каким образом работает Паутина
Паутина представляет собой пример клиент-серверной системы. Любой объект
в Паутине может быть представлен либо как сервер, либо как клиент.
Серверы
Все, что видите в World Wide Web, находится на каких-либо серверах, разбро-
санных по всему миру. Сервер — это приложение, выполняющееся на некотором
компьютере и обеспечивающее доступ к информации, файлам или данным, кото-
рые запрашиваются каким-либо другим лицом, приложением или компьютером.
658 Глава 23
Если говорить конкретно о web-страницах, то web-сервер отвечает на запросы, ка-
сающиеся тех web-страниц, которые хранятся на этом сервере. Клиент посылает
запрос на получение web-страницы web-серверу, а web-сервер, в свою очередь,
отправляет обратно клиенту страницу для просмотра.
Местоположение серверов определяется с помощью Uniform Resource Locator
(URL — универсальный указатель ресурса). Это особый адрес web-страницы, по
которому она располагается в World Wide Web. Он указывает на местоположение
на каком-либо сервере и на запрашиваемую web-страницу. Например, URL:
http://www.microsoft.com/ms.htm ссылается на сервер в Интернете с именем
www.microsoft.com и на web-страницу с именем ms.htm, расположенную на серве-
ре. Подобно пути, используемому в файловых системах, URL может содержать
в себе названия поддиректорий для более глубокого поиска по содержимому дан-
ного сайта.
У каждого web-сайта имеется свой уникальный IP-адрес (Internet Protocol —
межсетевой адрес), с помощью которого он может быть идентифицирован. Такой
адрес состоит из четырех чисел, которые имеют следующий формат: 200.123.45.1
(числа отделяются друг от друга точками, каждое число может изменяться в диапа-
зоне от 0 до 255). К счастью, нет необходимости держать в памяти IP-адреса web-
сайтов, которые вы посещаете; специальные серверы, называемые DNS-серверами
(Domain Name Services — служба доменных имен), автоматически выполняют не-
обходимые преобразования URL и IP-адресов. Такие DNS могут существовать как
внутри вашей собственной сети, так и вне — в пределах Интернета. Необходимо
понимать, что на одном web-сервере может располагаться несколько различных
web-сайтов, каждый из которых обладает своим собственным URL. В этом случае
IP-адреса всех таких web-сайтов будут ссылаться на один и тот же компьютер,
а приложение web-сервера распределит клиентские запросы по соответствующим
web-сайтам.
Клиенты
Клиентом называется особая часть программного обеспечения, выполняющая-
ся на компьютере. Наиболее распространенным клиентом в Интернете является
браузер — специальная программа, позволяющая пользователю вводить адреса
или использовать гиперссылки на web-страницах для поиска новых web-страниц.
Она управляет отправкой запросов web-серверу и выводом на экран полученной
от web-сервера web-страницы. На сегодняшний день двумя наиболее распростра-
ненными браузерами являются Navigator компании Netscape и Internet Explorer
компании Microsoft.
На следующем рисунке приводится пример, каким образом на сервер посыла-
ется клиентский запрос и как в ответ web-страница отправляется обратно. Этот
ответ представляется в виде HTML-страницы, которая возвращается браузеру
клиента:
1. Пользователь осуществляет
выбор web-страницы,
которую он желает посетить
2. Браузер отправляет по Интернету
HTTP-запрос web-серверу
5. Страница возвращается
браузеру пользователя
и выводится на экран
в нужном формате
3. Осуществляется
поиск web-страницы
на web-сервере
4. Web-сервер
отправляет по Интернету
web-страницу
обратно клиенту
посредством HTTP
Основы юеЪ-программирования 659
Протокол HTTP - Hypertext Transfer Protocol
С точки зрения пользователя отправка и получение данных осуществляется со-
вершенно прозрачно. Все, что видит пользователь в своем браузере,— это либо
выведенная страница, либо сообщение об ошибке, если произошло что-то непред-
виденное. Однако разработчику требуется обладать более полным представлением
относительно того, как именно происходит такое взаимодействие. Мы уже упоми-
нали TCP/IP — протокол, который отправляет данные по линиям связи и опреде-
ляет то, каким образом эти данные передаются к месту назначения. Еще одним
акронимом, который придется запомнить, является HTTP, что расшифровывается
как HyperText Transfer Protocol (протокол передачи гипертекста). Это протокол,
который определяет, что именно необходимо сделать с данными. Это прикладной
протокол, позволяющий браузерам и серверам взаимодействовать друг с другом
и обмениваться между собой данными. Все запросы на получение web-страниц
и ответы, отправляемые серверами, представляют собой HTTP-сообщения, кото-
рые пересылаются между браузером и сервером.
Типы HTTP-сообщений *
Для получения от web-сервера какого-либо ресурса вроде web-страницы клиент
должен отправить web-серверу сообщение с HTTP-запросом. Такое сообщение
включает имя запрашиваемого ресурса (например, имя файла, в котором содер-
жится web-страница), а также некоторые другие данные (называемые заголовками),
которые несут в себе дополнительную информацию о самом клиенте. Web-сервер
обрабатывает запрос и формирует сообщение с HTTP-ответом, предназначенное
для данного клиента. Ответ содержит состояние запроса, другие заголовки, кото-
рые включаются в ответ, и, наконец, сами запрашиваемые данные. Если по какой-
нибудь причине не удается выполнить запрос, то обратно клиенту отправляется со-
общение о неудаче, которое включается в информацию о состоянии запроса, но
никаких данных в ответе не посылается.
Представляется важным запомнить, что в большинстве случаев вам не будет
видно ни одного из этих сообщений. Созданием и отправкой запросов занимается
браузер, и он же обрабатывает сообщения с HTTP-ответами, полученные от сер-
вера. Однако очень важно осознавать те разнообразные возможности, которые
у вас имеются, и что они означают.
Команда HTTP GET
Наиболее часто встречающимся типом HTTP-запроса является команда GET
(получить), предназначенная для запроса у сервера некоторого файла с web-стра-
ницей или какого-нибудь другого ресурса. Формат команды GET очень прост; эта
команда состоит из имени ресурса, которые требуется получить от сервера, и из
нуля или нескольких строк заголовков. Ниже приводится пример допустимого за-
проса GET:
GET /content/booklistings.html HTTP/1.0
From: user@wrox.com
User-Agent: Mozilla/4.0
Строка /content/booklistings.html определяет тот конкретный ресурс, кото-
рый запрашивается у web-сервера. Просмотр папок сервера начинается с корне-
вой папки, следовательно, поскольку данный запрос посылается на www.wrox.com,
он приведет к получению web-страницы, обладающей следующим значением URL:
660 Глава 23
http://www.wrox.com/content/booklistings.html. Строки, начинающиеся СО СЛОВ
From и User-Agent, представляют собой примеры обычных HTTP-заголовков, кото-
рые включаются в состав сообщения-запроса.
Команда HTTP POST
Другая распространенная форма сообщения-запроса, которое может быть от-
правлено web-серверу,— это команда POST (отправить), POST обычно используется
при отправке на сервер информации для ее последующей обработки. Эта команда
обычно используется для проверки данных HTML-формы, к чему мы еще вернем-
ся ниже в этой главе. Сообщения HTTP POST ВЫГЛЯДЯТ очень похожими на сооб-
щения HTTP GET, хотя наиболее часто запрашиваемый в них ресурс оказывается
серверным приложением или активной серверной страницей (активная серверная
страница представляет собой особую разновидность web-страницы, которая в ди-
намике генерирует HTML в зависимости от получаемых ею данных). В отличие от
сообщения GET наличие в этом запросе полезной информации отправляемой серве-
ру, является обязательным. Ниже приводится пример запроса POST, отправляемого
на web-сервер:
POST /content/GetBooks.asp HTTP/1.0
From: user@wrox.com
User-Agent: Mozilla/4.0
Content-Type: text-plain
Content-Length: 33
Здесь располагаются данные, предназначенные для сервера.
Этот запрос отправляется файлу активной серверной страницы (Active Server
Page, ASP), расположенному на сервере, обрабатывающему полученные данные
и возвращающему клиенту динамически сгенерированную HTML-страницу. В при-
веденном выше запросе заданы также два дополнительных HTTP-заголовка —
Content-Type и Content-Length. Web-сервер использует эти заголовки при обработке
информации, полученной им в команде POST. Данные, которые на самом деле были
Получены сервером,— ЭТО строка "Здесь располагаются данные, предназначенные
для сервера.'.
Строка запроса
Другим способом передачи данных серверным приложениям является исполь-
зование команды GET для передачи информации в строке запроса. Это обычный
URL-запрос, к которому непосредственно добавлены необходимые данные, что
оказывается полезным при передаче серверу небольших объемов информации
в текстовом виде. Данные присоединяются к URL в виде пар имя/значение, при-
чем, для того чтобы отделить адрес от данных, используется вопросительный знак,
а пары имя/значение отделяются друг от друга символом &. Ниже приводится при-
мер запроса HTTP GET С данными, включенными в него в формате строки запроса:
GET /Books/Book_Details.asp?isbn=1861004982&order=title HTTP/1.0
From: user@wrox.com
User-Agent: Mozilla/4.0
Эти данные также направляются в ASP-файл вместе с полями isbn и order,
включенными в URL. Использование команды GET ДЛЯ отправки данных серверным
приложениям оказывается очень простым и легкодоступным, но для него сущест-
вуют определенные ограничения. Во-первых, так могут передаваться только тек-
стовые данные, и, во-вторых, количество данных в строке запроса может быть очень
небольшим. Если необходимо отправить нечто большее, чем просто несколько полей
Основы web-программирования 661
с данными, то следует воспользоваться командой POST. Кроме того, все данные,
расположенные в строке запроса, абсолютно доступны на протяжении всей пере-
дачи через установленное соединение, поэтому данные, для которых существует
риск с точки зрения обеспечения безопасности (например, информация о кредит-
ных картах или пароли), никогда не следует включать в строку запроса.
HTTP-заголовки
Имя заголовка Описание
From Информация, идентифицирующая
электронный адрес клиента,
которая задается при определении
установок браузера
User-Agent Тип и версия программного
обеспечения, которая
используется клиентом
для отправки HTTP-запроса
Content-Type Тип данных, содержащихся
в теле данного HTTP-сообщения
Content-Length Длина данных, содержащихся
в теле данного HTTP-сообщения
Date Дата и время формирования
данного сообщения
В предшествующих примерах встретилось
несколько разновидностей HTTP-заголовков.
HTTP-заголовки можно представить себе
как обычные заголовки в документах — они
не являются страницей или документом, но
в них содержатся жизненно важные мета-
данные о содержимом документа. С каждой
HTTP-командой, посылаемой клиенту или
серверу, происходит отправка не только дан-
ных, но и последовательности заголовков.
Каждый из заголовков обычно представляет
собой некоторое поименованное свойство;
в нем содержится имя заголовка, а за ним
его значение. В таблице слева в качестве
примера приводятся некоторые из HTTP-
заголовков.
Web-программирование 101
Поскольку эта книга посвящена программированию, начнем писать хоть какие-
нибудь программы! Мы собираемся рассмотреть процедуру разработки web-стра-
ниц, начиная с самой простейшей и постепенно переходя к ASP.NET. Это поможет
понять, каким образом web-разработка эволюционировала с течением времени, и
даст возможность осознать, каким замечательным инструментом является ASP.NET.
Опытные читатели могут пропустить разделы, которые покажутся им знакомыми.
HTML
HTML, или HyperText Markup Language (язык гипертекстовой разметки), пред-
ставляет собой язык, который используется для вывода web-страниц. Он позволя-
ет определять внешний вид и представление web-страницы: где именно должны
располагаться графические элементы, каким образом должен выглядеть текст,
а также все гиперссылки, имеющиеся на данной странице. Вообще говоря, любая
web-страница, которую вы можете увидеть в Паутине, представляет собой не что
иное как HTML-документ. Эти документы хранятся на web-сервере, и, когда кли-
ент 'запрашивает какую-либо из них, сервер посылает ее клиенту посредством
HTTP.
Существует большое количество отличных книг по программироэанию на HTML,
поэтому мы не будем останавливаться на данной теме настолько подробно, насколь-
ко она того заслуживает. Для получения более детальной информации о том, как
можно создавать прекрасные web-страницы посредством HTML, вы можете обра-
титься к книге "HTML 4.01 Programmers Reference" ("Руководство программиста
по HTML 4.01), ISBN 1861005334, вышедшую в издательстве Wrox Press.
662 Глава 23
Теги
HTML состоит из последовательности тегов, которые описывают внешнее
представление страницы. Эти теги заключаются в угловые скобки, для того чтобы
браузер мог с легкостью идентифицировать их; теги используются браузером для
корректного вывода и форматирования текста, который в них находится. Напри-
мер, следующая строка выведет текст "Hello World", выделив его жирным шрифтом:
<b>Hello World</b>
Для подавляющего большинства тегов необходимо указывать открывающий
и закрывающий теги. Это видно из примера, приведенного выше, в котором пер-
вый тег <ь> "включает" выделение жирным шрифтом, а второй — "выключает"
его для остального текста, который последует за данной строкой. Символ слэш '/'
используется для обозначения закрывающего тега.
Базовый HTML
Единственным для HTML-страниц является правило, гласящее, что в них дол-
жен содержаться только один тег <htmi>. Таким образом, следующая строка пред-
ставляет собой допустимую web-страницу:
<html ></html >
Очевидно, что такая страница совершенно бесполезна, поскольку в ней ничего
не выводится. Все остальные теги должны располагаться между двумя этими
HTML-тегами. Давайте создадим более полезную и интересную страницу, в кото-
рой будут использоваться некоторые базовые HTML-теги:
Практикум: простая HTML-страница
1. Откройте Notepad или какой-либо подходящий текстовый редактор,
понимающий ASCII.
2. Ведите следующий текст в документ:
<html>
<title>An Easy HTML Page</title>
. . •
Si--' . •:'.'• ' :'
<i>This text is in Italics</ixbr>
; ' • • ; . ; . .•. : ; .: ;:;
Please comment on this great site:
</fontx/h3>
<hr> : :. ;,
<br> ' • • ^ ' ' • ' ' • ' • : , ' • • • • • • , : . . • / : '.::: ; f : . ;
</center>
<table Border-"1">
<tr>
•;•;:;-.•••' "• <td>Name</td> • '
<tdxinput type="text" name="Name"x/td> :
< / t r > :. : •
Основы юеЪ-программирования 663
<tr> . • • ' • • , ; : : • - : • • . . ' • :. • .
<td>Cornments:</td>
<td> • ' . :
<textarea name=nComments" rows=3 cols=65 wrapx/textarea>
</td>
</tr>
</table>
< / b o d y > .• •.•••. : • • • •• ' ' '- . • • • • • . ., ' '• ' • • .•:•••• •'-•'•;•••;';-.-' ; .
</html>
Hello Everyone
Dm Ш1 is м .tiaix*
№
3. Сохраните файл ПОД Именем Comments.htm.
4. Запустите Internet Explorer или Netscape
Navigator и откройте в нем только что
сохраненный файл. Вы увидите вывод,
аналогичный изображенному
на рисунке слева.
Как это работает —
Простая HTML-страница
Хотя это совсем простая страница, она позволяет
продемонстрировать основы программирования на
HTML. Все содержимое файла заключено в блок
<htmi></htmi>, который позволяет браузеру понять,
что это HTML-файл.
В следующих строках кода показывается, каким образом можно задать назва-
ние HTML-страницы. Тег <title> должен находиться внутри пары тегов <head>.
Название страницы выводится в самой верхней части окна web-браузера. Область
<head> может содержать и другую информацию относительно данной страницы, на-
пример, кто является ее создателем и каково ее содержание, и такая информация
может быть использована различными поисковыми программами и web-агентами:
<head>
<title>An Easy HTML Page</title>
</head>
Оставшаяся часть страницы заключается между двумя тегами <body>. Этот тег
определяет содержимое реальной страницы, другими словами, то, что можно уви-
деть в клиентской области браузера:
.<center>
<hl>Hello Everyone</hl>
<i>This text is in Italics</ixbr>
<b>Here text is in bold:</b>
Теги <center> используются, для того чтобы содержащиеся на странице эле-
менты выравнивались относительно центра. Тег <hi> относится к стилю шрифта,
который называется "heading level Г (заголовок уровня 1). Существует шесть
уровней заголовков (от 1 до 6), причем 1 соответствует самому большому. Стиль
<ы> использован дая форматирования названия страницы. В следующей строке
используется тег <i>, который выделяет курсивом заключенный в нем текст на-
клонным. Тег <ь> работает аналогичным образом, только заключенный в нем текст
выделяется жирным шрифтом.
<h3xfont color=llblue">Please comment on this great site:</fontx/h3>
664 . Глава 23
Далее мы используем тег <font> для указания цвета выводимого текста. Обра-
тите внимание на то, что текст coior="biueH содержится непосредственно внутри
самого тега <font>. У многих тегов имеются дополнительные атрибуты, которые
могут включаться в них для задания дополнительной информации. В данном случае
атрибут color используется для задания цвета выводимого текста. В качестве
значения этого атрибута может использоваться либо некоторое поименованное
значение, например, blue, либо шестнадцатеричное число, которое представляет
значения RGB выбранного цвета. Существует слишком много возможностей, ис-
пользующихся в различных тегах, что не позволяет нам углубляться в подробно-
сти, но здесь приведен общий формат, которому должны следовать задаваемые
атрибуты.
<hr>
<br>
</center>
Следующая строка выводит горизонтальную линию через весь экран при помо-
щи тега <hr>, что официально означает "horizontal rule" (горизонтальная линейка).
Тег <Ьг> соответствует символу окончания строки. Этот символ завершает теку-
щую строку и выводит следующий печатаемый символ со следующей строки. Об-
ратите внимание на то, что ни тегу <hr>, ни тегу <br> не требуется наличия
закрывающего тега — они используются самостоятельно без второго совпадающе-
го тега. Это следствие того, что ни один из них не предназначается для разметки
выводимого текста — они просто выводят нечто на экран. После этого происходит
закрытие тега, ответственного за выравнивание текста по центру, посредством за-
крывающего тега </center>.
<table Border="l">
<tr>
<td>Name</td>
<tdxinput type="text" name=MNameMx/td>
</tr>
<tr>
<td>Comments:</td>
<tdxtextarea name="Comments" rows=3 cols=65 wrapx/textareax/td>
</tr>
</table>
В следующих строках происходит создание простой таблицы, в строках которой
содержатся текстовые окна. Остановимся на этом более подробно, для того чтобы
продемонстрировать, каким образом можно создавать интерактивные HTML-стра-
ницы. Тег <tabie> сообщает браузеру о необходимости начать создавать таблицу.
Между тегами <tabie> располагаются теги <tr> (table row — строка таблицы)
и <td> (table data — табличные данные). Тег строки таблицы задает начало новой
строки, а тег табличных данных — начало нового столбца. Существуют очень
сложные приемы, которые могут использоваться для форматирования HTML-таб-
лиц; автор советует познакомиться с ними подробнее, если заинтересовались
web-разработкой.
Текстовые окна имеют внешний вид, хорошо знакомый вам по главе 13, где об-
суждалась разработка приложений WebForm. Главное отличие заключается в том,
что теперь для их вывода используется HTML, вместо того, чтобы создавать текс-
товые окна TextBox самостоятельно. Тег <input> обладает большим количеством
атрибутов, которые могут использоваться совместно с ним, включая атрибут type,
который определяет, является ли он текстовым окном, переключателем, команд-
ной кнопкой или окном с выбором. Тег <textarea> создает большее по размеру
Основы ювЬ-программирования 665
текстовое окно с возможностью использования прокрутки, при этом в нем исполь-
зуются несколько атрибутов, определяющих различные свойства этого управляю-
щего элемента,— такие как число строк, число столбцов, а также обрамляется
текст или нет.
Как можно заметить, просмотрев данный файл в браузере, нами создана про-
стая web-страница. Существует возможность изменять размеры окна, просматри-
вать эту страницу в различных браузерах и вводить текст в два текстовых окна.
Возможно, эта страница оставляет желать лучшего с точки зрения графического
представления и содержания, однако основная идея заключалась в знакомстве
с тем, каким образом используется HTML, а не в создании сногсшибательного
web-сайта. Теперь мы приступаем к рассмотрению того, каким образом можно до-
биться от web-страницы передачи данных на сервер.
HTML-формы
Итак, у нас есть замечательная web-страница, однако как пользователь может
передавать свои комментарии? На настоящий момент у него такой возможности
нет — он может просто вводить текст в текстовые окна.
Необходим способ, который позволял бы отправлять комментарии читателя на-
шей страницы обратно к нам. Для реализации такого процесса в HTML использу-
ются формы. Можно представлять себе HTML-формы точно так же, как и обычные
"бумажные" формы (бланки): в них содержатся поля, которые должны быть за-
полнены данными пользователем, после чего они отправляются надлежащему лицу
или по надлежащему адресу.
Форма создается точно так же, что и большинство HTML-элементов — с по-
мощью тегов. Тег <form> используется для размещения формы на странице, а тег
</form> завершает-ее создание. Этот тег ничего не выводит на экран, он просто
обозначает начало и конец формы, а поля, расположенные между ними, позволяют
задавать фактические поля данной формы.
Есть несколько очень важных атрибутов, которым необходимо присваивать со-
ответствующие значения в теге <form>. Основной синтаксис при этом имеет следу-
ющий вид:
<form name="myform" method=npost11 action="myform.asp">
Атрибут name идентифицирует форму и должен быть уникальным, иначе сервер
не сможет корректно обработать форму. Атрибут method определяет, каким спосо-
бом данные из формы будут переправляться серверу. Наконец, атрибут action
указывает браузеру, куда ему следует отправлять данные, введенные в форму.
Атрибут method может обладать одним из двух значений: GET ИЛИ POST. ЭТО ДОЛ-
ЖНО быть знакомо по предшествующему обсуждению нами HTTP-запросов.
В форме указывается, в каком формате браузер должен отправить запрос серверу
после ввода в форму данных. Помните, что метод GET будет присоединять введен-
ные данные к адресу ресурса, создав строку запроса, которая и будет анализироваться
сервером. Метод POST будет отправлять введенные в форму данные непосредственно
в виде тела HTTP-сообщения. Метод GET оказывается очень удобным при работе
с небольшим количеством текстовых данных, в то время как метод POST может ис-
пользоваться с произвольным количеством данных любого формата.
И последняя ключевая информация, которая необходима для создания формы,—
это какие действия будет выполнять данная форма на сервере после ее заполнения.
Это задается с помощью атрибута action тега <form>. В большинстве случаев он
будет указывать на активную серверную web-страницу, которая может обработать
666 Глава 23
введенные данные и выдать пользователю какой-либо ответ. В следующем разделе
мы рассмотрим пересылку введенных в форму данных непосредственно активной
странице, но на настоящий момент мы ограничиваемся простой отправкой данных
по электронной почте.
В прошлом единственным способом создать действительно динамичное содержа-
ние страницы можно было только посредством использования Common Gateway
Interface (CGI — интерфейс общего шлюза), который позволял web-страницам
вызывать приложения, расположенные на web-серверах. Такие приложения могли
создаваться на произвольном языке программирования, но чаще всего они писа-
лись на C/C++ или на Perl. В этом случае форма передавалась приложению, ко-
торое возвращало обратно получившееся динамическое содержимое. Однако с точки
зрения сервера такие CGI-приложения не были дружественными по отношению
к процессору или ресурсу, -поэтому во многих случаях они были заменены на ин-
струменты создания сценариев, работающих на стороне сервера, с которыми мы
познакомимся в следующем разделе. Во многих web-приложениях HTML-форма
передавалась динамической странице, находящейся на стороне сервера, которая
выполняла обработку введенных пользователем данных и генерировала соответст-
вующую ответную страницу.
Местонахождение приложения или страницы, которым будет передаваться
форма, задается атрибутом action тега <form>. Он может ссылаться на CGI-при-
ложение, активную web-страницу и даже на адрес электронной почты. В послед-
нем случае заполненная форма передается по электронной почте по указанному
адресу.
Давайте создадим небольшую программу, которая позволит увидеть, как эти
формы работают на практике.
Практикум: HTML-формы
1. Откройте файл comments.htm, созданный в предыдущем примере.
2. Добавьте в существующий документ следующие строки:
<html>
<head>
<title>An Easy HTML Page</title>
</head>
<body>
<center>
<hl>Hello Everyone</hl>
<i>This text is in Italics</ixbr>
<b>Here text is in bold:</b>
<h3xfont color=Blue>Please comment on this great site:</fontx/h3>
<hr>
<br>
</center>
<form method="post" enctype="text/plain"
action="mailto:yourname@doinain.com" name="CommentsForm">
<table border="ln>
<tr>
<td>Name</td> '
<tdxinput type="text11 name=IINamellx/td>
</tr>
<tr>
<td>Comments:</td>
<td>
<textarea name=nComments" rows=3 cols=65 wrapx/textarea>
</td>
Основы web-программирования 667
Рим |к
| •••«•«••и
• - - - ; r * J
«а
Hello Everyone
7«w «w «на A*A«f
JMtswt comment on tM» ftreatt d(«
- —]
:,: . . . . Щ
j
, </tr>
</table>
<br> •
<input type=Hsubmit" value="Submit">
</form>
</body>
</html>
3. Введите ваш адрес электронной почты
В атрибут action Сразу За текСТОМ mailto.
4. Сохраните документ ПОД именем FormComments.htm.
5. Откройте этот HTML-файл в браузере.
Введите какие-нибудь данные и нажмите
кнопку Submit (см. рис. слева).
6. На экране при этом ничего не изменится,
но если ваш браузер правильно настроен,
то вы получите сообщение по электронной почте.
В зависимости от используемого браузера
передаваемые данные будут содержаться либо
в приложении, либо непосредственно в самом
теле сообщения. Но в любом случае полученные
данные будут выглядеть следующим образом:
Name=Keith
Comments=This site is amazing!
Как это работает — HTML-формы
К этому примеру добавлены всего три строки, но при этом его возможности
изменились коренным образом. Теперь есть способ, позволяющий конечным поль-
зователям, просматривающим нашу страницу, использовать обратную связь. Это
первый шаг на пути к созданию по-настоящему интерактивных web-страниц.
В следующей строке начинается описание формы, и в ней также определяются
действия, которые эта форма будет выполнять, когда пользователь закончит ее за-
полнение:
<form method="post11 enctype=" text /plain"
action= "mailto:yourname@domain.com11 name=" Comment sForm">
Атрибут method указывает на то, что данная форма будет отправлять на сервер
команду HTTP POST, содержащую введенные в форму данные в теле HTTP-сооб-
щения. Атрибут action определяет, куда будет происходить отправка данных.
В данном случае форма будет отправлять данные по электронной почте по нашему
адресу. Атрибут enctype определяет тип данных, отправляемых в команде HTTP
POST. В большинстве случаев это простой текст. Атрибут name используется для
того, чтобы можно было ссылаться на элементы формы из языка JavaScript, с чем
мы столкнемся несколько позже.
Между тегами <form> мы определяем структуру таблицы, кроме того, там же
располагаются теги <input> и <textarea>. Обратите внимание на то, что для обоих
тегов весьма важным является атрибут name, который задается в исходной форме.
Отправка данных из формы на сервер происходит в виде последовательности пар
имя/значение, в которых в качестве имени используется значение атрибута name
соответствующего поля формы, а в качестве значения — данные, введенные поль-
зователем. Следовательно, единственный способ получить доступ к конкретным
668 Глава 23
элементам данных заключается в использовании имен соответствующих элементов
формы. То, как это работает, можно увидеть ниже по данным, полученным по
электронной почте:
Name=Keith
Comments=This site is amazing!
Для создания кнопки Submit снова используем тег <input>, однако на этот раз
атрибуту type присваивается значение submit. Это приводит к тому, что форма,
в которую включен этот тег, выполняет атрибут action, предполагающий отправку
электронной почты. Атрибут value определяет, какой текст должен выводиться на
самой кнопке,— точно так же, как мы это делали с кнопками WinForm.
Элементы формы
Существует перечень форм, которые можно размещать на web-странице. Для
базового HTML выбор несколько ограничен по сравнению с возможностями, име-
ющимися в ASP.NET (см. главу 24). Следующая таблица иллюстрирует различные
возможности форм, которыми располагает базовый HTML:
Элемент формы HTML-тег Примечания
Текстовое окно
Текстовое окно
для пароля
Многострочное
текстовое окно
Переключатели
<input type=*text*>
<input type="password*>
<textarea>
< input type=lf radio ">
Окна с выбором <input type="checkbox*>
Меню <select name='rMenuName'r>
Этот элемент позволяет создавать такое же текстовое
окно, что в приложениях WinForm. Пользователь
может вводить текст в определенную область, а также
использовать стандартные операции вырезания
и вставки.
Текст, вводимый в такое окно, выводится в виде
последовательности скрытых символов. Обратите
внимание на то, что это не означает, что данный текст
скрывается при передаче; для безопасной передачи
следует воспользоваться какими-либо другими
средствами.
Этой особой разновидностью текстового окна
следует пользоваться в тех случаях, когда необходимо
работать более чем с одной строкой текста.
Этот управляющий элемент позволяет создать
несколько строк текста, при этом предоставляются
стандартные возможности их редактирования.
Переключатели используются, когда необходимо
предоставить пользователю сделать выбор из
нескольких возможностей, причем допускается выбор
только одного из имеющихся вариантов. В каждый
конкретный момент времени пользователь может
выбрать только один переключатель.
Окна с выбором работают аналогично переключателям
за исключением того, что они позволяют пользователю
одновременно выбирать несколько значений из одной
группы. Таким образом, окна с выбором являются
естественными решением, когда требуется ответить
на вопрос типа ' у к а ж и т е в с е подходящие варианты'.
Этот управляющий элемент позволяет создавать
меню, которое дает пользователю возможность
осуществлять выбор из множества опций.
Каждый пункт меню задается с помощью
отдельного тега <option>.
Основы web-программирования
Элемент формы HTML-тег Примечания
669
Продолжение таблицы
Скрытые поля <input type= "hidden">
Образ < input type=<r image ">
Кнопка Submit --input type=" submits
Кнопка Reset <input type="reset">
Скрытые поля никогда не выводятся пользователю,
и их удобно использовать для хранения данных,
которые подлежат обработке на сервере.
В следующей главе вы познакомитесь с тем,
каким образом ASP.NET использует скрытые поля
для хранения информации о текущем сеансе.
Этот управляющий элемент позволяет создавать образ,
щелкнув на котором мышью, пользователь может
передавать введенные в форму данные.
Помимо других заданных в форме данных серверу
отправляются горизонтальная и вертикальная
координаты курсора мыши. Это позволяет серверу
возвращать содержимое в зависимости от того,
в каком месте образа пользователь щелкнул кнопкой
мыши. В качестве широко распространенного на
многих web-страницах примера можно привести карту
расположения различных подразделений компании.
Щелкнув мышью на названии города или штата,
пользователь получает возможность перейти
н