Прикладной уровень стека TCP/IP. Электронная почта
Выбери формат для чтения
Загружаем конспект в формате pdf
Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
15 Прикладной уровень стека TCP/IP. Электронная почта
Всемирная паутина (WWW, World Wide Web) - это архитектура, являющаяся основой для
доступа к связанным между собой документам, находящимся на миллионах машин по всему
Интернету. За 10 лет своего существования из средства распространения информации на тему
физики высоких энергий она превратилась в приложение, о котором миллионы людей с разными
интересами думают, что это и есть «Интернет». Огромная популярность этого приложения стала
следствием цветного графического интерфейса, благодаря которому даже новички не встречают
затруднений при его использовании. Кроме того, Всемирная паутина предоставляет огромное
количество информации практически по любому вопросу, от африканских муравьедов до яшмового
фарфора.
Всемирная паутина была создана в 1989 году в Европейском центре ядерных исследований
CERN (Conseil Europeen pour la Recherche Nucleaire) в Швейцарии. В этом центре есть несколько
ускорителей, на которых большие группы ученых из разных европейских стран занимаются
исследованиями в области физики элементарных частиц. В эти команды исследователей часто
входят ученые из пяти-шести и более стран. Эксперименты очень сложны, для их планирования и
создания оборудования требуется несколько лет. Программа Web (паутина) появилась в результате
необходимости обеспечить совместную работу находящихся в разных странах больших групп
ученых, которым нужно было пользоваться постоянно меняющимися отчетами о работе, чертежами,
рисунками, фотографиями и другими документами.
Изначальное предложение, создать паутину из связанных друг с другом документов пришло от
физика центра CERN Тима Бернерс-Ли (Tim Berners-Lee) в марте 1989 года. Первый (текстовый)
прототип заработал спустя 18 месяцев. В декабре 1991 году на конференции Hypertext'91 в
Сан-Антонио в штате Техас была произведена публичная демонстрация.
Эта демонстрация, сопровождаемая широкой рекламой, привлекла внимание других ученых.
Марк Андрессен (Marc Andreessen) в университете Иллинойса начал разработку первого
графического браузера, Mosaic. Программа увидела свет в феврале 1993 года и стала настолько
популярной, что год спустя ее автор Марк Андрессен решил сформировать собственную компанию
Netscape Communications Corp., чьей целью была разработка клиентов, серверов и другого
программного обеспечения для веб-приложений. Когда в 1995 году корпорация Netscape получила
известность, инвесторы, полагая, очевидно, что появилась еще одна корпорация типа Microsoft,
заплатили за пакет ее акций 1,5 млрд долларов. Это было тем более удивительно, что номенклатура
продукции компании состояла всего из одного наименования, компания имела устойчивый пассивный
баланс, а в своих проспектах корпорация Netscape объявила, что в обозримом будущем не
рассчитывает на получение прибыли. В течение последующих трех лет между Netscape Navigator и
Internet Explorer от Microsoft развернулась настоящая «война браузеров». Разработчики с той и с
другой стороны в безумном порыве пытались напичкать свои программы как можно большим числом
функций (а следовательно, и ошибок) и в этом превзойти соперника. В 1998 году America Online
купила корпорацию Netscape Communications за 4,2 млрд долларов, положив таким образом конец
весьма непродолжительному независимому существованию компании.
В 1994 году CERN и Массачусетский технологический институт (M.I.T., Massachusetts Institute of
Technologies) подписали соглашение об основании WWW-консорциума (World Wide Web Consortium,
иногда применяется сокращение W3C) - организации, цель которой заключалась в дальнейшем
развитии приложения Web, стандартизации протоколов и поощрении взаимодействия между
отдельными сайтами. Бернерс-Ли стал директором консорциума. Хотя о Всемирной паутине уже
написано очень много книг, лучшее место, где вы можете получить самую свежую информацию о ней,
это сама Всемирная паутина. Домашнюю страницу консорциума можно найти по адресу
http://www.w3.org. На этой странице заинтересованный читатель найдет ссылки на другие страницы,
содержащие информацию обо всех документах консорциума и о его деятельности.
15.1 Архитектура WWW
С точки зрения пользователя Всемирная паутина состоит из огромного собрания документов,
расположенных по всему миру. Документы обычно называют для краткости просто страницами.
Каждая страница может содержать ссылки (указатели) на другие связанные с ней страницы в любой
точке мира. Пользователи могут следовать по ссылке (например, просто щелкнув на ней мышью),
при этом страница, на которую указывает ссылка, загружается и появляется в окне браузера. Этот
процесс можно повторять бесконечно. Идея страниц, связанных между собой гиперссылками
(гипертекст), была впервые пророчески предложена в 1945 году, задолго до появления Интернета,
Ванневаром Бушем (Vannevar Bush), профессором из Массачусетского университета, занимавшимся
электротехникой.
Страницы просматриваются специальной программой, называемой браузером. Самыми
популярными браузерами являются программы Internet Explorer и Netscape. Браузер предоставляет
пользователю запрашиваемую страницу, интерпретирует ее текст и содержащиеся в нем команды
форматирования для вывода страницы на экран. Большинство веб-страниц начинается с заголовка,
содержит некоторую информацию и заканчивается адресом электронной почты организации,
отвечающей за состояние этой страницы. Строки текста, представляющие собой ссылки на другие
страницы, называются гиперссылками. Они обычно выделяются либо подчеркиванием, либо другим
цветом, либо и тем и другим. Чтобы перейти по ссылке, пользователь перемещает указатель мыши в
выделенную область, при этом меняется форма указателя, и щелкает на ней. Хотя существуют и
текстовые браузеры, как, например, Lynx, они не так популярны, как графические, поэтому мы
сконцентрируем наше внимание на последних. Следует заметить, что также разрабатываются
браузеры, управляемые голосом.
Основной принцип работы Паутины показан на рисунке 15.1. Браузер отображает веб-страницу
на клиентской машине. Когда пользователь щелкает на строке, которая является ссылкой на
страницу, расположенную на сервере abcd.com, браузер следует по этой гиперссылке. Реально при
этом на abcd.com отправляется служебное сообщение с запросом страницы. Получив страницу,
браузер показывает ее. Если на этой странице содержится гиперссылка на страницу с сервера
xyz.com, то браузер обращается с запросом к xyz.com, и так далее до бесконечности.
15.1.1 Сторона клиента
Давайте теперь более детально рассмотрим сторону клиента, основываясь на рисунке 4.3. По
сути дела, браузер - это программа, которая может отображать вебстраницы и распознавать щелчки
мыши на элементах активной страницы.
Рисунок 15.1 - Части Всемирной паутины
При выборе элемента браузер следует по гиперссылке и получает с сервера запрашиваемую
страницу. Следовательно, гиперссылка внутри документа должна быть устроена так, чтобы она могла
указывать на любую страницу Всемирной паутины. Страницы именуются с помощью URL (Uniform
Resource Locator - унифицированный указатель информационного ресурса). Типичный указатель
выглядит так: http://www.abcd.com/products.html.
Более подробно про унифицированные указатели URL будет рассказано далее в этой главе.
Пока что достаточно знать, что URL состоит из трех частей: имени протокола (http), DNS-имени
машины, на которой расположена страница (www. abcd.com), и (обычно) имени файла, содержащего
эту страницу (products.html). Между щелчком пользователя и отображением страницы происходят
следующие события.
Когда пользователь щелкает мышью на гиперссылке, браузером выполняется ряд действий,
приводящих к загрузке страницы, на которую указывает ссылка. Предположим, пользователь,
блуждая по Интернету, находит ссылку на документ, рассказывающий про интернет-телефонию, а
конкретно - на домашнюю страницу ITU, расположенную по адресу http://www.itu.org/home/index.html.
Рассмотрим каждое действие, происходящее после выбора этой ссылки.
1. Браузер определяет URL (по выбранному элементу страницы).
2. Браузер запрашивает у службы DNS IP-адрес www.itu.org.
3. DNS дает ответ 156.106.192.32.
4. Браузер устанавливает TCP-соединение с 80-м портом машины 156.106.192.32.
5. Браузер отправляет запрос на получение файла /home/index..html.
6. Сервер www.itu.org высылает файл /home/index.html.
7. TCP-соединение разрывается.
8. Браузер отображает весь текст файла /home/index.html.
9. Браузер получает и выводит все изображения, прикрепленные к данному файлу'.
10. Многие браузеры отображают текущее выполняемое ими действие в строке состояния
внизу экрана. Это позволяет пользователю понять причину низкой производительности: например, не
отвечает служба DNS или сервер или просто сильно перегружена сеть при передаче страницы.
11. Для отображения каждой новой страницы браузер должен понять ее формат. Чтобы все
браузеры могли отображать любые страницы, они пишутся на стандартизованном языке HTML,
описывающем веб-страницы. Более детально мы рассмотрим его далее.
Несмотря на то, что браузер, по сути дела, представляет собой интерпретатор HTML,
большинство браузеров оснащаются многочисленными кнопками и функциями, облегчающими
навигацию по Всемирной паутине. У многих браузеров есть кнопки для возврата на предыдущую
страницу и перехода на следующую страницу (последняя доступна только в том случае, если
пользователь уже возвращался назад), а также кнопка для прямого перехода на домашнюю страницу
пользователя. Большинство браузеров поддерживают в меню команды для установки закладки на
текущей странице и отображения списка закладок, что позволяет попадать на любую страницу при
помощи всего одного щелчка мышью. Страницы также могут быть сохранены на диске или
распечатаны на принтере. Кроме того, доступны многочисленные функции управления отображением
страницы и установки различных настроек пользователя.
Помимо обычного текста (не подчеркнутого) и гипертекста (подчеркнутого), веб-страницы могут
также содержать значки, рисунки, чертежи и фотографии. Все они могут быть связаны ссылкой с
другой страницей. Щелчок на элементе, содержащем ссылку, также вызовет смену текущей
страницы, отображаемой браузером. С большими изображениями, такими, как фотографии или
карты, может быть ассоциировано несколько ссылок, при этом следующая отображаемая страница
будет зависеть от того, на каком месте изображения произведен щелчок мышью.
Далеко не все страницы написаны исключительно с применением HTML. Например, страница
может состоять из документа в формате PDF, значка в формате GIF, фотографии в JPEG,
звукозаписи в формате МРЗ, видео в MPEG или чего-то еще в одном из сотни форматов. Поскольку
стандартные HTML-страницы могут иметь ссылки на любые файлы, у браузера возникает проблема
обработки страницы, которую он не может интерпретировать.
Вместо того чтобы наращивать возможности и размеры браузеров, встраивая в них
интерпретаторы для различных типов файлов (количество которых быстро растет), обычно
применяется более общее решение. Когда сервер возвращает в ответ на запрос какую-либо
страницу, вместе с ней высылается некоторая дополнительная информация о ней. Эта информация
включает MIME-тип страницы (таблица 4.5). Страницы типа text/html выводятся браузером напрямую,
как и страницы некоторых других встроенных типов. Если же для данного MIME-типа внутренняя
интерпретация невозможна, браузер определяет, как выводить страницу, по своей таблице
MIME-типов. В данной таблице в соответствие каждому типу ставится программа просмотра.
Существуют два способа отображения: с помощью подключаемого модуля (plug-in) или
вспомогательных приложений. Подключаемый модуль представляет собой особый код, который
браузер извлекает из специального каталога на жестком диске и устанавливает в качестве своего
расширения, как показано на рисунке 15.2, а. Поскольку подключаемые модули работают внутри
браузера, у них есть доступ к текущей странице, вид которой они могут изменять. После завершения
своей работы, обычно это связано с переходом пользователя на другую страницу, подключаемый
модуль удаляется из памяти браузера.
Рисунок 15.2 - Браузер с подключаемым модулем (а); вспомогательное приложение (б)
Каждый браузер имеет набор процедур, которые должны реализовывать все подключаемые
модули. Это нужно для того, чтобы браузер мог обращаться к последним. Например, существует
стандартная процедура, с помощью которой базовый код браузера передает подключаемому модулю
данные для отображения. Набор этих процедур образует интерфейс подключаемого модуля и
является специфичным для каждого конкретного браузера.
Кроме того, браузер предоставляет подключаемому модулю определенный набор своих
процедур. Среди них в интерфейс браузера обычно включаются процедуры распределения и
освобождения памяти, вывода сообщений в строке статуса браузера и опроса параметров браузера.
Перед использованием подключаемого модуля его нужно установить. Этот процесс
подразумевает, что пользователь копирует с веб-сайта производителя модуля файл установки. В
Windows он обычно представляет собой самораспаковывающийся архив ZIP с расширением .ехе.
Если дважды щелкнуть на таком файле, запускается небольшая программа, включенная в начало
архива. Она распаковывает подключаемый модуль и копирует его в соответствующий каталог,
известный браузеру. Затем она регистрирует MIME-тип, обрабатываемый модулем, и ассоциирует
этот тип с модулем. В системах UNIX установочный файл зачастую представляет собой основной
сценарий, осуществляющий копирование и регистрацию.
Вторым
способом
расширения
возможностей
браузера
является
использование
вспомогательных приложений. Вспомогательное приложение - это полноценная программа,
работающая как отдельный процесс. Это показано на рисунке 15.2, б. Поскольку она никак не
связана с браузером, между ними отсутствует какой бы то ни было интерфейс. Вместо этого обычно
вспомогательное приложение вызывается с параметром, представляющим собой имя временного
файла, содержащего данные для отображения. Получается, что браузер можно настроить на
обработку практически любого типа файлов, не внося в него никаких изменений. Современные
веб-серверы часто содержат сотни комбинаций типов и подтипов файлов. Новые типы файлов
появляются всякий раз при установке новых программ.
Вспомогательные приложения не обязательно связаны только с MIME-типом application
(приложение). Например, Adobe Photoshop будет работать с image/x-photoshop, a RealOne Player
может поддерживать audio/mp3.
В Windows каждая устанавливаемая на компьютер программа регистрирует типы, которые она
хочет поддерживать. Такой механизм приводит к конфликту, когда несколько программ могут
обрабатывать один и тот же подтип, например video/mpg. Конфликт разрешается следующим
образом: программа, которая регистрируется последней, затирает своей записью существующую
ассоциацию (тип MIME, вспомогательное приложение) для тех типов, которые она готова
обрабатывать самостоятельно. Следствием этого является то, что каждая устанавливаемая
программа может изменить метод отображения браузером некоторых типов.
В UNIX этот процесс обычно не является автоматическим. Пользователь должен вручную
обновлять конфигурационные файлы. Такой подход приводит к уменьшению числа неожиданных
сюрпризов, но при этом у пользователя появляются дополнительных заботы.
Браузеры могут работать и с локальными файлами, не запрашивая информацию с удаленных
серверов. Поскольку локальные файлы не сообщают свои MIME-типы, браузеру нужно каким-то
хитрым образом определить, какой подключаемый модуль или вспомогательное приложение
использовать для типов, отличных от встроенных (таких, как text/html или image/jpeg). Для поддержки
локальных файлов вспомогательные модули и приложения должны быть ассоциированы как с
расширениями файлов, так и с типами MIME. При стандартных настройках попытка открыть файл
foo.pdf приведет к его открытию в Acrobat, а файл bar.doc будет открыт в Word. Некоторые браузеры
для определения типа MIME используют не только данные о типе MIME, но и расширение файла и
даже данные, взятые из самого файла. В частности, Internet Explorer по возможности старается
ориентироваться на расширение файла, а не на тип MIME.
Здесь также возможны конфликты, поскольку многие программы страстно желают
поддерживать, например, .mpg. Профессиональные программы при установке обычно выводят
флажки, позволяющие выбрать поддерживаемые типы MIME и расширения. Таким образом,
пользователь может выбрать то, что ему требуется, и, таким образом, избежать случайного
затирания существующих ассоциаций. Программы, нацеленные на массового потребителя, полагают,
что большинство пользователей понятия не имеют о типах MIME и просто захватывают все что могут,
совершенно не обращая внимания на ранее установленные программы.
Расширение возможностей браузера по поддержке новых типов файлов - это удобно, но может
также привести к возникновению некоторых проблем. Когда Internet Explorer получает файл с
расширением ехе, он думает, что это исполняемая программа и никаких вспомогательных средств
для нее не требуется. Очевидно, следует просто запустить программу. Однако такой подход может
оказаться серьезной дырой в системе защиты информации. Злоумышленнику требуется лишь
создать нехитрый сайт с фотографиями, скажем, знаменитых киноактеров или спортсменов и
поставить ссылки на вирусы. Один-единственный щелчок мышкой на фотографии может в этом
случае привести к запуску непредсказуемой и, возможно, опасной программы, которая будет
действовать на машине пользователя. Для предотвращения подобных нежелательных ситуаций
Internet Explorer можно настроить на избирательный запуск неизвестных программ, однако не все
пользователи в состоянии справиться с настройкой браузера.
В UNIX похожая проблема может возникнуть с основными сценариями, однако при этом
требуется, чтобы пользователь сознательно стал устанавливать вспомогательную программу. К
счастью, это процесс довольно сложный, и «случайно» установить что-либо практически невозможно
(немногие могут сделать это и преднамеренно).
15.1.2 Сторона сервера
О стороне клиента сказано уже достаточно много. Поговорим теперь о стороне сервера. Как мы
уже знаем, когда пользователь вводит URL или щелкает на гиперссылке, браузер производит
структурный анализ URL и интерпретирует часть, заключенную между http:// и следующей косой
чертой, как имя DNS, которое следует искать. Вооружившись IP-адресом сервера, браузер
устанавливает TCP-соединение с портом 80 этого сервера. После этого отсылается команда,
содержащая оставшуюся часть URL, в которой указывается имя файла на сервере. Сервер
возвращает браузеру запрашиваемый файл для отображения.
В первом приближении веб-сервер напоминает сервер, представленный в листинге 3.2. Этому
серверу, как и настоящему веб-серверу, передается имя файла, который следует найти и отправить.
В обоих случаях в основном цикле сервер выполняет следующие действия:
1. Принимает входящее TCP-соединение от клиента (браузера).
2. Получает имя запрашиваемого файла.
3. Получает файл (с диска).
4. Возвращает файл клиенту.
5. Разрывает TCP-соединение.
Современные веб-серверы обладают более широкими возможностями, однако существенными
в их работе являются именно перечисленные шаги.
Проблема данного подхода заключается в том, что каждый запрос требует обращения к диску
для получения файла. В результате число обращений к веб-серверу за секунду ограничено
максимальной скоростью обращений к диску. Среднее время доступа к высокоскоростному диску
типа SCSI составляет около 5 мс, то есть сервер может обрабатывать не более 200 обращений в
секунду. Это число даже меньше, если часто запрашиваются большие файлы. Для крупных
веб-сайтов это слишком мало.
Очевидным способом решения проблемы является кэширование в памяти последних
запрошенных файлов. Прежде чем обратиться за файлом к диску, сервер проверяет содержимое
кэша. Если файл обнаруживается в кэше, его можно сразу выдать клиенту, не обращаясь к диску.
Несмотря на то, что для эффективного кэширования требуются большие объемы памяти и некоторое
дополнительное время на проверку кэша и управление его содержимым, суммарный выигрыш во
времени почти всегда оправдывает эти накладные расходы и стоимость.
Следующим шагом, направленным на повышение производительности, является создание
многопоточных серверов. Одна из реализаций подразумевает, что сервер состоит из входного
модуля, принимающего все входящие запросы, и k обрабатывающих модулей, как показано на
рисунке 15.3. Все k + 1 потоков принадлежат одному и тому же процессу, поэтому у обрабатывающих
модулей есть доступ к кэшу в адресном пространстве процесса. Когда приходит запрос, входящий
модуль принимает его и создает краткую запись с его описанием. Затем запись передается одному из
обрабатывающих модулей. Другая возможная реализация подразумевает отсутствие входного
модуля; все обрабатывающие модули пытаются получить запросы, однако здесь требуется
блокирующий протокол, помогающий избежать конфликтов.
Рисунок 15.3 - Многопоточный веб-сервер с входным и обрабатывающими модулями
Обрабатывающий модуль вначале проверяет кэш на предмет нахождения там нужных файлов.
Если они там действительно есть, он обновляет запись, включая в нее указатель на файл. Если
искомого файла в кэше нет, обрабатывающий модуль обращается к диску и считывает файл в кэш
(при этом, возможно, затирая некоторые хранящиеся там файлы, чтобы освободить место).
Считанный с диска файл попадает в кэш и отсылается клиенту.
Преимущество такой схемы заключается в том, что пока один или несколько обрабатывающих
модулей заблокированы в ожидании окончания дисковой операции (при этом такие модули не
потребляют мощности центрального процессора), другие модули могут активно обрабатывать
захваченные ими запросы. Разумеется, реального повышения производительности за счет
многопоточной схемы можно достичь, только если установить несколько дисков, чтобы в каждый
момент времени можно было обращаться более чем к одному диску. Имея k обрабатывающих
модулей и k дисков, производительность можно повысить в k раз по сравнению с однопоточным
сервером и одним диском.
Теоретически, однопоточный сервер с k дисками тоже должен давать прирост
производительности в k раз, однако программирование и администрирование такой схемы
оказывается очень сложным, так как в этом случае невозможно использование обычных
блокирующих системных вызовов READ для чтения с диска. Многопоточные серверы такого
ограничения не имеют, поскольку READ будет блокировать только тот поток, который осуществил
системный вызов, а не весь процесс.
Современные веб-серверы выполняют гораздо больше функций, чем просто прием имен
файлов и отправка файлов. На самом деле, реальная обработка каждого запроса может оказаться
довольно сложной. По этой причине на многих серверах каждый обрабатывающий модуль выполняет
серии действий. Входной модуль передает каждый входящий запрос первому доступному модулю,
который обрабатывает его путем выполнения некоторого подмножества указанных далее шагов в
зависимости от того, что именно требуется для данного запроса:
- вычисление имени запрашиваемой веб-страницы;
- регистрация клиента;
- осуществление контроля доступа для клиента;
- осуществление контроля доступа для веб-страницы;
- проверка кэша;
- получение запрошенной страницы с диска;
- определение типа MIME для включения этой информации в ответ клиенту;
- аккуратное выполнение различных дополнительных задач;
- возвращение ответа клиенту;
- добавление записи в журнал активности сервера.
Шаг 1 необходим, потому что входящий запрос может и не содержать реального имени файла в
виде строкового литерала. Например, URL может быть вот таким: http://www.cs.vu.nl. Здесь имя
файла отсутствует. Этот URL необходимо дополнить неким именем файла по умолчанию. К тому же
современные браузеры могут указывать язык пользователя по умолчанию (например, итальянский
или английский), что позволяет серверу выбирать веб-страницу на соответствующем языке, если
таковая существует. Вообще говоря, расширение имени — задача не такая уж тривиальная, как
может показаться, поскольку существует множество соглашений об именовании файлов.
Шаг 2 состоит в проверке идентификационных данных клиента. Это нужно для отображения
страниц, недоступных для широкой публики. Мы обсудим один из способов такой проверки далее в
этой главе.
Шаг 3 проверяет наличие каких-либо ограничений, накладываемых на данного клиента и его
местоположение. На шаге 4 проверяются ограничения на доступ к запрашиваемой странице. Если
определенный файл (например, .htaccess) присутствует в том же каталоге, что и нужная страница, он
может ограничивать доступ к файлу. Например, можно установить доступ к странице только для
сотрудников компании.
Шаги 5 и 6 включают в себя получение страницы. Во время выполнения шага 6 должна быть
обеспечена возможность одновременного чтения с нескольких дисков.
Шаг 7 связан с определением типа MIME исходя из расширения файла, первых нескольких
байтов, конфигурационного файла или каких-то иных источников. Шаг 8 предназначен для различных
задач, таких, как построение профиля пользователя, сбор статистики и т. д.
На шаге 9, наконец отсылается результат, что фиксируется в журнале активности сервера на
шаге 10. Последний шаг требуется для нужд администрирования. Из подобных журналов можно
впоследствии узнать ценную информацию о поведении пользователей - например, о том, в каком
порядке люди посещают страницы на сайте.
Если приходит слишком много запросов в секунду, центральный процессор может перестать
справляться с их обработкой вне зависимости от того, сколько дисков параллельно работают на
сервере. Решается эта проблема установкой на сервере нескольких узлов (компьютеров). Их полезно
укомплектовывать реплицированными (содержащими одинаковую информацию) дисками во
избежание ситуации, когда узким местом становится дисковый накопитель. В результате возникает
многомашинная система, организованная в виде серверной фермы (рисунок 15.4). Входной модуль
по-прежнему принимает входящие запросы, однако распределяет их на сей раз не между потоками, а
между центральными процессорами, снижая тем самым нагрузку на каждый компьютер. Отдельные
машины сами по себе могут быть многопотоковыми с конвейеризацией, как и в рассматриваемом
ранее случае.
Одна из проблем, связанных с серверными фермами, заключается в отсутствии общего кэша каждый обрабатывающий узел обладает собственной памятью. Эта проблема может быть решена
установкой дорогостоящей мультипроцессорной системы с разделяемой памятью, однако существует
и более дешевый способ. Он заключается в том, что входной модуль запоминает, на какой узел он
посылал запросы конкретных страниц. Последующие запросы тех же страниц он сможет тогда
направлять на те же узлы. Таким образом, получается, что каждый узел специализируется по своему
набору страниц; и отпадает необходимость хранения одних и тех же файлов в кэшах разных
компьютеров.
Другая проблема, возникающая при использовании серверных ферм, состоит в том, что
TCP-соединение клиента заканчивается на входном модуле, то есть ответ в любом случае должен
пройти через входной модуль. Эта ситуация показана на рисунке 15.5, а. Здесь как входящий запрос
(1), так и исходящий ответ (2) проходят через входной модуль. Иногда для обхода этой проблемы
применяется хитрость под названием передача TCP. Суть ее в том, что TCP-соединение
продлевается до конечного (обрабатывающего) узла, и он может самостоятельно отправить ответ
напрямую клиенту (рисунок 15.5, б). Эта передача соединения для клиента незаметна.
Рисунок 15.4 - Серверная ферма
15.2 URL - унифицированные указатели информационных ресурсов
Мы несколько раз упоминали о том, что веб-страницы могут быть связаны между собой
ссылками. Пора познакомиться с тем, как эти ссылки реализованы. Уже при создании Паутины было
очевидно, что для реализации ссылок с одних страниц на другие необходим механизм именования и
указания расположения страниц. В частности, прежде чем выводить выбранную страницу на экран,
нужно узнать ответы на три следующих вопроса:
1. Как называется эта страница?
2. Где она расположена?
3. Как получить к ней доступ?
Если бы каждой странице можно было присвоить уникальное имя, то в идентификации страниц
не было бы никакой неоднозначности. Тем не менее проблему бы это не решило. Для примера
проведем параллель между страницами и людьми. В Соединенных Штатах почти у всех граждан есть
номер карточки социального страхования, представляющий собой уникальный идентификатор, так
как нет двух людей с одинаковым номером. Тем не менее, зная только номер карточки социального
страхования, нет способа узнать адрес владельца и, конечно, нельзя определить, следует ли писать
этому гражданину по-английски, по-испански или по-китайски. Во Всемирной паутине проблемы, в
принципе, те же самые.
В результате было принято решение идентифицировать страницы способом, решающим сразу
все три проблемы. Каждой странице назначается унифицированный указатель информационного
ресурса (URL, Uniform Resource Locator), который служит уникальным именем страницы. URL
состоят из трех частей: протокола (также называемого схемой), DNS-имени машины, на которой
расположена страница, и локального имени, единственным образом идентифицирующего страницу в
пределах этой машины (обычно это просто имя файла).
Рисунок 15.5 - Обычный запрос-ответный обмен (а); обмен запросами и ответами при передаче TCP (б)
Этот URL состоит из трех частей: протокола (http), DNS-имени хоста (www.cs.vu.nl) и имени
файла (video/index-en.html). Отдельные части URL-указателя разделяются специальными знаками
пунктуации. Имя файла представляет собой относительный путь по отношению к веб-катологу
cs.vu.vu.nl.
У сайтов могут быть сокращенные имена для ускоренного доступа к определенным файлам.
Скажем, при отсутствии в URL имени файла может выводиться главная (домашняя) страница сайта.
Если имя файла заканчивается именем каталога, то из него по умолчанию выбирается файл с
именем index.html. Наконец, имя — user/ может соответствовать WWW-каталогу пользователя,
причем может быть также задано имя файла по умолчанию, например index.html.
Теперь надо понять, как работает гипертекст. Чтобы на неком участке текста браузер мог
реагировать на щелчок мыши, при написании веб-страницы нужно обозначить два элемента:
отображаемый на экране текст ссылки и URL страницы, которая должна стать текущей при щелчке
мышью. Синтаксис такой команды будет пояснен далее в этой главе.
При выборе ссылки браузер с помощью службы DNS ищет имя хоста. Зная IP-адрес хоста,
браузер устанавливает с ним TCP-соединение. По этому соединению с помощью указанного
протокола браузер посылает имя файла, содержащего страницу. Вот, собственно, и все. Назад по
соединению передается страница.
Такая схема является открытой в том смысле, что она позволяет использовать разные
протоколы для доставки информационных единиц разного типа. Определены URL-указатели для
других распространенных протоколов, понимаемые многими браузерами. Слегка упрощенные
формы наиболее употребительных URL-указателей приведены в таблице 15.1.
Таблица 15.1
Некоторые распространенные URL-указатели
Имя
Применение
Пример
http
Гипертекст (HTML)
http://www.cs.vu.nl/~ast/
ftp
FTP
ftp://ftp.cs.vu.nl/pub/minix/README
file
Локальный файл
file:////usr/suzanne/prog.c
news
Телеконференция
news:comp.os.minix
news
Статья новостей
news:AA01 342231 [email protected]
gopher Gopher
Gopher://gopher.tc.umn.edu/11/Libraries
mailto Отправка электронной почты mailto:[email protected]
telnet
Удаленный терминал
telnet://www.w3. org:80
Кратко рассмотрим этот список. Протокол http является родным языком Всемирной паутины, на
нем разговаривают веб-серверы. HTTP - это сокращение, которое расшифровывается как HyperText
Transfer Protocol (протокол передачи гипертекста).
Протокол ftp используется для доступа к файлам по FTP - протоколу передачи файлов по
Интернету. За двадцать лет своего существования он достаточно хорошо укоренился в сети.
Многочисленные FTP-серверы по всему миру позволяют пользователям в любых концах Интернета
регистрироваться на сервере и скачивать разнообразные файлы, размещенные на сервере.
Всемирная паутина здесь не вносит особых изменений. Она просто упрощает доступ к FTP-серверам
и работу с файлами, ибо само по себе FTP имеет несколько загадочный интерфейс (однако более
мощный, чем HTTP: например, он позволяет пользователю машины А передать файл с машины В на
машину С).
К локальному файлу также можно обратиться как к веб-странице, либо используя протокол file,
либо просто указав имя файла. Такой подход напоминает FTP, но не требует наличия сервера.
Разумеется, он работает только с локальными файлами, а не с расположенными на удаленных
терминалах.
Задолго до появления Интернета появилась система групп новостей USENET. Она состоит
примерно из 30 000 конференций, в которых миллионы людей обсуждают широкий круг вопросов,
отправляя и читая сообщения, связанные с тематикой данной конференции. Протокол news
позволяет пользователю вызывать на экран статью с новостями, как если бы она была обычной
веб-страницей. Это означает, что веб-браузер легким движением руки превращается в элегантную
программу чтения новостей. На самом деле, благодаря кнопкам и пунктам меню многих браузеров
чтение новостей USENET становится даже удобнее, чем с помощью специальных программ чтения
сетевых новостей.
Для протокола news поддерживается два формата URL-указателей. Первый формат указывает
телеконференцию, и с его помощью можно получить список новых статей с указанного заранее сайта
новостей. Второй формат позволяет получить конкретную статью по ее идентификатору, например
АА0134223112©cs. utah.edu. Для получения этой статьи с заранее настроенного сайта браузер
использует протокол NNTP (Network News Transfer Protocol - сетевой протокол передачи новостей).
Мы изучим NNTP в этой книге, однако надо понимать, что это нечто вроде SMTP, они весьма похожи
даже по стилю.
Протокол gopher используется системой Gopher, разработанной в университете штата
Миннесота и получившей свое название от университетской спортивной команды «Golden Gophers»
(«Золотые суслики»). (Гоферами называют уроженцев штатов Миннесота, Арканзас и Флорида.
Кроме того, на американском сленге это слово означает «добывать», «копать», «искать».) Система
Gopher появилась в Интернете на несколько лет раньше Всемирной паутины. Концептуально они
похожи: и та, и другая представляют собой схему поиска и получения информации, хранящейся на
различных серверах, однако система Gopher поддерживала только тексты и не поддерживала
изображений. Сейчас ее можно считать полностью устаревшей, используется она крайне редко.
Последние два протокола не занимаются имитацией получения веб-страниц, но они также
полезны. Протокол mailto позволяет пользователю посылать электронную почту из веб-браузера.
Например, в некоторых браузерах для этого нужно щелкнуть на кнопке OPEN и ввести
URL-указатель, состоящий из слова mailto:, за которым следует почтовый адрес получателя. В ответ
в большинстве браузеров откроется специальная форма, содержащая поля для редактирования
темы письма и других заголовков, а также окно для ввода текста самого письма.
С помощью протокола telnet можно установить в подключенном режиме соединение с
удаленным компьютером. Он используется так же, как и программа Telnet, что неудивительно, так как
большинство браузеров просто вызывают саму программу Telnet как вспомогательное приложение.
Итак, URL-указатели позволяют пользователям не только путешествовать по Всемирной
паутине, но и работать с FTP-серверами, BBS, Gopher-серверами, электронной почтой и
регистрироваться на удаленных серверах с помощью программы Telnet. Все эти ресурсы
оказываются доступны при помощи всего одной программы - веб-браузера, что очень удобно. Если
бы отцом этой идеи не был ученый-физик, она стала бы, вероятно, самой убедительной рекламой
какой-нибудь компании, специализирующейся на выпуске программного обеспечения.
Несмотря на все перечисленные достоинства, все продолжающийся рост популярности
Всемирной паутины выявил один врожденный недостаток URL-схемы. URL указывает на
определенный хост. Часто запрашиваемые по сети страницы было бы лучше дублировать и хранить
копии в удаленных концах сети, чтобы снизить сетевой трафик. Беда в том, что URL-указатели не
предоставляют возможности для ссылки на страницу без указания ее точного адреса. Нельзя
сказать: «Мне нужна страница abc, и мне все равно, где вы ее раздобудете». Для решения задачи
репликации страниц проблемная группа проектирования Интернета IETF (Internet Engineering Task
Force) работает над системой URN (Uniform Resource Name - универсальное имя ресурса).
Универсальное имя ресурса URN можно считать обобщенным URL-указателем. В настоящее время
этот вопрос находится в стадии исследования, хотя уже предложен синтаксис, описанный в RFC
2141.
15.3 Статические веб-документы
Основная идея Всемирной паутины состоит в перемещении веб-страниц от сервера клиенту.
Простейшие веб-страницы являются статическими, то есть это просто файлы, размещенные на
каком-либо сервере и ожидающие востребования. В этом контексте даже видео может быть
статической страницей, поскольку это всего лишь файл. В этом разделе мы подробно рассмотрим
статические веб-страницы. В следующем разделе нам предстоит изучение динамического
наполнения страниц.
15.3.1 HTML - язык разметки веб-страниц
Веб-страницы на сегодняшний день пишутся на языке HTML (HyperText Markup Language). С
помощью HTML можно размещать на веб-страницах текст, графику, а также указатели на другие
страницы. Он является языком разметки, то есть языком, описывающим способ форматирования
документа. Термин «разметка» (markup) восходит к тем дням, когда технический редактор с помощью
специальной разметки указывал специалисту-типографу, какой шрифт использовать для печати
документа. Таким образом, языки разметки содержат подробные команды форматирования.
Например, в языке HTML команда означает начало участка текста, печатаемого полужирным
шрифтом, а означает конец такого участка. Преимущество языка разметки перед языком, не
имеющим явных команд форматирования, заключается в том, что браузеры для отображения
страниц, написанных на этом языке, программируются довольно просто: браузер должен понимать и
выполнять содержащиеся в тексте команды разметки. Среди других популярных примеров языков
разметки - языки ТеХ и troff.
С помощью встроенных стандартизированных команд разметки в HTML-файлах становится
возможным читать и переформатировать любую веб-страницу веб-браузером. Способность изменять
форматирование важно, так как должна быть возможность просматривать веб-страницу, созданную
на экране с установленным разрешением 1600x1200 точек при 24 битах на точку, на экране с
разрешением, например, 640x320 точек при 8 битах на точку.
Далее мы приведем краткий обзор языка HTML, просто чтобы дать о нем представление. Хотя,
в принципе, можно создавать HTML-документы с помощью стандартных текстовых редакторов, и
многие так и делают, также есть возможность использовать специальные HTML-редакторы, берущие
на себя большую часть работы (за счет снижения возможностей пользователя детально
контролировать получаемый результат).
Веб-страница состоит из заголовка и тела. Вся страница размещается между командами
форматирования, называемыми в языке HTML тегами, и . Впрочем, большинство
браузеров правильно отобразят страницу и в отсутствие этих тегов. Как видно из рисунка, а,
заголовок веб-страницы заключен в скобки тегов и , а тело располагается между
тегами и . Команды внутри тегов называют директивами. Большинство HTML-тегов
имеют такой формат, то есть помечает начало чего-либо, а - его конец.
Большинство браузеров предоставляют возможность просмотра исходного HTML-кода веб-страниц
(пункт меню View Source или нечто подобное).
Регистр символов в тегах не имеет значения. Например, и означают одно и то
же, однако новый стандарт требует использования исключительно строчных букв. Формат самого
HTML-текста, то есть расположение строк и т. д., не имеет значения. Программы обработки
HTML-текстов игнорируют лишние пробелы и переносы строк, так как они все равно форматируют
текст так, чтобы он помещался в заданной области отображения. Соответственно для того чтобы
исходные HTML-документы легче читались, в них можно добавлять произвольное количество знаков
табуляции, пробелов и символов переноса строк. И наоборот, для разделения абзацев в тексте в
исходный HTML-текст недостаточно вставить пустую строку, так как она просто игнорируется
браузером. В этом случае необходимо явное использование специального тега.
Некоторые теги могут иметь (именованные) параметры, называемые атрибутами. Например:
представляет собой тег ![]()
с атрибутом src, которому присвоено значение «abc», и
атрибутом alt, которому присвоено значение «foobar». Для каждого тега стандарт HTML
устанавливает список допустимых атрибутов и их значение. Поскольку все атрибуты являются
именованными, их порядок не имеет значения.
Формально при написании HTML-документов должен использоваться набор символов Latin-1
международного стандарта ISO 8859-1, но для пользователей, чьи клавиатуры поддерживают только
ASCII-символы, для ввода специальных символов, таких, как, например, «ё», могут использоваться
специальные управляющие последовательности символов. Эти последовательности должны
начинаться со знака амперсанда и заканчиваться точкой с запятой. Например, è означает
символ é, a é - символ è. Так как сами символы <, > и & оказываются зарезервированными,
для их отображения в тексте также применяются управляющие последовательности: < (less than знак «меньше»), > (greater than - знак «больше») и &: (ampersand - амперсанд).
Главным пунктом заголовка является название страницы, располагающееся между тегами
и . В него можно поместить также некоторую мета-информацию. Она не отображается на
странице, а используется некоторыми браузерами для того, чтобы помечать окно страницы.
Рассмотрим некоторые другие команды языка HTML, используемые в примере на рисунке 15.6,
и другие, приведенные в таблице 15.2. Заголовки в примере задаются тегами вида , где n цифра от 1 до 6. является самым важным заголовком, - наименее важным. Как это
отобразить на экране, зависит от браузера. Обычно заголовки с меньшими номерами отображаются
более крупными шрифтами. Браузер может также выделять различные заголовки различными
цветами. Обычно заголовки
- наименее важным. Как это
отобразить на экране, зависит от браузера. Обычно заголовки с меньшими номерами отображаются
более крупными шрифтами. Браузер может также выделять различные заголовки различными
цветами. Обычно заголовки выводятся на экран крупным полужирным шрифтом и выделяются,
по меньшей мере, одной пустой строкой над и под заголовком.
Теги и обозначают, соответственно, полужирный шрифт (boldface) и курсив (italics). Если
браузер не может отобразить полужирный шрифт или курсив, он должен применить какой-нибудь
другой способ выделения, например использовать другой цвет или инверсное отображение
символов.
Язык HTML предоставляет несколько механизмов создания списков, включая вложенные
списки. Тег (unordered list) начинает неупорядоченный список. Отдельные пункты, помеченные в
исходном тексте тегом - , изображаются с маркером абзаца (обычно крупной черной точкой, • )
перед собой. Тег
(ordered list) означает начало упорядоченного списка. При его использовании
абзацы, помеченные тегом - , автоматически нумеруются браузером. У списков, организованных
при помощи тегов
и <о!>, одинаковый синтаксис (за исключением открывающих и закрывающих
тегов списков) и похожее поведение.
(а)
(б)
Рисунок 15.6 - Пример веб-страницы на HTML (а); форматированная страница (б)
Таблица 4.8
Наиболее часто используемые HTML-теги.
У некоторых из них могут быть дополнительные параметры
Тег
Описание
...
Объявляет веб-страницу на языке HTML
...
Определяет границы заголовка страницы
...
Определяет границы неотображаемого названия страницы
...
Определяет границы тела страницы
...
Определяет границы заголовка уровня n
...
Маркирует блок текста, печатаемого полужирным шрифтом
...
Маркирует блок текста, печатаемого курсивом
... Помечает начало и конец центрированного по горизонтали текста
...
Помечает начало и конец неупорядоченного списка
...
Помечает начало и конец упорядоченного списка
Помечает границы меню
- ...
Маркирует начало и конец пункта меню
Разрыв (перевод строки)
Начало абзаца
Горизонтальная линейка
Загрузка изображения
... Определяет гиперссылку
Теги
, <р> и
применяются для обозначения границ между различными участками
текста. Точный формат может быть определен в таблице стилей (см. ниже), ассоциированной со
страницей. Тег
просто вставляет разрыв строки. Обычно браузеры не вставляют пустую строку
после тега
. Тег <р>, напротив, начинает новый абзац, перед которым может быть вставлена
пустая строка и, возможно, добавлен отступ. (Тег , отмечающий конец абзаца, существует, но на
практике почти не используется. Большинство составителей HTML-страниц даже не знают о его
существовании.) Наконец, тег
прерывает строку и рисует на экране горизонтальную линию.
Язык HTML позволяет включать в веб-страницу изображения. Тег ![]()
указывает, что в
данной позиции страницы должно быть загружено изображение. У этого тега может быть несколько
параметров. Параметр src задает URL изображения. Стандартом HTML не определяются
графические форматы. На практике все браузеры поддерживают файлы форматов GIF и JPEG.
Браузеры могут поддерживать любые другие форматы, но эта свобода оказывается палкой о двух
концах. Если пользователь привыкнет к браузеру, поддерживающему, скажем, формат файлов BMP,
он может включить их в свои веб-страницы, а затем обнаружить, что остальные браузеры просто
игнорируют всю его замечательную работу.
У тега ![]()
может быть еще несколько параметров. Параметр align управляет выравниванием
изображения относительно текста. Он может принимать значения top (верх), middle (центр), bottom
(низ). Параметр alt предоставляет текст, отображаемый вместо изображения, если пользователь
запретил вывод изображений. Параметр ismap является флагом, указывающим, является ли данное
изображение активной картой.
И наконец, мы подошли к гиперссылкам, использующим пару тегов <а> (anchor - якорь) и .
У этого тега также могут быть различные параметры, из которых следует отметить href (гиперссылка,
URL) и name (имя гиперссылки). Текст, располагающийся между тегами <а> и , отображается на
экране. Если этот текст выбирается, браузер открывает страницу, на которую указывает гиперссылка.
Между тегами <а> и можно также размещать изображение (тег ![]()
). В этом случае, если
пользователь щелкнет на изображении, будет произведен переход по ссылке.
Для примера рассмотрим следующий фрагмент HTML-текста:
<а href=http://www.nasa.gov> Домашняя страница NASA
При отображении страницы с этим фрагментом на экране появляется следующая строка:
Домашняя страница NASA
Если затем пользователь щелкнет мышью на этом тексте, браузер обратится по сети к
указанному URL (http://www.nasa.gov) и попытается получить там веб-страницу и отобразить ее на
экране.
В качестве второго примера рассмотрим следующую строку:
<а href=http://www.nasa.gov> 
При отображении этой страницы должно быть видно изображение (челночный воздушнокосмический аппарат). Щелчок мышью на этом изображении будет иметь тот же результат, что и
щелчок на подчеркнутом тексте в предыдущем примере. Если пользователь запретит автоматическое
отображение изображений, вместо него будет показан текст «NASA».
Тег <а> может содержать параметр name, что позволяет создать гиперссылку посреди текста,
на которую можно ссылаться из другого места этой же страницы. Например, некоторые веб-страницы
начинаются с оглавления, состоящего из «локальных» гиперссылок. Щелчок мышью на пункте
оглавления позволяет быстро переместиться в нужное место страницы.
HTML продолжает развиваться. В первых двух версиях не существовало таблиц, они были
добавлены только в HTML 3.0. HTML-таблица состоит из нескольких строк, каждая из которых
состоит из нескольких ячеек. Ячейка может содержать широкий спектр данных, включая текст,
изображения и даже другие таблицы. Ячейки могут объединяться вместе, например заголовок
таблицы может охватывать несколько столбцов. Контроль составителей страниц над внешним видом
таблиц ограничен. Последнее слово в таких вопросах, как выравнивание, стили рамок и границы
ячеек, остается за браузерами.
Реализация таблицы на языке HTML показана в листинге 4.4, а ее возможное отображение
браузером - таблица 15.3. Этот пример демонстрирует несколько основных возможностей
HTML-таблиц. Таблицы начинаются с тега . Для описания основных свойств таблицы может
быть предоставлена дополнительная информация.
Листинг 4.4 HTML-таблица
Пример страницы с таблицей
Некоторые различия html версий
Аспект HTML 1.0 HTML 2.0 HTML 3.0 HTML 4.0
Гиперссылки x x x
Изображения x x x
Списки x x x
Активные карты и изображения : x x x
Формы : x x
Математические выражения : : x x
Панели инструментов : : x x
Таблицы : : x x
Доступность : : : x
Внедренные объекты : : : x
Скрипты : : : x
С помощью тега можно задать надпись над таблицей. Каждая строка таблицы
начинается с тега (table row - строка таблицы). Отдельные ячейки помечаются тегом (table
header - заголовок таблицы) или (table data - данные таблицы). Эти два тега позволяют
создавать, соответственно, строки заголовков таблицы и обычные строки, что и показано в примере.
В таблицах также могут использоваться другие теги. С их помощью можно устанавливать
параметры выравнивания содержимого ячеек по вертикали и горизонтали, задавать параметры
границ ячеек, объединять ячейки в группы и многое другое.
HTML 4,0 отличается от предыдущих версий некоторыми новыми свойствами. Они включают в
себя специальные методы доступа для людей с ограниченными возможностями, внедрение объектов
(обобщение тега ![]()
, позволившее включать в состав страниц не только изображения, но и другие
объекты), поддержку языков написания сценариев (скриптов), что дало толчок к развитию
динамических страниц, и т. д.
Если веб-сайт достаточно велик по размерам и сложен настолько, что над ним работает целая
группа программистов, желательно обеспечить более или менее схожий дизайн всех страниц. Эта
проблема решается при помощи таблиц стилей. При их использовании отдельные страницы
оформляются не реальными (физическими) стилями (например, курсивом или полужирным
шрифтом), а логическими.
Таблица 15.3
Некоторые различия версий HTML
Аспект
HTML 1.0 HTML 2.0 HTML 3.0 HTML 4.0
Гиперссылки
X
X
X
X
Изображения
X
X
X
X
Списки
X
X
X
X
Активные карты и изображения
X
X
X
Формы
X
X
X
Математические выражения
X
X
Панели инструментов
X
X
Таблицы
X
X
Доступность
X
Внедренные объекты
X
Скрипты
X
Среди них могут быть, например, (Определение), <ет> (Слабое выделение),
(Сильное выделение), (Программная переменная). Логические стили определяются в таблицах
стилей, ссылка на которые ставится в начале кода каждой страницы. Таким образом, можно придать
всем страницам единый вид. Если веб-мастер решит изменить стиль и отображать его
полужирным шрифтом величиной 18 пунктов радикального розового цвета вместо курсива величиной
14 пунктов синего цвета, ему необходимо будет лишь поменять одно определение в таблице стилей,
чтобы изменения распространились на весь сайт. Таблицы стилей можно сравнить с файлами в
языке С, включаемыми с помощью директивы #include, - там также изменение одного
макроопределения влечет за собой изменение во всех программных файлах, использующих данный
заголовочный файл.
15.3.2 Формы
Первая версия языка HTML фактически обеспечивала лишь одностороннюю связь.
Пользователи могли получать страницы от поставщиков информации, но отправлять информацию
обратно было довольно трудно. По мере того, как все больше коммерческих организаций начали
использовать Всемирную паутину, потребность в двустороннем трафике стала возрастать. Так,
многим компаниям потребовалась возможность принимать заказы на продукцию с помощью своих
веб-страниц. Производители программного обеспечения хотели продавать по сети свои программы,
для чего требовалась возможность заполнения регистрационных карточек. Компаниям,
предоставляющим поиск информации в Паутине, было нужно, чтобы пользователи могли ввести
ключевые слова поиска.
В результате в HTML 2.0 были включены формы. Формы могут содержать кнопки и поля для
ввода текста, позволяющие пользователям делать выбор или вводить необходимую информацию,
которую затем можно отсылать владельцу страницы. Для этой цели используется тег . У него
могут быть различные параметры, определяющие размер, назначение и другие свойства
отображаемого окна. Наиболее часто используемыми формами являются пустые поля для ввода
текста, флажки, переключатели, активные карты и кнопки подтверждения. В примере, приведенном в
листинге 4.5, показаны некоторые из перечисленных форм. Отображение этой HTML-страницы
браузером показано на рисунке 4.9.
Листинг 4.5 HTML-текст для бланка заказа
Бланк заказа клиента awi
Бланк заказа штуковины
Рисунок 15.7 - Форматированная страница
Начнем изучение форм с этого примера. Как и все формы, она заключена между тегами . Текст, не заключенный в теги, просто отображается. Внутри формы разрешено
использование всех обычных тегов (например, ). В данной форме используются три типа окон
для ввода данных.
Окно первого типа следует за текстом «Имя». Ширина этого окна 46 символов. Предполагается,
что пользователь введет здесь свое имя, которое будет храниться в виде текстовой строки в
переменной customer для последующей обработки. Тег <р> указывает браузеру, что последующий
текст следует отображать с новой строки, даже если в текущей строке еще достаточно места. С
помощью этого и других тегов автор страницы может управлять внешним видом бланка на экране.
В следующих окнах формы спрашивается адрес заказчика, то есть улица, город, штат и страна.
Между этими полями не вставляются теги <р>, поэтому браузер по возможности пытается отобразить
их все в одной строке. С точки зрения браузера, этот абзац представляет собой просто шесть
отдельных элементов - три строки, перемежающиеся тремя окнами. Он отображает их друг за
другом, слева направо, переходя на новую строку по мере необходимости. Таким образом, вполне
возможно, что на экране с разрешением 1600x1200 точек все три строки и соответствующие им окна
поместятся в одну строку, тогда как на экране с разрешением 1024x768 точек они будут разбиты на
две строки. В худшем случае слово «Страна» может оказаться в конце одной строки, а
соответствующее окно ввода - в начале следующей строки.
В следующей строке у пользователя запрашивается номер кредитной карты и срок ее
действия. Передавать номера кредитных карт по Интернету следует только в том случае, если
приняты все соответствующие меры предосторожности.
Следом за датой истечения срока действия кредитной карты мы обнаруживаем новые для нас
элементы управления - переключатели. Они используются, когда требуется выбрать только один
вариант из нескольких. Они напоминают кнопки на автомагнитолах, служащие для быстрого доступа
к заданным радиостанциям. Браузер отображает эти элементы управления таким образом, что
пользователь может включать их щелчком мыши на них (или с помощью клавиатуры).
Переключатели этого типа всегда объединяются в группы. При этом включение одного
переключателя автоматически выключает все остальные переключатели этой группы. Внешний вид
переключателя зависит от используемого графического интерфейса. В пункте бланка «Размер
штуковины» также используются два переключателя, Группы переключателей определяются по
значению параметра name (имя) тега . Специальных скобок из тегов вроде ..
для определения групп переключателей не предусмотрено.
Параметр value указывает, какая кнопка была нажата пользователем. В зависимости от того,
какую кредитную карту выберет пользователь для своих расчетов, переменной ее будет присвоено
значение текстовой строки «mastercard» или «visacard».
Следом за двумя наборами переключателей в бланке используется элемент управления типа
checkbox (флажок). Он похож на переключатель предыдущего типа, так как тоже может находиться в
одном из двух состояний (установлен/ сброшен), но не объединяется в группы и включается и
выключается щелчком мыши на нем независимо от других элементов управления того же типа.
Например, заказывая пиццу на веб-странице компании Electropizza, пользователь может выбрать и
сардины, и лук, и ананас (если у него крепкий желудок), но ему не удастся одновременно выбрать
маленькую, среднюю и большую пиццу. Выбор приправы к пицце будет представлен в виде трех
отдельных элементов управления типа checkbox, тогда как выбор размера пиццы будет реализован с
помощью набора переключателей.
Если список, из которого предстоит сделать выбор пользователю, очень длинный, то
использование переключателей несколько неудобно. В этом случае можно использовать теги
В XHTML это запрещено. Закрывающие теги должны быть написаны строго в обратном порядке
по отношению к открывающим тегам.
В-шестых, в каждом документе должен быть указан его тип. Мы имели возможность в этом
убедиться на примере листинга 4.7. Все серьезные и мелкие изменения, которые происходят в
стандартах, обсуждаются на сайте www.w3.org.
15.4 Динамические веб-документы
Все идеи, рассматривавшиеся до сих пор, соответствуют модели, показанной в листингах 3.2 и
3.3: клиент сообщает серверу имя файла, а тот в ответ возвращает файл. В первые годы
существования Всемирной паутины все ее содержимое и в самом деле было статическим (просто
файлы). Однако в последние годы в Сети появляется все больше динамических объектов, то есть
таких, которые создаются по требованию, а не хранятся постоянно на диске. Автоматическое
создание объектов может происходить как на стороне сервера, так и на стороне клиента. Рассмотрим
оба случая по порядку.
15.4.1 Динамическая генерация содержимого веб-страниц на стороне сервера
Чтобы понять, зачем вообще нужна динамическая генерация веб-страниц на стороне сервера,
рассмотрим использование форм, описанных ранее. Когда пользователь заполняет поля формы и
нажимает кнопку Submit (Подтверждение), серверу отправляется сообщение, содержащее в себе
данные, предоставленные пользователем. Это сообщение не содержит имя запрашиваемого файла.
Требуется, чтобы оно было передано для обработки программе или скрипту. Обычно обработка
подразумевает использование пользовательских данных для поиска по базе данных на серверном
диске и создание HTML-страницы, содержимое которой зависит от результатов этого поиска. Затем
страница отсылается клиенту. Например, в приложении для электронной коммерции нажатие кнопки
ПЕРЕЙТИ К РАСЧЕТАМ приводит к тому, что браузер возвращает на сервер cookie-файл с
содержимым корзины клиента. На сервере при этом должны запуститься определенные программы
или скрипты, в задачу которых входят обработка cookie и генерация HTML-страницы. Отправляемая
клиенту HTML-страница может содержать форму со списком товаров, положенных в корзину, и адрес
доставки вместе с запросом подтверждения заказа и предложением выбрать одну из возможных
форм оплаты. Этапы обработки информации, полученной из HTML-формы, показаны на рисунке
15.8.
Традиционный способ работы с формами и другими видами интерактивных веб-страниц связан
с использованием системы CGI (Common Gateway Interface - общий шлюзовой интерфейс). Это
стандартизованный интерфейс, позволяющий веб-серверам общаться с прикладными программами
и скриптами, разрешающими вводить данные (например, в формы) и в ответ генерировать
HTML-страницы. Обычно такие прикладные программы представляют собой скрипты, написанные на
языке описания сценариев Perl, поскольку писать их проще и быстрее, чем программы (по крайней
мере, если вы умеете программировать на Perl). Существует договоренность, в соответствии с
которой эти скрипты должны размещаться в каталоге CGI-BIN, который доступен при помощи URL.
Иногда вместо Perl используется другой язык написания скриптов, Python.
Рисунок 15.8 - Этапы обработки информации, полученной из формы
В качестве примера работы CGI рассмотрим случай, когда продукция компании «Великие
Штуковины» приходит без гарантийного талона. Вместо этого клиенту предлагается
зарегистрироваться в Интернете по адресу www.grwd.com. Там имеется ссылка:
«Щелкните здесь для регистрации приобретения»
Ссылка эта может указывать, например, на сценарий на языке Perl, расположенный по адресу
www.grwd.com/cgi-bin/reg.perl. При запуске этого сценария без параметров обратно отсылается
HTML-страница, содержащая регистрационную форму. Когда пользователь заполняет ее и нажимает
кнопку Submit, скрипту передается сообщение, содержащее указанные им значения. Вид этого
сообщения традиционен при работе с формами. Что происходит дальше, предугадать нетрудно.
Perl-скрипт анализирует параметры, создает в базе данных запись о новом клиенте, отсылает назад
HTML с регистрационным номером и телефоном службы поддержки. Понятно, что это не
единственный способ обработки форм, однако он является наиболее распространенным.
Динамическое создание веб-страниц на стороне сервера может быть реализовано не только с
помощью CGI-скриптов. Существует еще один распространенный способ, который заключается во
внедрении небольших скриптов в HTML-страницы. Они выполняются на сервере, в их задачу входит
генерирование страницы. Популярным инструментом для написания таких скриптов является РНР
(Hypertext Preprocessor - гипертекстовый препроцессор). При его использовании требуется, чтобы
сервер понимал РНР (точно так же, как браузер должен понимать XML, чтобы интерпретировать
страницы, написанные на одноименном языке). Обычно серверы предполагают, что у файлов
страниц, написанных на РНР, расширение php, а не htm или html.
В листинге 4.8 приведен пример маленького скрипта на РНР; он должен работать на любом
сервере, если на нем установлен гипертекстовый препроцессор. Он состоит из привычного
обрамления на HTML, а сам скрипт содержится внутри тега . Вся его работа заключается
в создании страницы, сообщающей всю известную информацию о запустившем его браузере.
Браузеры обычно отправляют кое-какие данные о себе вместе с запросами (и любыми прикладными
cookie-файлами). Эти данные сохраняются в переменной HTTP_USER_AGENT. Если этот листинг
сохранить в файле test.php в веб-каталоге компании «ABCD», то пользователь, набрав URL
www.abcd.com/test.php, сможет получить страницу, из которой он узнает, какие браузер, язык и
операционную систему он использует.
Листинг 4.8 Пример страницы на HTML с внедренным РНР-скриптом
A я вот что про тебя знаю:
РНР особенно хорошо подходит для обработки форм - с его помощью она осуществляется
даже проще, чем путем написания CGI-скрипта. Пример обработки формы показан в листинге 4.9, а.
Здесь мы видим обычную HTML-страницу с формой. Непривычно выглядит только первая строка, в
которой указывается, что скрипт action.php должен быть запущен для обработки параметров после
заполнения пользователем формы и нажатия кнопки подтверждения. Форма в этом примере состоит
из двух текстовых полей ввода, в одном из которых запрашивается имя клиента, а в другом - его
возраст. По окончании работы пользователя с формой на сервер отсылается стандартная строка,
пример которой мы уже видели ранее. Эта строка обрабатывается, из нее извлекаются значения
переменных name и age. Затем начинает свою работу скрипт action.php, показанный в листинге 4.9,
б. Он генерирует ответ. Работа скрипта заключается в исполнении php-команд. Если пользователь
предоставил данные «Харриет» и «24», то ему будет прислан HTML-файл, код которого показан в
листинге 4.9, в. Как видите, обработка форм с помощью РНР производится элементарно.
Несмотря на простоту использования, РНР - это мощный язык программирования,
ориентированный на предоставление интерфейса между Всемирной паутиной и серверными базами
данных. В РНР есть переменные, строки, массивы и большинство управляющих структур, присущих
языку С, однако ввод-вывод гораздо мощнее, чем обычный printf. PHP имеет открытый исходный код
и распространяется бесплатно.
Листинг 4.9 Веб-страница с формой (а); PHP-скрипт для обработки формы (б); результат
работы PHP-скрипта при исходных данных «Харриет» и «24» соответственно (в)
(a)
Ответ:
Привет. !
Предсказываю: в следующем году тебе будет
(б)
Ответ:
Привет, Харриет!
Предсказываю: в следующем году тебе будет 25
(в)
PHP был разработан специально под сервер Apache, который также обладает открытым
исходным кодом и является самым распространенным веб-сервером в мире.
Итак, мы знаем уже два различных способа генерации динамических HTML-страниц: с
помощью CGI-скриптов и внедрения РНР. Есть еще третий метод, называемый JSP (JavaServer
Pages - страницы сервера Java). Он в целом схож с РНР и отличается только тем, что динамическая
часть программируется на языке Java. Файлы страниц, написанных с помощью JSP, имеют
одноименное расширение: .jsp. Еще один метод создания динамических страниц - ASP (Active Server
Pages - активные серверные страницы). Это ответ Microsoft на РНР и JSP. В качестве языка
динамического веб-программирования используется собственный язык написания скриптов,
созданный Microsoft, - Visual Basic Script. Соответственно, файлы страниц, написанных с
использованием этого метода, имеют расширение .asp. Вопрос выбора между РНР, JSP и ASP в
основном политический (открытый код Sun против кода Microsoft). С точки зрения технологий все эти
методы вполне сравнимы по возможностям.
Весь набор методов создания динамических страниц иногда называют динамическим HTML
(DHTML).
15.4.2 Создание динамических веб-страниц на стороне клиента
Скрипты CGI, PHP, JSP и ASP решают вопросы обработки форм и взаимодействия с базами
данных, расположенными на сервере. Они могут принимать входящую информацию из форм,
осуществлять поиск по одной или нескольким базам данных и в качестве результата генерировать
HTML-страницы. Но ни один из этих методов не позволяет напрямую взаимодействовать с
пользователем, например реагировать на движения мышкой. Для этих целей необходимы скрипты,
внедренные в HTML-страницы и выполняющиеся не на серверной, а на клиентской машине. Начиная
с HTML 4.0, появилась возможность включать скрипты такого типа с помощью тега
Важно понимать, что обрабатываются программы, показанные в листингах 4.9 и 4.10,
совершенно по-разному, несмотря на их внешнее сходство. Что происходит в первом случае (листинг
4.9)? После того как пользователь нажимает кнопку Submit, браузер собирает всю введенную
информацию в одну длинную строку и отправляет ее на тот сервер, с которого пришла страница.
Сервер видит имя PHP-файла и запускает его. PHP-скрипт создает новую HTML-страницу, которая
отсылается браузеру для отображения. Что касается второго случая (листинг 4.10), то после нажатия
кнопки Submit браузер сам выполняет действия функции JavaScript, содержащейся на странице. Вся
работа производится локально, внутри браузера. С сервером никакого взаимодействия не
осуществляется. Как следствие, результат появляется практически мгновенно, тогда как при
использовании РНР задержка прибытия страницы с результатом может составлять несколько секунд.
Разница между скриптами, работающими на стороне сервера и на стороне клиента, показана на
рисунке 15.9. Показаны шаги, выполняемые в каждом случае. В обоих случаях все эти этапы
производятся после вывода формы на экран. Шаг 1 состоит в приеме данных от пользователя. Затем
следует их обработка, и вот здесь имеются значительные различия.
Рисунок 15.9 - PHP-скрипт на стороне сервера (а); сценарий на JavaScript на стороне клиента (б)
Эти различия вовсе не означают, что JavaScript лучше, чем РНР. Просто у них различные
сферы применения. РНР (а с ним неявно и JSP, и ASP) применяется тогда, когда необходимо
взаимодействовать с удаленной базой данных. JavaScript используют тогда, когда требуется
взаимодействие с пользователем в пределах его компьютера. Разумеется, возможно (и довольно
часто осуществляется) одновременное использование РНР и JavaScript, хотя они и не могут,
например, обрабатывать одно и то же событие (типа нажатия кнопки) или производить одно и то же
действие.
JavaScript - это полноценный язык программирования, ничуть не слабее по возможностям, чем
С или Java. В нем есть понятия переменных, строк, массивов, объектов, функций и всех привычных
управляющих структур. К тому же он обладает множеством полезных свойств, специфичных для
веб-страниц, включая возможность управления окнами и фреймами, установки и получения cookie,
работы с формами и гиперссылками. Пример программы на JavaScript с рекурсивной функцией
приведен в листинге 4.11.
Листинг 4.11 Программа на JavaScript для подсчета и вывода факториалов
С помощью JavaScript можно также отслеживать появление мыши над определенными
объектами на странице. На многих веб-страницах с JavaScript можно заметить, что при наведении
курсора мыши на какой-нибудь текст или изображение что-нибудь происходит. Часто при этом
меняется изображение или вдруг выскакивает меню. Такое поведение легко программируется на
JavaScript и несколько оживляет веб-страницы. Пример приведен в листинге 4.12.
Листинг 4.12 Интерактивная страница, отвечающая на движения «мышью»
JavaScript - это не единственный инструмент для создания веб-страниц с высокой степенью
интерактивности. Еще один метод связан с использованием апплетов. Это небольшие программы на
Java, скомпилированные в машинные инструкции виртуального компьютера, называемого JVM (Java
Virtual Machine - виртуальная машина Java). Апплеты могут внедряться в HTML-страницы (между
тегами
- (unordered list) начинает неупорядоченный список. Отдельные пункты, помеченные в
исходном тексте тегом
- , изображаются с маркером абзаца (обычно крупной черной точкой, • )
перед собой. Тег
- (ordered list) означает начало упорядоченного списка. При его использовании
абзацы, помеченные тегом
- , автоматически нумеруются браузером. У списков, организованных
при помощи тегов
- и <о!>, одинаковый синтаксис (за исключением открывающих и закрывающих
тегов списков) и похожее поведение.
(а)
(б)
Рисунок 15.6 - Пример веб-страницы на HTML (а); форматированная страница (б)
Таблица 4.8
Наиболее часто используемые HTML-теги.
У некоторых из них могут быть дополнительные параметры
Тег
Описание
...
Объявляет веб-страницу на языке HTML
...
Определяет границы заголовка страницы
... Определяет границы неотображаемого названия страницы ... Определяет границы тела страницы... Определяет границы заголовка уровня n ... Маркирует блок текста, печатаемого полужирным шрифтом ... Маркирует блок текста, печатаемого курсивом... Помечает начало и конец центрированного по горизонтали текста- ...
- ...
- ... Маркирует начало и конец пункта меню
Разрыв (перевод строки)Начало абзаца
Горизонтальная линейка
, <р> и
применяются для обозначения границ между различными участками текста. Точный формат может быть определен в таблице стилей (см. ниже), ассоциированной со страницей. Тег
просто вставляет разрыв строки. Обычно браузеры не вставляют пустую строку после тега
. Тег <р>, напротив, начинает новый абзац, перед которым может быть вставлена пустая строка и, возможно, добавлен отступ. (Тег , отмечающий конец абзаца, существует, но на практике почти не используется. Большинство составителей HTML-страниц даже не знают о его существовании.) Наконец, тег
прерывает строку и рисует на экране горизонтальную линию. Язык HTML позволяет включать в веб-страницу изображения. Тегуказывает, что в данной позиции страницы должно быть загружено изображение. У этого тега может быть несколько параметров. Параметр src задает URL изображения. Стандартом HTML не определяются графические форматы. На практике все браузеры поддерживают файлы форматов GIF и JPEG. Браузеры могут поддерживать любые другие форматы, но эта свобода оказывается палкой о двух концах. Если пользователь привыкнет к браузеру, поддерживающему, скажем, формат файлов BMP, он может включить их в свои веб-страницы, а затем обнаружить, что остальные браузеры просто игнорируют всю его замечательную работу. У тега
может быть еще несколько параметров. Параметр align управляет выравниванием изображения относительно текста. Он может принимать значения top (верх), middle (центр), bottom (низ). Параметр alt предоставляет текст, отображаемый вместо изображения, если пользователь запретил вывод изображений. Параметр ismap является флагом, указывающим, является ли данное изображение активной картой. И наконец, мы подошли к гиперссылкам, использующим пару тегов <а> (anchor - якорь) и . У этого тега также могут быть различные параметры, из которых следует отметить href (гиперссылка, URL) и name (имя гиперссылки). Текст, располагающийся между тегами <а> и , отображается на экране. Если этот текст выбирается, браузер открывает страницу, на которую указывает гиперссылка. Между тегами <а> и можно также размещать изображение (тег
). В этом случае, если пользователь щелкнет на изображении, будет произведен переход по ссылке. Для примера рассмотрим следующий фрагмент HTML-текста: <а href=http://www.nasa.gov> Домашняя страница NASA При отображении страницы с этим фрагментом на экране появляется следующая строка: Домашняя страница NASA Если затем пользователь щелкнет мышью на этом тексте, браузер обратится по сети к указанному URL (http://www.nasa.gov) и попытается получить там веб-страницу и отобразить ее на экране. В качестве второго примера рассмотрим следующую строку: <а href=http://www.nasa.gov>
При отображении этой страницы должно быть видно изображение (челночный воздушнокосмический аппарат). Щелчок мышью на этом изображении будет иметь тот же результат, что и
щелчок на подчеркнутом тексте в предыдущем примере. Если пользователь запретит автоматическое
отображение изображений, вместо него будет показан текст «NASA».
Тег <а> может содержать параметр name, что позволяет создать гиперссылку посреди текста,
на которую можно ссылаться из другого места этой же страницы. Например, некоторые веб-страницы
начинаются с оглавления, состоящего из «локальных» гиперссылок. Щелчок мышью на пункте
оглавления позволяет быстро переместиться в нужное место страницы.
HTML продолжает развиваться. В первых двух версиях не существовало таблиц, они были
добавлены только в HTML 3.0. HTML-таблица состоит из нескольких строк, каждая из которых
состоит из нескольких ячеек. Ячейка может содержать широкий спектр данных, включая текст,
изображения и даже другие таблицы. Ячейки могут объединяться вместе, например заголовок
таблицы может охватывать несколько столбцов. Контроль составителей страниц над внешним видом
таблиц ограничен. Последнее слово в таких вопросах, как выравнивание, стили рамок и границы
ячеек, остается за браузерами.
Реализация таблицы на языке HTML показана в листинге 4.4, а ее возможное отображение
браузером - таблица 15.3. Этот пример демонстрирует несколько основных возможностей
HTML-таблиц. Таблицы начинаются с тега . Для описания основных свойств таблицы может быть предоставлена дополнительная информация. Листинг 4.4 HTML-таблица
Пример страницы с таблицей
С помощью тегаНекоторые различия html версий Аспект HTML 1.0 HTML 2.0 HTML 3.0 HTML 4.0 Гиперссылки x x x Изображения x x x Списки x x x Активные карты и изображения : x x x Формы : x x Математические выражения : : x x Панели инструментов : : x x Таблицы : : x x Доступность : : : x Внедренные объекты : : : x Скрипты : : : x можно задать надпись над таблицей. Каждая строка таблицы начинается с тега (table row - строка таблицы). Отдельные ячейки помечаются тегом (table header - заголовок таблицы) или (table data - данные таблицы). Эти два тега позволяют создавать, соответственно, строки заголовков таблицы и обычные строки, что и показано в примере. В таблицах также могут использоваться другие теги. С их помощью можно устанавливать параметры выравнивания содержимого ячеек по вертикали и горизонтали, задавать параметры границ ячеек, объединять ячейки в группы и многое другое. HTML 4,0 отличается от предыдущих версий некоторыми новыми свойствами. Они включают в себя специальные методы доступа для людей с ограниченными возможностями, внедрение объектов (обобщение тега , позволившее включать в состав страниц не только изображения, но и другие объекты), поддержку языков написания сценариев (скриптов), что дало толчок к развитию динамических страниц, и т. д. Если веб-сайт достаточно велик по размерам и сложен настолько, что над ним работает целая группа программистов, желательно обеспечить более или менее схожий дизайн всех страниц. Эта проблема решается при помощи таблиц стилей. При их использовании отдельные страницы оформляются не реальными (физическими) стилями (например, курсивом или полужирным шрифтом), а логическими. Таблица 15.3 Некоторые различия версий HTML Аспект HTML 1.0 HTML 2.0 HTML 3.0 HTML 4.0 Гиперссылки X X X X Изображения X X X X Списки X X X X Активные карты и изображения X X X Формы X X X Математические выражения X X Панели инструментов X X Таблицы X X Доступность X Внедренные объекты X Скрипты X Среди них могут быть, например,
(Определение), <ет> (Слабое выделение), (Сильное выделение), (Программная переменная). Логические стили определяются в таблицах стилей, ссылка на которые ставится в начале кода каждой страницы. Таким образом, можно придать всем страницам единый вид. Если веб-мастер решит изменить стиль и отображать его полужирным шрифтом величиной 18 пунктов радикального розового цвета вместо курсива величиной 14 пунктов синего цвета, ему необходимо будет лишь поменять одно определение в таблице стилей, чтобы изменения распространились на весь сайт. Таблицы стилей можно сравнить с файлами в языке С, включаемыми с помощью директивы #include, - там также изменение одного макроопределения влечет за собой изменение во всех программных файлах, использующих данный заголовочный файл. 15.3.2 Формы Первая версия языка HTML фактически обеспечивала лишь одностороннюю связь. Пользователи могли получать страницы от поставщиков информации, но отправлять информацию обратно было довольно трудно. По мере того, как все больше коммерческих организаций начали использовать Всемирную паутину, потребность в двустороннем трафике стала возрастать. Так, многим компаниям потребовалась возможность принимать заказы на продукцию с помощью своих веб-страниц. Производители программного обеспечения хотели продавать по сети свои программы, для чего требовалась возможность заполнения регистрационных карточек. Компаниям, предоставляющим поиск информации в Паутине, было нужно, чтобы пользователи могли ввести ключевые слова поиска. В результате в HTML 2.0 были включены формы. Формы могут содержать кнопки и поля для ввода текста, позволяющие пользователям делать выбор или вводить необходимую информацию, которую затем можно отсылать владельцу страницы. Для этой цели используется тег . У него могут быть различные параметры, определяющие размер, назначение и другие свойства отображаемого окна. Наиболее часто используемыми формами являются пустые поля для ввода текста, флажки, переключатели, активные карты и кнопки подтверждения. В примере, приведенном в листинге 4.5, показаны некоторые из перечисленных форм. Отображение этой HTML-страницы браузером показано на рисунке 4.9. Листинг 4.5 HTML-текст для бланка заказа Бланк заказа клиента awi Бланк заказа штуковины Рисунок 15.7 - Форматированная страница Начнем изучение форм с этого примера. Как и все формы, она заключена между тегами . Текст, не заключенный в теги, просто отображается. Внутри формы разрешено использование всех обычных тегов (например, ). В данной форме используются три типа окон для ввода данных. Окно первого типа следует за текстом «Имя». Ширина этого окна 46 символов. Предполагается, что пользователь введет здесь свое имя, которое будет храниться в виде текстовой строки в переменной customer для последующей обработки. Тег <р> указывает браузеру, что последующий текст следует отображать с новой строки, даже если в текущей строке еще достаточно места. С помощью этого и других тегов автор страницы может управлять внешним видом бланка на экране. В следующих окнах формы спрашивается адрес заказчика, то есть улица, город, штат и страна. Между этими полями не вставляются теги <р>, поэтому браузер по возможности пытается отобразить их все в одной строке. С точки зрения браузера, этот абзац представляет собой просто шесть отдельных элементов - три строки, перемежающиеся тремя окнами. Он отображает их друг за другом, слева направо, переходя на новую строку по мере необходимости. Таким образом, вполне возможно, что на экране с разрешением 1600x1200 точек все три строки и соответствующие им окна поместятся в одну строку, тогда как на экране с разрешением 1024x768 точек они будут разбиты на две строки. В худшем случае слово «Страна» может оказаться в конце одной строки, а соответствующее окно ввода - в начале следующей строки. В следующей строке у пользователя запрашивается номер кредитной карты и срок ее действия. Передавать номера кредитных карт по Интернету следует только в том случае, если приняты все соответствующие меры предосторожности. Следом за датой истечения срока действия кредитной карты мы обнаруживаем новые для нас элементы управления - переключатели. Они используются, когда требуется выбрать только один вариант из нескольких. Они напоминают кнопки на автомагнитолах, служащие для быстрого доступа к заданным радиостанциям. Браузер отображает эти элементы управления таким образом, что пользователь может включать их щелчком мыши на них (или с помощью клавиатуры). Переключатели этого типа всегда объединяются в группы. При этом включение одного переключателя автоматически выключает все остальные переключатели этой группы. Внешний вид переключателя зависит от используемого графического интерфейса. В пункте бланка «Размер штуковины» также используются два переключателя, Группы переключателей определяются по значению параметра name (имя) тега . Специальных скобок из тегов вроде.. для определения групп переключателей не предусмотрено. Параметр value указывает, какая кнопка была нажата пользователем. В зависимости от того, какую кредитную карту выберет пользователь для своих расчетов, переменной ее будет присвоено значение текстовой строки «mastercard» или «visacard». Следом за двумя наборами переключателей в бланке используется элемент управления типа checkbox (флажок). Он похож на переключатель предыдущего типа, так как тоже может находиться в одном из двух состояний (установлен/ сброшен), но не объединяется в группы и включается и выключается щелчком мыши на нем независимо от других элементов управления того же типа. Например, заказывая пиццу на веб-странице компании Electropizza, пользователь может выбрать и сардины, и лук, и ананас (если у него крепкий желудок), но ему не удастся одновременно выбрать маленькую, среднюю и большую пиццу. Выбор приправы к пицце будет представлен в виде трех отдельных элементов управления типа checkbox, тогда как выбор размера пиццы будет реализован с помощью набора переключателей. Если список, из которого предстоит сделать выбор пользователю, очень длинный, то использование переключателей несколько неудобно. В этом случае можно использовать теги В XHTML это запрещено. Закрывающие теги должны быть написаны строго в обратном порядке по отношению к открывающим тегам. В-шестых, в каждом документе должен быть указан его тип. Мы имели возможность в этом убедиться на примере листинга 4.7. Все серьезные и мелкие изменения, которые происходят в стандартах, обсуждаются на сайте www.w3.org. 15.4 Динамические веб-документы Все идеи, рассматривавшиеся до сих пор, соответствуют модели, показанной в листингах 3.2 и 3.3: клиент сообщает серверу имя файла, а тот в ответ возвращает файл. В первые годы существования Всемирной паутины все ее содержимое и в самом деле было статическим (просто файлы). Однако в последние годы в Сети появляется все больше динамических объектов, то есть таких, которые создаются по требованию, а не хранятся постоянно на диске. Автоматическое создание объектов может происходить как на стороне сервера, так и на стороне клиента. Рассмотрим оба случая по порядку. 15.4.1 Динамическая генерация содержимого веб-страниц на стороне сервера Чтобы понять, зачем вообще нужна динамическая генерация веб-страниц на стороне сервера, рассмотрим использование форм, описанных ранее. Когда пользователь заполняет поля формы и нажимает кнопку Submit (Подтверждение), серверу отправляется сообщение, содержащее в себе данные, предоставленные пользователем. Это сообщение не содержит имя запрашиваемого файла. Требуется, чтобы оно было передано для обработки программе или скрипту. Обычно обработка подразумевает использование пользовательских данных для поиска по базе данных на серверном диске и создание HTML-страницы, содержимое которой зависит от результатов этого поиска. Затем страница отсылается клиенту. Например, в приложении для электронной коммерции нажатие кнопки ПЕРЕЙТИ К РАСЧЕТАМ приводит к тому, что браузер возвращает на сервер cookie-файл с содержимым корзины клиента. На сервере при этом должны запуститься определенные программы или скрипты, в задачу которых входят обработка cookie и генерация HTML-страницы. Отправляемая клиенту HTML-страница может содержать форму со списком товаров, положенных в корзину, и адрес доставки вместе с запросом подтверждения заказа и предложением выбрать одну из возможных форм оплаты. Этапы обработки информации, полученной из HTML-формы, показаны на рисунке 15.8. Традиционный способ работы с формами и другими видами интерактивных веб-страниц связан с использованием системы CGI (Common Gateway Interface - общий шлюзовой интерфейс). Это стандартизованный интерфейс, позволяющий веб-серверам общаться с прикладными программами и скриптами, разрешающими вводить данные (например, в формы) и в ответ генерировать HTML-страницы. Обычно такие прикладные программы представляют собой скрипты, написанные на языке описания сценариев Perl, поскольку писать их проще и быстрее, чем программы (по крайней мере, если вы умеете программировать на Perl). Существует договоренность, в соответствии с которой эти скрипты должны размещаться в каталоге CGI-BIN, который доступен при помощи URL. Иногда вместо Perl используется другой язык написания скриптов, Python. Рисунок 15.8 - Этапы обработки информации, полученной из формы В качестве примера работы CGI рассмотрим случай, когда продукция компании «Великие Штуковины» приходит без гарантийного талона. Вместо этого клиенту предлагается зарегистрироваться в Интернете по адресу www.grwd.com. Там имеется ссылка: «Щелкните здесь для регистрации приобретения» Ссылка эта может указывать, например, на сценарий на языке Perl, расположенный по адресу www.grwd.com/cgi-bin/reg.perl. При запуске этого сценария без параметров обратно отсылается HTML-страница, содержащая регистрационную форму. Когда пользователь заполняет ее и нажимает кнопку Submit, скрипту передается сообщение, содержащее указанные им значения. Вид этого сообщения традиционен при работе с формами. Что происходит дальше, предугадать нетрудно. Perl-скрипт анализирует параметры, создает в базе данных запись о новом клиенте, отсылает назад HTML с регистрационным номером и телефоном службы поддержки. Понятно, что это не единственный способ обработки форм, однако он является наиболее распространенным. Динамическое создание веб-страниц на стороне сервера может быть реализовано не только с помощью CGI-скриптов. Существует еще один распространенный способ, который заключается во внедрении небольших скриптов в HTML-страницы. Они выполняются на сервере, в их задачу входит генерирование страницы. Популярным инструментом для написания таких скриптов является РНР (Hypertext Preprocessor - гипертекстовый препроцессор). При его использовании требуется, чтобы сервер понимал РНР (точно так же, как браузер должен понимать XML, чтобы интерпретировать страницы, написанные на одноименном языке). Обычно серверы предполагают, что у файлов страниц, написанных на РНР, расширение php, а не htm или html. В листинге 4.8 приведен пример маленького скрипта на РНР; он должен работать на любом сервере, если на нем установлен гипертекстовый препроцессор. Он состоит из привычного обрамления на HTML, а сам скрипт содержится внутри тега . Вся его работа заключается в создании страницы, сообщающей всю известную информацию о запустившем его браузере. Браузеры обычно отправляют кое-какие данные о себе вместе с запросами (и любыми прикладными cookie-файлами). Эти данные сохраняются в переменной HTTP_USER_AGENT. Если этот листинг сохранить в файле test.php в веб-каталоге компании «ABCD», то пользователь, набрав URL www.abcd.com/test.php, сможет получить страницу, из которой он узнает, какие браузер, язык и операционную систему он использует. Листинг 4.8 Пример страницы на HTML с внедренным РНР-скриптомA я вот что про тебя знаю:
РНР особенно хорошо подходит для обработки форм - с его помощью она осуществляется даже проще, чем путем написания CGI-скрипта. Пример обработки формы показан в листинге 4.9, а. Здесь мы видим обычную HTML-страницу с формой. Непривычно выглядит только первая строка, в которой указывается, что скрипт action.php должен быть запущен для обработки параметров после заполнения пользователем формы и нажатия кнопки подтверждения. Форма в этом примере состоит из двух текстовых полей ввода, в одном из которых запрашивается имя клиента, а в другом - его возраст. По окончании работы пользователя с формой на сервер отсылается стандартная строка, пример которой мы уже видели ранее. Эта строка обрабатывается, из нее извлекаются значения переменных name и age. Затем начинает свою работу скрипт action.php, показанный в листинге 4.9, б. Он генерирует ответ. Работа скрипта заключается в исполнении php-команд. Если пользователь предоставил данные «Харриет» и «24», то ему будет прислан HTML-файл, код которого показан в листинге 4.9, в. Как видите, обработка форм с помощью РНР производится элементарно. Несмотря на простоту использования, РНР - это мощный язык программирования, ориентированный на предоставление интерфейса между Всемирной паутиной и серверными базами данных. В РНР есть переменные, строки, массивы и большинство управляющих структур, присущих языку С, однако ввод-вывод гораздо мощнее, чем обычный printf. PHP имеет открытый исходный код и распространяется бесплатно. Листинг 4.9 Веб-страница с формой (а); PHP-скрипт для обработки формы (б); результат работы PHP-скрипта при исходных данных «Харриет» и «24» соответственно (в) (a)Ответ: Привет. ! Предсказываю: в следующем году тебе будет (б)Ответ: Привет, Харриет! Предсказываю: в следующем году тебе будет 25 (в) PHP был разработан специально под сервер Apache, который также обладает открытым исходным кодом и является самым распространенным веб-сервером в мире. Итак, мы знаем уже два различных способа генерации динамических HTML-страниц: с помощью CGI-скриптов и внедрения РНР. Есть еще третий метод, называемый JSP (JavaServer Pages - страницы сервера Java). Он в целом схож с РНР и отличается только тем, что динамическая часть программируется на языке Java. Файлы страниц, написанных с помощью JSP, имеют одноименное расширение: .jsp. Еще один метод создания динамических страниц - ASP (Active Server Pages - активные серверные страницы). Это ответ Microsoft на РНР и JSP. В качестве языка динамического веб-программирования используется собственный язык написания скриптов, созданный Microsoft, - Visual Basic Script. Соответственно, файлы страниц, написанных с использованием этого метода, имеют расширение .asp. Вопрос выбора между РНР, JSP и ASP в основном политический (открытый код Sun против кода Microsoft). С точки зрения технологий все эти методы вполне сравнимы по возможностям. Весь набор методов создания динамических страниц иногда называют динамическим HTML (DHTML). 15.4.2 Создание динамических веб-страниц на стороне клиента Скрипты CGI, PHP, JSP и ASP решают вопросы обработки форм и взаимодействия с базами данных, расположенными на сервере. Они могут принимать входящую информацию из форм, осуществлять поиск по одной или нескольким базам данных и в качестве результата генерировать HTML-страницы. Но ни один из этих методов не позволяет напрямую взаимодействовать с пользователем, например реагировать на движения мышкой. Для этих целей необходимы скрипты, внедренные в HTML-страницы и выполняющиеся не на серверной, а на клиентской машине. Начиная с HTML 4.0, появилась возможность включать скрипты такого типа с помощью тега Важно понимать, что обрабатываются программы, показанные в листингах 4.9 и 4.10, совершенно по-разному, несмотря на их внешнее сходство. Что происходит в первом случае (листинг 4.9)? После того как пользователь нажимает кнопку Submit, браузер собирает всю введенную информацию в одну длинную строку и отправляет ее на тот сервер, с которого пришла страница. Сервер видит имя PHP-файла и запускает его. PHP-скрипт создает новую HTML-страницу, которая отсылается браузеру для отображения. Что касается второго случая (листинг 4.10), то после нажатия кнопки Submit браузер сам выполняет действия функции JavaScript, содержащейся на странице. Вся работа производится локально, внутри браузера. С сервером никакого взаимодействия не осуществляется. Как следствие, результат появляется практически мгновенно, тогда как при использовании РНР задержка прибытия страницы с результатом может составлять несколько секунд. Разница между скриптами, работающими на стороне сервера и на стороне клиента, показана на рисунке 15.9. Показаны шаги, выполняемые в каждом случае. В обоих случаях все эти этапы производятся после вывода формы на экран. Шаг 1 состоит в приеме данных от пользователя. Затем следует их обработка, и вот здесь имеются значительные различия. Рисунок 15.9 - PHP-скрипт на стороне сервера (а); сценарий на JavaScript на стороне клиента (б) Эти различия вовсе не означают, что JavaScript лучше, чем РНР. Просто у них различные сферы применения. РНР (а с ним неявно и JSP, и ASP) применяется тогда, когда необходимо взаимодействовать с удаленной базой данных. JavaScript используют тогда, когда требуется взаимодействие с пользователем в пределах его компьютера. Разумеется, возможно (и довольно часто осуществляется) одновременное использование РНР и JavaScript, хотя они и не могут, например, обрабатывать одно и то же событие (типа нажатия кнопки) или производить одно и то же действие. JavaScript - это полноценный язык программирования, ничуть не слабее по возможностям, чем С или Java. В нем есть понятия переменных, строк, массивов, объектов, функций и всех привычных управляющих структур. К тому же он обладает множеством полезных свойств, специфичных для веб-страниц, включая возможность управления окнами и фреймами, установки и получения cookie, работы с формами и гиперссылками. Пример программы на JavaScript с рекурсивной функцией приведен в листинге 4.11. Листинг 4.11 Программа на JavaScript для подсчета и вывода факториалов С помощью JavaScript можно также отслеживать появление мыши над определенными объектами на странице. На многих веб-страницах с JavaScript можно заметить, что при наведении курсора мыши на какой-нибудь текст или изображение что-нибудь происходит. Часто при этом меняется изображение или вдруг выскакивает меню. Такое поведение легко программируется на JavaScript и несколько оживляет веб-страницы. Пример приведен в листинге 4.12. Листинг 4.12 Интерактивная страница, отвечающая на движения «мышью» JavaScript - это не единственный инструмент для создания веб-страниц с высокой степенью интерактивности. Еще один метод связан с использованием апплетов. Это небольшие программы на Java, скомпилированные в машинные инструкции виртуального компьютера, называемого JVM (Java Virtual Machine - виртуальная машина Java). Апплеты могут внедряться в HTML-страницы (между тегами - , автоматически нумеруются браузером. У списков, организованных
при помощи тегов