 |
I-2. HTML-формы. Методы отправки данных на сервер
|
|
|
|
Лабораторная работа 1. Протокол HTTP. Методы GET, POST. HTML формы.
Теоретическая часть
Жизненный цикл запроса в протоколе HTTP
- Браузер открывает соединение с сервером
- Браузер отправляет серверу запрос на получение страницы
- Сервер формирует ответ (чаще всего - HTML-код) браузеру и закрывает соединение
- Браузер обрабатывает HTML-код и отображает страницу
Обратите внимание на выделенное жирным. Еще до того, как вы увидели на экране запрошенную страницу, соединение с сервером закрыто, и он о вас забыл. И когда вы введете другой (или тот же самый) адрес, или щелкните по ссылке, или нажмете на кнопку HTML-формы - та же схема повторится снова.
Такую схему работы называют "клиент-сервер". Клиент в данном случае - браузер.
Итак, соединение с веб-сервером длится всего несколько секунд (или долей секунд) - это промежуток времени между щелчком по ссылке (или другим способом запроса) и началом отображения страницы. Большинство браузеров во время соединения отображают некий индикатор, например, MS Internet Explorer отображает анимацию в правом верхнем углу.
Чтобы навсегда избавиться от восприятия HTTP как "черного ящика", "притворимся" браузером с помощью telnet'а:
- Запустим telnet ya.ru 80
- Введем в окне терминала следующее (если ввод не отображается - ничего страшного):
GET / HTTP/1.0 [здесь нажмем Enter]
Host: ya.ru [здесь нажмем Enter дважды]
Нажатие Enter соответствует, как правило, комбинации символов CR + LF, обозначаемых как \r\n. Далее будет использоваться именно это обозначение.
По экрану пробежит HTML-код страницы http://ya.ru/. Как видите - ничего сложного.
Исходный код текущей страницы можно просмотреть практически в любом браузере, выбрав в меню "View|Source".
|
|
|
Картинки, фреймы - все это дополнительные запросы, точно такие же. Собственно, откуда берутся картинки в окне браузера: при парсинге (обработке) HTML-кода, браузер, натыкаясь на тэг <img src=" картинка "> осуществляет дополнительный запрос к серверу - запрос картинки, и отображает ее на месте, где стоит тэг <img...>.
Попробуйте:
Telnet www.google.ru 80
GET /php/php5ru.png HTTP/1.0 \r\n
Host: ya.ru \r\n\r\n
По экрану пробежит то, что вы увидите, если просмотрите этот png-файл в текстовом редакторе.
I-2. HTML-формы. Методы отправки данных на сервер
С HTML-формами вы наверняка уже встречались:
- <form method="GET" action="/cgi-bin/form_handler.cgi">
- Введите Ваше имя: <input type="text" name="name">
- <br>
- <input type="submit" name="okbutton" value="OK">
- </form>
Сохранив данный код в HTML-файле и просмотрев его с помощью вашего любимого браузера, вы увидите привычную HTML-форму:
Введите Ваше имя:
Рассмотрим используемые в этом небольшом примере тэги подробнее.
Тэг <form>, имеющий парный завершающий тэг </form>, собственно и задает форму. Его атрибуты - оба необязательные:
- action - указывает URL (полный или относительный), на который будет отправлена форма. Отправка формы - это такой же запрос к серверу, как и все остальные (как я уже описал выше).
Если этот атрибут не указать, большинство браузеров (точнее говоря, все известные мне браузеры) отправляют форму на текущий документ, то есть "саму на себя". Это удобное сокращение, но по стандарту HTML атрибут action обязателен.
- method - способ отправки формы. Их два.
- GET - отправка данных формы в адресной строке.
Вы могли заметить на различных сайтах присутствие в конце URL символа "?" и следующих за ним данных в формате параметр=значение. Здесь "параметр" соответствует значению атрибута name элементов формы (см. ниже про тэг <input>), а "значение" - содержимому атрибута value (в нем, например, содержится ввод пользователя в текстовое поле того же тэга <input>).
Для примера - попробуйте поискать что-нибудь в Яндексе и обратите внимание на адресную строку браузера. Это и есть способ GET. - POST - данные формы отправляются в теле запроса. Если не совсем понятно (или совсем непонятно), что это такое - не беспокойтесь, скоро мы к этому вопросу вернемся.
Если атрибут method не указан - подразумевается "GET".
|
|
|
Тэг <input> - задает элемент формы, определяемый атрибутом type:
- Значение "text" задает однострочное текстовое поле ввода
- Значение "submit" задает кнопку, при нажатии которой происходит отправка формы на сервер
Возможны и другие значения (да и <input> - не единственный тэг, задающий элемент формы), но их мы рассмотрим в следующих главах.
Итак, что же происходит, когда мы нажимаем кнопку "OK"?
- Браузер просматривает входящие в форму элементы и формирует из их атрибутов name и value данные формы. Допустим, введено имя Vasya. В этом случае данные формы - name=Vasya&okbutton=OK
- Браузер устанавливает соединение с сервером, отправляет на сервер запрос документа, указанного в атрибуте action тэга <form>, используя метод отправки данных, указанный в атрибуте method (в данном случае - GET), передавая в запросе данные формы.
- Сервер анализирует полученный запрос, формирует ответ, отправляет его браузеру и закрывает соединение
- Браузер отображает полученный от сервера документ
Отправка того же запроса вручную (с помошью telnet) выглядит следующим образом (предположим, что доменное имя сайта - www.example.com):
telnet www.example.com 80
GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0 \r\n
Host: www.example.com \r\n
\r\n
Как вы, скорее всего, уже догадались, нажатие submit-кнопки в форме с методом отправки "GET" аналогично вводу соответствующего URL (со знаком вопроса и данными формы в конце) в адресной строке браузера: http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK
На самом деле, метод GET используется всегда, когда вы запрашиваете с сервера какой-либо документ, просто введя его URL, или щелкнув по ссылке. При использовании <form method="GET"... >, к URL просто добавляются знак вопроса и данные формы.
Теперь заменим первую строку нашей формы на следующую:
- <form method="POST" action="/cgi-bin/form_handler.cgi">
Мы указали метод отправки "POST". В этом случае данные отправляются на сервер несколько другим способом:
|
|
|
telnet www.example.com 80
POST /cgi-bin/form_handler.cgi HTTP/1.0 \r\n
Host: www.example.com \r\n
Content-Type: application/x-www-form-urlencoded \r\n
Content-Length: 22 \r\n
\r\n
name=Vasya&okbutton=OK
При использовании метода POST данные формы отправляются уже после "двух Enter-ов" - в теле запроса. Все, что выше - на самом деле заголовок запроса (и когда мы использовали метод GET, данные формы отправлялись в заголовке). Для того, чтобы сервер знал, на каком байте закончить чтение тела запроса, в заголовке присутствует строка Content-Length; о том же, что данные формы будут переданы виде параметр1=значение1&параметр2=значение2..., причем значения передаются в виде urlencode - то есть, точно так же, как и с помощью метода GET, но в теле запроса, - серверу сообщает заголовок "Content-Type: application/x-www-form-urlencoded".
Преимущество метода POST - отсутствие ограничения на длину строки с данными формы.
При использовании метода POST невозможно отправить форму, просто "зайдя по ссылке", как было с GET.
При использовании POST-формы, в ее атрибуте action можно указать после знака вопроса и параметры GET-формы. Таким образом, метод POST включает в себя и метод GET.
|
|
|
