2. Основи
У цьому розділі ми розглядаємо основи веб-програмування. Його основною метою є ознайомлення з основними принципами веб-програмування, які не залежать від конкретної технології, що використовується для їх реалізації. У ньому наведено чимало прикладів, які рекомендується випробувати, щоб поступово «ввібратися» у філософію веб-розробки. Безкоштовні інструменти, необхідні для їх тестування, наведено в кінці документа у додатку під назвою «Веб-інструменти».
2.1. Компоненти веб-додатку
Machine Serveur
15Клієнтська машина
Номер | Роль | Поширені приклади |
OS Сервер | Linux, Windows | |
Веб-сервер | Apache (Linux, Windows) IIS (NT), PWS (Win9x), Cassini (Windows + платформа .NET) | |
Скрипти, що виконуються на стороні сервера. Вони можуть виконуватися модулями сервера або програмами, зовнішніми щодо сервера (CGI). | PERL (Apache, IIS, PWS) VBSCRIPT (IIS, PWS) JAVASCRIPT (IIS, PWS) PHP (Apache, IIS, PWS) JAVA (Apache, IIS, PWS) C#, VB.NET (IIS) | |
База даних — вона може знаходитися на тому самому комп’ютері, що й програма, яка її використовує, або на іншому комп’ютері через Інтернет. | Oracle (Linux, Windows) MySQL (Linux, Windows) Postgres (Linux, Windows) Access (Windows) SQL Server (Windows) | |
OS Клієнт | Linux, Windows | |
Веб-браузер | Netscape, Internet Explorer, Mozilla, Opera | |
Скрипти, що виконуються на стороні клієнта в браузері. Ці скрипти не мають доступу до дисків клієнтського комп'ютера. | VBscript (IE) JavaScript (IE, Netscape) PerlScript (IE) Аплети JAVA |
2.2. Обмін даними у веб-додатку з використанням форми
Клієнтський комп'ютер Серверний комп'ютер
Номер | Роль |
Браузер вперше запитує URL для (http://machine/url). Параметри не передаються. | |
Веб-сервер надсилає йому веб-сторінку з цим URL. Вона може бути статичною або динамічно згенерованою серверним скриптом (SA), який міг використовувати вміст баз даних (SB, SC). У цьому випадку скрипт виявить, що запит на URL надійшов без передачі параметрів, і згенерує початкову сторінку WEB. Браузер отримує сторінку та відображає її (CA). Скрипти на стороні браузера (CB) могли змінити початкову сторінку, надіслану сервером. Потім у результаті взаємодії між користувачем (CD) та скриптами (CB) веб-сторінка буде змінена. Зокрема, будуть заповнені форми. | |
Користувач підтверджує дані форми, які потім мають бути надіслані на веб-сервер. Браузер повторно запитує початковий URL або інший, залежно від ситуації, і одночасно передає на сервер значення з форми. Для цього він може використовувати два методи, що називаються GET та POST. Отримавши запит від клієнта, сервер запускає скрипт (SA), пов’язаний із запитаним URL, який виявляє параметри та обробляє їх. | |
Сервер видає сторінку WEB, сформовану програмою (SA, SB, SC). Цей етап ідентичний попередньому етапу 2. Відтепер обмін даними відбувається відповідно до етапів 2 та 3. |
2.3. Notations
Далі ми припустимо, що певна кількість інструментів вже встановлена, і будемо використовувати такі позначення:
позначення | значення |
коренева папка дерева каталогів сервера Apache | |
коренева папка веб-сторінок, що видаються Apache. Саме в цій кореневій папці мають знаходитися веб-сторінки. Таким чином, URL http://localhost/page1.htm відповідає файлу <apache-DocumentRoot>\page1.htm. | |
коренева папка дерева, пов’язана з псевдонімом cgi-bin, де можна розміщувати скрипти CGI для Apache. Таким чином, URL http://localhost/cgi-bin/test1.pl відповідає файлу <apache-cgi-bin>\test1.pl. | |
кореневий каталог веб-сторінок, що видаються IIS, PWS або Cassini. Саме в цьому кореневому каталозі повинні знаходитися веб-сторінки. Таким чином, URL http://localhost/page1.htm відповідає файлу <IIS-DocumentRoot>\page1.htm. | |
коренева папка дерева каталогів мови Perl. Виконуваний файл perl.exe зазвичай знаходиться в <perl>\bin. | |
корені дерева мови PHP. Виконуваний файл php.exe зазвичай знаходиться в <php>. | |
коренева папка дерева Java. Виконувані файли, пов’язані з Java, знаходяться в <java>\bin. | |
корені сервера Tomcat. Приклади сервлетів містяться в <tomcat>\webapps\examples\servlets, а приклади сторінок — у JSP та <tomcat>\webbapps\examples\jsp |
Щодо кожного з цих інструментів див. додаток, де наведено інструкції з їх встановлення.
2.4. Статичні веб-сторінки, динамічні веб-сторінки
Статична сторінка представлена файлом HTML. Динамічна сторінка, у свою чергу, генерується «на льоту» веб-сервером. У цьому розділі ми пропонуємо вам різні тести з різними веб-серверами та мовами програмування, щоб продемонструвати універсальність веб-концепції. Ми використовуватимемо два веб-сервери: Apache та IIS. Хоча IIS є комерційним продуктом, він має дві більш обмежені, але безкоштовні версії:
- PWS для комп’ютерів під управлінням Win9x
- Cassini для комп’ютерів під управлінням Windows 200 та XP
Папка <IIS-DocumentRoot> зазвичай відповідає папці [lecteur:\inetpub\wwwroot], де [lecteur] — це диск (C, D, ...), на якому було встановлено IIS. Те саме стосується PWS. Для Cassini папка <IIS-DocumentRoot> залежить від способу запуску сервера. У додатку показано, що сервер Cassini можна запустити у вікні DOS (або за допомогою ярлика) таким чином:
Додаток [WebServer], який також називають веб-сервером Cassini, підтримує три параметри:
- /port: номер порту веб-служби. Може бути будь-яким. За замовчуванням — 80
- /path: фізичний шлях до папки на диску
- /vpath: віртуальна папка, пов’язана з попередньою фізичною папкою. Слід звернути увагу на те, що синтаксис не /path=шлях, а /vpath:шлях, на відміну від того, що зазначено у вікні довідки вище.
Якщо Cassini запускається таким чином:
то папка P є кореневою папкою веб-дерева сервера Cassini. Отже, саме ця папка позначається як <IIS-DocumentRoot>. Так, у наступному прикладі:
сервер Cassini працюватиме на порту 80, а кореневою папкою його дерева <IIS-DocumentRoot> є папка [d:\data\devel\webmatrix]. Веб-сторінки, які потрібно протестувати, повинні знаходитися в цій кореневій папці.
Далі кожна веб-програма буде представлена одним файлом, який можна створити за допомогою будь-якого текстового редактора. Файл IDE не потрібен.
2.4.1. Статична сторінка HTML (мова розмітки HyperText)
Розглянемо такий код HTML:
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
що створює таку веб-сторінку:
Тести
Тест1
- запустити сервер Apache
- вставити скрипт essai1.html у <apache-DocumentRoot>
- переглянути файл URL http://localhost/essai1.html у браузері
- зупинити сервер Apache
Тест 2
- запустити сервер IIS/PWS/Cassini
- встановити скрипт essai1.html у <IIS-DocumentRoot>
- переглянути URL http://localhost/essai1.html у браузері
2.4.2. Сторінка ASP (Active Server Pages)
Скрипт essai2.asp:
<html>
<head>
<title>essai 1 : une page asp</title>
</head>
<body>
<center>
<h1>Une page asp générée dynamiquement par le serveur PWS</h1>
<h2>Il est <% =time %></h2>
<br>
A chaque fois que vous rafraîchissez la page, l'heure change.
</body>
</html>
створює таку веб-сторінку:
Тест
- запустити сервер IIS/PWS
- вставити скрипт essai2.asp у <IIS-DocumentRoot>
- завантажити URL http://localhost/essai2.asp у браузері
2.4.3. Скрипт PERL (Practical Extracting and Reporting Language)
Скрипт essai3.pl:
#!d:\perl\bin\perl.exe
($secondes,$minutes,$heure)=localtime(time);
print <<HTML
Content-type: text/html
<html>
<head>
<title>essai 1 : un script Perl</title>
</head>
<body>
<center>
<h1>Une page générée dynamiquement par un script Perl</h1>
<h2>Il est $heure:$minutes:$secondes</h2>
<br>
A chaque fois que vous rafraîchissez la page, l'heure change.
</body>
</html>
HTML
;
Перший рядок — це шлях до виконуваного файлу perl.exe. За потреби його слід змінити. Після запуску веб-сервером скрипт генерує таку сторінку:
Тестування
- веб-сервера: Apache
- для довідки перегляньте файл конфігурації srm.conf або httpd.conf залежно від версії Apache у папці <apache>\confs і знайдіть рядок, що стосується cgi-bin, щоб дізнатися каталог <apache-cgi-bin>, у який слід помістити файл essai3.pl.
- Помістіть скрипт essai3.pl у <apache-cgi-bin>
- запитайте URL-адресу http://localhost/cgi-bin/essai3.pl
Слід зауважити, що для завантаження сторінки perl потрібно більше часу, ніж для сторінки asp. Це пов’язано з тим, що скрипт Perl виконується інтерпретатором Perl, який потрібно завантажити, перш ніж він зможе виконати скрипт. Він не залишається постійно в пам’яті.
2.4.4. Скрипт PHP (процесор HyperText)
Скрипт essai4.php
<html>
<head>
<title>essai 4 : une page php</title>
</head>
<body>
<center>
<h1>Une page PHP générée dynamiquement</h1>
<h2>
<?
$maintenant=time();
echo date("j/m/y, h:i:s",$maintenant);
?>
</h2>
<br>
A chaque fois que vous rafraîchissez la page, l'heure change.
</body>
</html>
Попередній скрипт створює таку веб-сторінку:
Тестування
Тест 1
- переглянути файл конфігурації srm.conf або httpd.conf Apache у <Apache>\confs
- для довідки, перевірте рядки конфігурації php
- запустити сервер Apache
- вставити essai4.php у <apache-DocumentRoot>
- запитати URL http://localhost/essai4.php
Test2
- запустити сервер IIS/PWS
- для інформації перевірити налаштування PWS щодо php
- встановити essai4.php у <IIS-DocumentRoot>\php
- запитати URL http://localhost/essai4.php
2.4.5. Скрипт JSP (Java Server Pages)
Скрипт heure.jsp
<% //— програма на Java, що відображає час %>
<%@ page import="java.util.*" %>
<%
// код JAVA для обчислення часу
Calendar calendrier=Calendar.getInstance();
int heures=calendrier.get(Calendar.HOUR_OF_DAY);
int minutes=calendrier.get(Calendar.MINUTE);
int secondes=calendrier.get(Calendar.SECOND);
// години, хвилини, секунди — це глобальні змінні
//, які можна використовувати в коді HTML
%>
<% // код HTML %>
<html>
<head>
<title>Page JSP affichant l'heure</title>
</head>
<body>
<center>
<h1>Une page JSP générée dynamiquement</h1>
<h2>Il est <%=heures%>:<%=minutes%>:<%=secondes%></h2>
<br>
<h3>A chaque fois que vous rechargez la page, l'heure change</h3>
</body>
</html>
Після виконання веб-сервером цей скрипт створює таку сторінку:
Тестування
- помістіть скрипт heure.jsp у папку <tomcat>\jakarta-tomcat\webapps\examples\jsp (Tomcat 3.x) або у папку <tomcat>\webapps\examples\jsp (Tomcat 4.x)
- запустіть сервер Tomcat
- запитати URL http://localhost:8080/examples/jsp/heure.jsp
2.4.6. Сторінка ASP.NET
Скрипт heure1.aspx:
<html>
<head>
<title>Démo asp.net </title>
</head>
<body>
Il est <% =Date.Now.ToString("hh:mm:ss") %>
</body>
</html>
Після виконання веб-сервером цей скрипт створює таку сторінку:
Для цього тесту необхідний комп’ютер під управлінням Windows, на якому встановлено платформу .NET (див. додаток).
- помістіть скрипт heure1.aspx у <IIS-DocumentRoot>
- запустити сервер IIS/CASSINI
- запитати URL http://localhost/heure1.aspx
2.4.7. Висновок
Попередні приклади показали, що:
- сторінку HTML можна динамічно згенерувати за допомогою програми. У цьому й полягає суть веб-програмування.
- що використовувані мови та веб-сервери можуть бути різноманітними. Наразі спостерігаються такі основні тенденції:
- комбінації Apache/PHP (Windows, Linux) та IIS/PHP (Windows)
- технологія ASP.NET на платформах Windows, яка поєднує сервер IIS з мовою .NET (C#, VB.NET, ...)
- технологія Java-сервлетів та сторінок JSP, що працюють з різними серверами (Tomcat, Apache, IIS) та на різних платформах (Windows, Linux).
2.5. Скрипти на стороні браузера
Сторінка HTML може містити скрипти, які виконуватимуться браузером. Існує багато мов скриптів на стороні браузера. Ось деякі з них:
Мова | Сумісні браузери |
Vbscript | IE |
JavaScript | IE, Netscape |
PerlScript | IE |
Java | IE, Netscape |
Розглянемо кілька прикладів.
2.5.1. Веб-сторінка зі скриптом VBScript, що виконується на стороні браузера
Сторінка vbs1.html
<html>
<head>
<title>essai : une page web avec un script vb</title>
<script language="vbscript">
function reagir
alert "Vous avez cliqué sur le bouton OK"
end function
</script>
</head>
<body>
<center>
<h1>Une page Web avec un script VB</h1>
<table>
<tr>
<td>Cliquez sur le bouton</td>
<td><input type="button" value="OK" name="cmdOK" onclick="reagir"></td>
</tr>
</table>
</body>
</html>
Наведена вище сторінка HTML містить не лише код HTML, а й програму, призначену для виконання браузером, який завантажить цю сторінку. Код виглядає так:
<script language="vbscript">
function reagir
alert "Vous avez cliqué sur le bouton OK"
end function
</script>
Теги <script></script> використовуються для виділення скриптів на сторінці HTML. Ці скрипти можуть бути написані різними мовами, і саме параметр language тегу <script> вказує на використовувану мову. У даному випадку це VBScript. Ми не будемо детально розглядати цю мову. Наведений вище скрипт визначає функцію з назвою réagir, яка виводить повідомлення. Коли викликається ця функція? Про це нам повідомляє наступний рядок коду HTML:
Атрибут onclick вказує ім’я функції, яку слід викликати, коли користувач натисне на кнопку OK. Коли браузер завантажить цю сторінку і користувач натисне на кнопку OK, ми отримаємо таку сторінку:
Тестування
Лише браузер IE здатний виконувати скрипти VBScript. Netscape для цього потребує додаткових модулів. Можна провести такі тести:
- сервер Apache
- скрипт vbs1.html у <apache-DocumentRoot>
-
запитати URL-адресу http://localhost/vbs1.html за допомогою браузера IE
-
сервер IIS/PWS
- скрипт vbs1.html у <pws-DocumentRoot>
- запитати URL-адресу http://localhost/vbs1.html за допомогою браузера IE
Веб-сторінка зі скриптом JavaScript, що виконується у браузері
La page : js1.html
<html>
<head>
<title>essai 4 : une page web avec un script Javascript</title>
<script language="javascript">
function reagir(){
alert ("Vous avez cliqué sur le bouton OK");
}
</script>
</head>
<body>
<center>
<h1>Une page Web avec un script Javascript</h1>
<table>
<tr>
<td>Cliquez sur le bouton</td>
<td><input type="button" value="OK" name="cmdOK" onclick="reagir()"></td>
</tr>
</table>
</body>
</html>
Тут ми маємо щось подібне до попередньої сторінки, за винятком того, що мову VBScript замінено на мову Javascript. Перевага останньої полягає в тому, що її підтримують обидва браузери — IE та Netscape. Її виконання дає ті самі результати:
Тести
- сервер Apache
- скрипт js1.html у <apache-DocumentRoot>
-
запитати URL-адресу http://localhost/js1.html за допомогою браузера IE або Netscape
-
сервер IIS/PWS
- скрипт js1.html у <pws-DocumentRoot>
- запитати URL-адресу http://localhost/js1.html за допомогою браузера IE або Netscape
2.6. Взаємодія «клієнт-сервер»
Повернімося до нашої початкової схеми, яка ілюструвала учасників веб-додатку:
Сервер
Тут нас цікавить обмін даними між клієнтським комп’ютером та сервером. Цей обмін відбувається через мережу, і варто нагадати загальну структуру обміну даними між двома віддаленими комп’ютерами.
2.6.1. Модель OSI
Модель відкритої мережі під назвою OSI (Open Systems Interconnection Reference Model), визначена ISO (Міжнародною організацією зі стандартизації), описує ідеальну мережу, де зв’язок між машинами можна представити за допомогою семирівневої моделі:
Кожен рівень отримує послуги від нижчого рівня та надає свої послуги вищому рівню. Припустимо, що два додатки, розташовані на різних машинах A та B, хочуть встановити зв’язок: вони роблять це на рівні Application. Їм не потрібно знати всіх деталей функціонування мережі: кожна програма передає інформацію, яку вона хоче надіслати, на нижній рівень — рівень Présentation. Отже, програмі потрібно знати лише правила взаємодії з рівнем Présentation. Як тільки інформація потрапляє на рівень Présentation, вона за іншими правилами передається на рівень Session і так далі, доки інформація не потрапить на фізичний носій і не буде фізично передана на машину-адресата. Там вона пройде обробку, зворотну до тієї, яку вона пройшла на комп’ютері-відправнику.
На кожному рівні процес-відправник, відповідальний за надсилання інформації, надсилає її процесу-одержувачу на іншому комп’ютері, що належить до того самого рівня. Це відбувається за певними правилами, які називаються протоколом рівня. Отже, маємо таку кінцеву схему зв’язку:
Роль різних рівнів така:
Забезпечує передачу бітів по фізичному носію. На цьому рівні знаходяться кінцеві пристрої обробки даних (E.T.T.D), такі як термінал або комп’ютер, а також пристрої завершення каналів передачі даних (E.T.C.D), такі як модулятор/демодулятор, мультиплексор, концентратор. На цьому рівні слід звернути увагу на такі моменти: . вибір способу кодування інформації (аналоговий або цифровий) . вибір режиму передачі (синхронний або асинхронний). | |
Приховує фізичні особливості фізичного рівня. Виявляє та виправляє помилки передачі. | |
Керує маршрутом, яким має пройти інформація, що надсилається в мережі. Це називається routage: визначення маршруту, яким має пройти інформація, щоб дістатися до адресата. | |
Забезпечує взаємодію між двома додатками, тоді як попередні рівні дозволяли лише взаємодію між комп’ютерами. Однією зі служб, що надаються цим рівнем, може бути мультиплексування: транспортний рівень може використовувати одне й те саме мережеве з’єднання (між комп’ютерами) для передачі інформації, що належить кільком додаткам. | |
На цьому рівні знаходяться послуги, що дозволяють додатку відкривати та підтримувати робочу сесію на віддаленому комп’ютері. | |
Вона спрямована на уніфікацію представлення даних на різних машинах. Таким чином, дані, що надходять з машини A, будуть «оформлені» шаром Présentation машини A відповідно до стандартного формату перед відправкою в мережу. Потрапивши на рівень Présentation комп’ютера-одержувача B, який розпізнає їх завдяки стандартному формату, дані будуть «оформлені» іншим чином, щоб програма комп’ютера B могла їх розпізнати. | |
На цьому рівні знаходяться програми, які зазвичай використовуються користувачем, такі як електронна пошта або передача файлів. |
2.6.2. Модель TCP/IP
Модель OSI є ідеальною моделлю. Набір протоколів TCP/IP наближається до неї у такому вигляді:
- мережевий інтерфейс (мережева карта комп’ютера) виконує функції рівнів 1 і 2 моделі OSI
- шар IP (Інтернет-протокол) виконує функції 3-го шару (мережа)
- рівень TCP (протокол управління передачею) або UDP (протокол користувацьких датаграм) виконує функції 4-го рівня (транспортного). Протокол TCP гарантує, що пакети даних, якими обмінюються комп’ютери, надійно доходять до місця призначення. Якщо це не відбувається, він повертає пакети, що загубилися. Протокол UDP не виконує цю функцію, і тоді це завдання лягає на розробника додатків. Саме тому в Інтернеті, який не є на 100 % надійною мережею, найчастіше використовується протокол TCP. У цьому випадку йдеться про мережу TCP-IP.
- Рівень додатків охоплює функції рівнів 5–7 моделі OSI.
Веб-додатки знаходяться в шарі Application і, отже, базуються на протоколах TCP-IP. Рівні Application клієнтських машин та сервера обмінюються повідомленнями, які передаються рівням 1–4 моделі для подальшої доставки до місця призначення. Щоб зрозуміти один одного, рівні додатків обох машин повинні «розмовляти» однією мовою або протоколом. Протокол веб-додатків називається HTTP (HyperText Transfer Protocol). Це текстовий протокол, c.a.d, за допомогою якого машини обмінюються рядками тексту в мережі для взаєморозуміння. Цей обмін стандартизовано, c.a.d, тобто клієнт має у своєму розпорядженні певну кількість повідомлень, щоб точно вказати серверу, чого він хоче, а сервер також має у своєму розпорядженні певну кількість повідомлень, щоб надати клієнту відповідь. Цей обмін повідомленнями має такий вигляд:
Клієнт --> Сервер
Коли клієнт надсилає запит до веб-сервера, він надсилає
- рядки тексту у форматі HTTP, щоб вказати, що саме він хоче
- порожній рядок
- за бажанням — документ
Сервер --> Клієнт
Коли сервер надсилає відповідь клієнту, він надсилає
- рядки тексту у форматі HTTP, щоб вказати, що він надсилає
- порожній рядок
- опціонально — документ
Отже, обмін даними має однакову форму в обох напрямках. В обох випадках може відбуватися надсилання документа, хоча клієнт рідко надсилає документ на сервер. Але протокол HTTP це передбачає. Саме це дозволяє, наприклад, абонентам інтернет-провайдера завантажувати різноманітні документи на свій особистий сайт, розміщений у цього провайдера. Обмінювані документи можуть бути будь-якими. Візьмемо для прикладу браузер, який запитує веб-сторінку, що містить зображення:
- браузер підключається до веб-сервера та запитує потрібну сторінку. Запитані ресурси однозначно позначаються за допомогою URL (Uniform Resource Locator). Браузер надсилає лише заголовки HTTP, а не сам документ.
- Сервер відповідає йому. Спочатку він надсилає заголовки HTTP, що вказують, який тип відповіді він надсилає. Це може бути повідомлення про помилку, якщо запитувана сторінка не існує. Якщо сторінка існує, сервер у заголовках HTTP своєї відповіді вкаже, що після них він надішле документ HTML (HyperText Markup Language). Цей документ — це послідовність рядків тексту у форматі HTML. Текст у форматі HTML містить теги (маркери), які надають браузеру вказівки щодо способу відображення тексту.
- Клієнт, виходячи з заголовків HTTP сервера, знає, що отримає документ HTML. Він проаналізує цей документ і, можливо, виявить, що той містить посилання на зображення. Ці зображення відсутні в документі HTML. Тому він надсилає новий запит на той самий веб-сервер, щоб отримати перше зображення, яке йому потрібно. Цей запит ідентичний тому, що був зроблений у пункті 1, за винятком того, що запитуваний ресурс інший. Сервер обробить цей запит, надіславши клієнту запитане зображення. Цього разу у відповіді заголовки HTTP вкажуть, що надісланий документ є зображенням, а не документом HTML.
- Клієнт отримує надіслане зображення. Етапи 3 і 4 повторюватимуться доти, доки клієнт (зазвичай веб-браузер) не отримає всі документи, необхідні для відображення сторінки в повному обсязі.
2.6.3. Протокол HTTP
Розглянемо протокол HTTP на прикладах. Які дані обмінюються браузер і веб-сервер?
2.6.3.1. Відповідь сервера HTTP
Тут ми дізнаємося, як веб-сервер відповідає на запити своїх клієнтів. Веб-сервіс або сервіс HTTP — це сервіс TCP-IP, який зазвичай працює на порту 80. Він може працювати й на іншому порту. У такому випадку браузер-клієнт повинен вказати цей порт у запиті URL. Запит URL має такий загальний вигляд:
з
протоколом | http для веб-сервісу. Браузер також може виступати клієнтом для сервісів ftp, news, telnet тощо. |
машина | ім'я комп'ютера, на якому працює веб-сервіс |
порт | порт веб-сервісу. Якщо це 80, номер порту можна опустити. Це найпоширеніший випадок |
шлях | шлях до запитуваного ресурсу |
додаткова інформація | додаткова інформація, що надається серверу для уточнення запиту клієнта |
Що робить браузер, коли користувач запитує завантаження файлу URL?
- Він відкриває канал зв'язку TCP-IP із машиною та портом, вказаними в розділі machine[:port] файлу URL. Встановити з’єднання TCP-IP означає створити «канал» зв’язку між двома машинами. Після створення цього каналу вся інформація, що обмінюється між двома машинами, буде проходити через нього. Створення цього каналу TCP-IP ще не передбачає використання веб-протоколу HTTP.
- Після створення каналу TCP-IP клієнт надсилає запит до веб-сервера, відправляючи йому рядки тексту (команди) у форматі HTTP. Він надсилає серверу частину «шлях/інформація» з URL
- сервер відповість йому таким самим чином і через той самий канал
- один із двох учасників приймає рішення про закриття каналу. Це залежить від використовуваного протоколу HTTP. З протоколом HTTP 1.0 сервер закриває з’єднання після кожної своєї відповіді. Це змушує клієнта, який повинен зробити кілька запитів для отримання різних документів, що складають веб-сторінку, відкривати нове з’єднання для кожного запиту, що пов’язано з витратами. З протоколом HTTP/1.1 клієнт може вказати серверу залишити з’єднання відкритим, доки він не дасть команду його закрити. Таким чином, він може завантажити всі документи веб-сторінки за допомогою одного з’єднання та самостійно закрити його після отримання останнього документа. Сервер виявить це закриття та також закриє з’єднання.
Щоб проаналізувати обмін даними між клієнтом і веб-сервером, ми скористаємося інструментом під назвою curl. Curl — це програма, яка дозволяє виступати клієнтом інтернет-сервісів, що підтримують різні протоколи (DOS, FTP, TELNET, GOPHER, ...). curl доступний за адресою http://curl.haxx.se/. Тут бажано завантажити версію для Windows win32-nossl, оскільки версія win32-ssl вимагає додаткових DLL-файлів, які не входять до складу пакета curl. Цей пакет містить набір файлів, які потрібно просто розпакувати в папку, яку відтепер будемо називати <curl>. Ця папка містить виконуваний файл із назвою [curl.exe]. Це буде наш клієнт для звернення до веб-серверів. Відкриємо вікно командного рядка та перейдемо до папки <curl>:
dos>dir curl.exe
22/03/2004 13:29 299 008 curl.exe
E:\curl2>curl
curl: try 'curl --help' for more information
dos>curl --help | more
Usage: curl [options...] <url>
Options: (H) means HTTP/HTTPS only, (F) means FTP only
-a/--append Append to target file when uploading (F)
-A/--user-agent <string> User-Agent to send to server (H)
--anyauth Tell curl to choose authentication method (H)
-b/--cookie <name=string/file> Cookie string or file to read cookies from (H)
--basic Enable HTTP Basic Authentication (H)
-B/--use-ascii Use ASCII/text transfer
-c/--cookie-jar <file> Write cookies to this file after operation (H)
....
Скористаємося цим додатком, щоб звернутися до веб-сервера та проаналізувати обмін даними між клієнтом і сервером. Ми опинимося в такій ситуації:
Веб-сервер може бути будь-яким. Наша мета — проаналізувати обмін даними, що відбуватиметься між веб-клієнтом curl та веб-сервером. Раніше ми створили таку статичну сторінку: HTML:
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
що ми бачимо у браузері:
Бачимо, що запитуване URL — це: http://localhost/aspnet/chap1/statique1.html. Отже, сервер веб-служби — це localhost (=локальний сервер), а порт — 80. Якщо переглянути текст HTML цієї веб-сторінки (Вигляд/Джерело), ми побачимо текст HTML, який було створено спочатку:
Тепер скористаємося нашим клієнтом CURL, щоб отримати той самий URL:
dos>curl http://localhost/aspnet/chap1/statique1.html
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
Ми бачимо, що веб-сервер надіслав йому набір рядків тексту, який представляє код HTML запитуваної сторінки. Раніше ми зазначали, що відповідь веб-сервера має такий вигляд:
Однак тут ми не побачили заголовків HTTP. Це тому, що [curl] за замовчуванням їх не відображає. Опція --include дозволяє їх відобразити:
E:\curl2>curl --include http://localhost/aspnet/chap1/statique1.html
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Mon, 22 Mar 2004 16:51:00 GMT
X-AspNet-Version: 1.1.4322
Cache-Control: public
ETag: "1C4102CEE8C6400:1C4102CFBBE2250"
Content-Type: text/html
Content-Length: 161
Connection: Close
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
Сервер дійсно надіслав серію заголовків HTTP, за якими йшов порожній рядок:
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Mon, 22 Mar 2004 16:51:00 GMT
X-AspNet-Version: 1.1.4322
Cache-Control: public
ETag: "1C4102CEE8C6400:1C4102CFBBE2250"
Content-Type: text/html
Content-Length: 161
Connection: Close
сервер повідомляє
| |
сервер ідентифікується. У цьому випадку це сервер Cassini | |
дата/час відповіді | |
заголовок, характерний для сервера Cassini | |
надає клієнту вказівки щодо можливості кешування відповіді, що надсилається йому. Атрибут [public] вказує клієнту, що він може кешувати сторінку. Атрибут [no-cache] вказав би клієнту, що він не повинен кешувати сторінку. | |
... | |
сервер повідомляє, що він надішле текст (text) у форматі HTML (html). | |
кількість байтів документа, який буде надіслано після заголовків HTTP. Це число фактично є розміром у байтах файлу essai1.html: | |
сервер повідомляє, що закриє з’єднання після надсилання документа |
Клієнт отримує ці заголовки HTTP і тепер знає, що отримає 161 байт, які представляють документ HTML. Сервер надсилає ці 161 байт одразу після порожнього рядка, який сигналізував про кінець заголовків HTTP:
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
Тут можна впізнати файл HTML, створений спочатку. Якби нашим клієнтом був веб-браузер, то після отримання цих рядків тексту він би їх інтерпретував, щоб відобразити користувачеві на екрані таку сторінку:
Давайте ще раз використаємо нашого клієнта [curl], щоб запросити той самий ресурс, але цього разу запитуючи лише заголовки відповіді:
dos>curl --head http://localhost/aspnet/chap1/statique1.html
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Tue, 23 Mar 2004 07:11:54 GMT
Cache-Control: public
ETag: "1C410A504D60680:1C410A58621AD3E"
Content-Type: text/html
Content-Length: 161
Connection: Close
Ми отримуємо той самий результат, що й раніше, без документа HTML. Тепер спробуємо завантажити зображення як за допомогою браузера, так і за допомогою універсального клієнта TCP. Спочатку за допомогою браузера:
Файл univ01.gif має розмір 4052 байт:
Тепер скористаємося клієнтом [curl]:
dos>curl --head http://localhost/aspnet/chap1/univ01.gif
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Tue, 23 Mar 2004 07:18:44 GMT
Cache-Control: public
ETag: "1C410A6795D7500:1C410A6868B1476"
Content-Type: image/gif
Content-Length: 4052
Connection: Close
У наведеному вище циклі «запит-відповідь» слід звернути увагу на такі моменти:
| |
| |
|
2.6.3.2. Запит клієнта HTTP
Тепер задамося таким питанням: якщо ми хочемо написати програму, яка «спілкується» з веб-сервером, які команди вона повинна надсилати веб-серверу, щоб отримати певний ресурс? У попередніх прикладах ми бачили, що отримував клієнт, але не те, що він надсилав. Ми використаємо опцію [--verbose] у curl, щоб також побачити, що клієнт надсилає серверу. Почнемо з запиту статичної сторінки:
dos>curl --verbose http://localhost/aspnet/chap1/statique1.html
* About to connect() to localhost:80
* Connected to portable1_tahe (127.0.0.1) port 80
> GET /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
< HTTP/1.1 200 OK
< Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
< Date: Tue, 23 Mar 2004 07:37:06 GMT
< Cache-Control: public
< ETag: "1C410A504D60680:1C410A58621AD3E"
< Content-Type: text/html
< Content-Length: 161
< Connection: Close
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
* Closing connection #0
Спочатку клієнт [curl] встановлює TCP/IP-з'єднання з портом 80 комп'ютера localhost (=127.0.0.1)
Після встановлення з’єднання він надсилає свій запит HTTP. Цей запит складається з низки рядків тексту, що закінчуються порожнім рядком:
GET /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
Запит HTTP від веб-клієнта має дві функції:
- вказати бажаний ресурс. Цю роль тут виконує перший рядок GET
- надати інформацію про клієнта, який надсилає запит, щоб сервер міг, за необхідності, адаптувати свою відповідь до цього конкретного типу клієнта.
Значення рядків, надісланих вище клієнтом [curl], є таким:
для запиту певного ресурсу згідно з певною версією протоколу HTTP. Сервер надсилає відповідь у форматі HTTP, за якою йде порожній рядок, а потім — запитуваний ресурс | |
для вказівки клієнта | |
для уточнення (протокол HTTP 1.1) машини та порту запитуваного веб-сервера | |
тут для вказівки, що клієнт не підтримує кеш. | |
типи MIME, що вказують типи файлів, які клієнт вміє обробляти |
Повторімо операцію з опцією --head у [curl]:
dos>curl --verbose --head --output reponse.txt http://localhost/aspnet/chap1/statique1.html
* About to connect() to localhost:80
* Connected to portable1_tahe (127.0.0.1) port 80
> HEAD /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
< HTTP/1.1 200 OK
< Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
< Date: Tue, 23 Mar 2004 07:54:22 GMT
< Cache-Control: public
< ETag: "1C410A504D60680:1C410A58621AD3E"
< Content-Type: text/html
< Content-Length: 161
< Connection: Close
Ми зупинимося лише на заголовках HTTP, надісланих клієнтом:
HEAD /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
Змінилася лише команда, що запитує ресурс. Замість команди GET тепер маємо команду HEAD. Ця команда вимагає, щоб відповідь сервера обмежувалася заголовками HTTP і щоб він не надсилав запитуваний ресурс. На наведеному вище знімку екрана не відображаються отримані заголовки HTTP. Вони були збережені у файлі завдяки опції [--output reponse.txt] команди [curl]:
dos>more reponse.txt
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Tue, 23 Mar 2004 07:54:22 GMT
Cache-Control: public
ETag: "1C410A504D60680:1C410A58621AD3E"
Content-Type: text/html
Content-Length: 161
Connection: Close
2.6.4. Висновок
На кількох прикладах ми розглянули структуру запиту веб-клієнта та відповіді, яку йому надає веб-сервер. Діалог відбувається за допомогою протоколу HTTP — набору команд у текстовому форматі, якими обмінюються обидва учасники. Запит клієнта та відповідь сервера мають однакову структуру, яка виглядає так:
У разі запиту (який часто називають «запитом») від клієнта частина [Document] зазвичай відсутня. Проте клієнт може надіслати документ на сервер. Для цього він використовує команду PUT. Дві типові команди для запиту ресурсу — це GET та POST. Остання буде розглянута трохи далі. Команда HEAD дозволяє запитувати лише заголовки HTTP. Команди GET та POST найчастіше використовуються веб-клієнтами типу браузера.
На запит клієнта сервер надсилає відповідь, що має таку саму структуру. Запитаний ресурс передається у частині [Document], за винятком випадків, коли команда клієнта була HEAD — у такому разі надсилаються лише заголовки HTTP.
2.7. Мова HTML
Веб-браузер може відображати різні документи, найпоширенішим з яких є документ HTML (HyperText Markup Language). Це текст, відформатований за допомогою тегів у формі <balise>texte</balise>. Так, тег <B>important</B> відображатиме важливий текст жирним шрифтом. Існують окремі теги, такі як тег <hr>, який відображає горизонтальну лінію. Ми не будемо розглядати теги, які можна знайти в тексті HTML. Існує чимало програм WYSIWYG, що дозволяють створити веб-сторінку, не написавши жодного рядка коду HTML. Ці інструменти автоматично генерують код HTML на основі макета, створеного за допомогою миші та попередньо визначених елементів управління. Таким чином, можна (за допомогою миші) вставити на сторінку таблицю, а потім переглянути код HTML, згенерований програмою, щоб дізнатися, які теги слід використовувати для визначення таблиці на веб-сторінці. Все дуже просто. Крім того, знання мови HTML є необхідним, оскільки динамічні веб-додатки повинні самостійно генерувати код HTML для надсилання веб-клієнтам. Цей код генерується програмно, і, звісно, потрібно знати, що саме слід згенерувати, щоб клієнт отримав бажану веб-сторінку.
Підсумовуючи, для початку веб-програмування зовсім не обов’язково знати мову HTML у повному обсязі. Однак ці знання є необхідними і їх можна здобути завдяки використанню програм для створення веб-сторінок на мові WYSIWYG, таких як Word, FrontPage, DreamWeaver та десятків інших. Ще один спосіб ознайомитися з тонкощами мови HTML — це переглядати веб-сторінки та вивчати їхній вихідний код, який містить цікаві та ще невідомі вам особливості.
2.7.1. Приклад
Розглянемо наступний приклад, створений за допомогою FrontPage Express — безкоштовного інструменту, що входить до складу Internet Explorer. Код, згенерований FrontPage, тут було спрощено. Цей приклад демонструє деякі елементи, які можна знайти у веб-документі, такі як:
- таблиця
- зображення
- посилання
Документ HTML має такий загальний вигляд:
Весь документ обмежений тегами <html>...</html>. Він складається з двох частин:
- <head>...</head>: це невидима частина документа. Вона надає інформацію браузеру, який буде відображати документ. У ній часто зустрічається тег <title>...</title>, який визначає текст, що відображатиметься у рядку заголовка браузера. Також тут можуть бути інші теги, зокрема ті, що визначають ключові слова документа, які згодом використовуються пошуковими системами. У цій частині також можуть міститися скрипти, найчастіше написані на JavaScript або VBScript, які будуть виконуватися браузером.
- <body атрибути>...</body>: це частина, яка відображатиметься браузером. Теги HTML, що містяться в цій частині, вказують браузеру «бажаний» візуальний вигляд документа. Кожен браузер інтерпретує ці теги по-своєму. Тому два браузери можуть по-різному відображати один і той самий веб-документ. Зазвичай це є однією з головних проблем веб-дизайнерів.
Код HTML нашого прикладу документа виглядає так:
<html>
<head>
<title>balises</title>
</head>
<body background="/images/standard.jpg">
<center>
<h1>Les balises HTML</h1>
<hr>
</center>
<table border="1">
<tr>
<td>cellule(1,1)</td>
<td valign="middle" align="center" width="150">cellule(1,2)</td>
<td>cellule(1,3)</td>
</tr>
<tr>
<td>cellule(2,1)</td>
<td>cellule(2,2)</td>
<td>cellule(2,3</td>
</tr>
</table>
<table border="0">
<tr>
<td>Une image</td>
<td><img border="0" src="/images/univ01.gif" width="80" height="95"></td>
</tr>
<tr>
<td>le site de l'ISTIA</td>
<td><a href="http://istia.univ-angers.fr">ici</a></td>
</tr>
</table>
</body>
</html>
У коді виділено лише ті моменти, які нас цікавлять:
Елементи | теги та приклади HTML |
<title>balises</title> balises з’явиться в адресному рядку браузера, який відображатиме документ | |
<hr>: відображає горизонтальну лінію | |
<атрибути таблиці>....</table>: для визначення таблиці <tr атрибути>...</tr>: для визначення рядка <td атрибути>...</td>: для визначення комірки приклади: <table border="1">...</table>: атрибут border визначає товщину межі таблиці <td valign="middle" align="center" width="150">клітинка(1,2)</td>: визначає клітинку, вміст якої буде клітинка(1,2). Цей вміст буде вирівняно по центру вертикально (valign="middle") та горизонтально (align="center"). Ширина клітинки становитиме 150 пікселів (width="150") | |
<img border="0" src="/images/univ01.gif" width="80" height="95">: визначає зображення без рамки (border="0"), висотою 95 пікселів (height="95"), шириною 80 пікселів (width="80"), вихідний файл якого знаходиться за адресою /images/univ01.gif на веб-сервері (src="/images/univ01.gif"). Це посилання міститься у веб-документі, який було отримано за допомогою URL http://localhost:81/html/balises.htm. Крім того, браузер завантажить файл URL http://localhost:81/images/univ01.gif, щоб отримати зображення, на яке тут є посилання. | |
<a href="http://istia.univ-angers.fr">тут</a>: робить текст ici посиланням на URL http://istia.univ-angers.fr. | |
<body background="/images/standard.jpg">: вказує, що зображення, яке має слугувати фоном сторінки, знаходиться за адресою URL /images/standard.jpg на веб-сервері. У контексті нашого прикладу браузер надішле запит на URL http://localhost:81/images/standard.jpg, щоб отримати це фонове зображення. |
З цього простого прикладу видно, що для побудови всього документа браузер повинен надіслати три запити на сервер:
- http://localhost:81/html/balises.htm, щоб отримати вихідний код HTML документа
- http://localhost:81/images/univ01.gif — щоб отримати зображення univ01.gif
- http://localhost:81/images/standard.jpg — щоб отримати фонове зображення standard.jpg
У наступному прикладі наведено веб-форму, також створену за допомогою FrontPage.
Код HTML, згенерований за допомогою FrontPage та дещо спрощений, виглядає так:
<html>
<head>
<title>balises</title>
<script language="JavaScript">
function effacer(){
alert("Vous avez cliqué sur le bouton Effacer");
}//видалити
</script>
</head>
<body background="/images/standard.jpg">
<form method="POST" >
<table border="0">
<tr>
<td>Etes-vous marié(e)</td>
<td>
<input type="radio" value="Oui" name="R1">Oui
<input type="radio" name="R1" value="non" checked>Non
</td>
</tr>
<tr>
<td>Cases à cocher</td>
<td>
<input type="checkbox" name="C1" value="un">1
<input type="checkbox" name="C2" value="deux" checked>2
<input type="checkbox" name="C3" value="trois">3
</td>
</tr>
<tr>
<td>Champ de saisie</td>
<td>
<input type="text" name="txtSaisie" size="20" value="qqs mots">
</td>
</tr>
<tr>
<td>Mot de passe</td>
<td>
<input type="password" name="txtMdp" size="20" value="unMotDePasse">
</td>
</tr>
<tr>
<td>Boîte de saisie</td>
<td>
<textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
</td>
</tr>
<tr>
<td>combo</td>
<td>
<select size="1" name="cmbValeurs">
<option>choix1</option>
<option selected>choix2</option>
<option>choix3</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix simple</td>
<td>
<select size="3" name="lst1">
<option selected>liste1</option>
<option>liste2</option>
<option>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix multiple</td>
<td>
<select size="3" name="lst2" multiple>
<option>liste1</option>
<option>liste2</option>
<option selected>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>
</td>
</tr>
<tr>
<td>bouton</td>
<td>
<input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()">
</td>
</tr>
<tr>
<td>envoyer</td>
<td>
<input type="submit" value="Envoyer" name="cmdRenvoyer">
</td>
</tr>
<tr>
<td>rétablir</td>
<td>
<input type="reset" value="Rétablir" name="cmdRétablir">
</td>
</tr>
</table>
<input type="hidden" name="secret" value="uneValeur">
</form>
</body>
</html>
Відповідність візуального елемента <--> тегу HTML така:
Перевірка | тег HTML |
<form method="POST" > | |
<input type="text" name="txtSaisie" size="20" value="кілька слів"> | |
<input type="password" name="txtMdp" size="20" value="unMotDePasse"> | |
<textarea rows="2" name="areaSaisie" cols="20"> рядок1 рядок 2 рядок3 </textarea> | |
<input type="radio" value="Так" name="R1">Так <input type="radio" name="R1" value="ні" checked>Ні | |
<input type="checkbox" name="C1" value="один">1 <input type="checkbox" name="C2" value="два" checked>2 <input type="checkbox" name="C3" value="три">3 | |
<select size="1" name="cmbValeurs"> <option>варіант1</option> <option selected>варіант 2</option> <option>варіант 3</option> </select> | |
<select size="3" name="lst1"> <option selected>список1</option> <option>список2</option> <option>список3</option> <option>список4</option> <option>список5</option> </select> | |
<select size="3" name="lst2" multiple> <option>список1</option> <option>список2</option> <option selected>список3</option> <option>список4</option> <option>список5</option> </select> | |
<input type="submit" value="Надіслати" name="cmdRenvoyer"> | |
<input type="reset" value="Скинути" name="cmdRétablir"> | |
<input type="button" value="Очистити" name="cmdEffacer" onclick="effacer()"> |
Давайте розглянемо ці різні елементи управління.
2.7.1.1. Форма
<form method="POST" > |
<form name="..." method="..." action="...">...</form> | |
name="frmexemple": ім'я форми method="..." : метод, який використовує браузер для надсилання на веб-сервер значень, зібраних у формі action="..." : URL, на яку будуть надіслані значення, зібрані у формі. Веб-форма оточена тегами <form>...</form>. Форма може мати ім’я (name="xx"). Це стосується всіх елементів управління, які можна знайти у формі. Це ім’я є корисним, якщо веб-документ містить скрипти, які повинні посилатися на елементи форми. Мета форми — зібрати інформацію, введену користувачем за допомогою клавіатури/миші, та надіслати її на веб-сервер URL. Який саме? Той, що вказаний в атрибуті action="URL". Якщо цей атрибут відсутній, інформація буде надіслана на сервер, на якому розміщений документ, у якому знаходиться форма. Саме так було б у наведеному вище прикладі. До цього моменту ми завжди розглядали веб-клієнта як того, хто «запитує» інформацію у веб-сервера, але ніколи — як того, хто «надає» йому інформацію. Як веб-клієнт передає інформацію (ту, що міститься у формі) веб-серверу? Ми детально розглянемо це трохи пізніше. Він може використовувати два різні методи, які називаються POST та GET. Атрибут method="méthode", у якому метод дорівнює GET або POST, тегу <form> вказує браузеру, який метод слід використовувати для надсилання інформації, зібраної у формі, до URL, вказаного атрибутом action="URL". Якщо атрибут method не вказано, за замовчуванням використовується метод GET. |
2.7.1.2. Поле введення
<input type="text" name="txtSaisie" size="20" value="кілька слів"> <input type="password" name="txtMdp" size="20" value="unMotDePasse"> |
<input type="..." name="..." size=".." value=".."> Тег `input` використовується для різних елементів управління. Саме атрибут type дозволяє розрізняти ці різні елементи управління між собою. | |
type="text": вказує, що це поле введення type="password": символи у полі введення замінюються на символи *. Це єдина відмінність від звичайного поля введення. Цей тип елемента управління підходить для введення паролів. size="20": кількість символів, що відображаються у полі — не обмежує введення більшої кількості символів name="txtSaisie": ім’я елемента управління value="кілька слів" : текст, який відображатиметься у полі введення. |
2.7.1.3. Багаторядкове поле введення
<textarea rows="2" name="areaSaisie" cols="20"> ligne1 ligne2 ligne3 </textarea> |
<textarea ...>текст</textarea> відображає багаторядкове поле введення, яке спочатку містить текст | |
rows="2": кількість рядків cols="'20" : кількість стовпців name="areaSaisie": ім'я елемента управління |
2.7.1.4. Радіо-кнопки
<input type="radio" value="Так" name="R1">Так <input type="radio" name="R1" value="no" checked>Ні |
<input type="radio" атрибут2="значення2" ....>текст відображає перемикач із текстом поруч. | |
name="radio": ім'я елемента управління. Перемикачі з однаковим ім'ям утворюють групу, елементи якої взаємовиключні: можна вибрати лише один із них. value="значення": значення, присвоєне радіо-кнопці. Не слід плутати це значення з текстом, що відображається поруч із радіо-кнопкою. Останній призначений лише для відображення. checked: якщо це ключове слово присутнє, перемикач позначений, інакше — ні. |
2.7.1.5. Поля для позначення
<input type="checkbox" name="C1" value="один">1 <input type="checkbox" name="C2" value="два" checked>2 <input type="checkbox" name="C3" value="три">3 |
<input type="checkbox" attribut2="valeur2" ....>текст відображає прапорець із текстом поруч. | |
name="C1": ім'я елемента управління. Поля для позначення можуть мати однакове ім'я або ні. Поля з однаковим ім'ям утворюють групу пов'язаних полів. value="значення": значення, присвоєне прапорцю. Не слід плутати це значення з текстом, що відображається поруч із перемикачем. Останній призначений лише для відображення. checked: якщо цей ключовий параметр присутній, перемикач позначений, інакше — ні. |
2.7.1.6. Список, що розгортається (комбо)
<select size="1" name="cmbValeurs"> <option>choix1</option> <option selected>вибір2</option> <option>choix3</option> </select> |
<select size=".." name=".."> <option [selected]>...</option> ... </select> відображає у списку тексти, що містяться між тегами <option>...</option> | |
name="cmbValeurs" — назва елемента управління. size="1": кількість видимих елементів списку. size="1" перетворює список на комбінований список. selected: якщо це ключове слово вказано для елемента списку, він відображається у списку як вибраний. У нашому прикладі вище елемент списку choix2 відображається як вибраний елемент комбінованого списку, коли той з’являється вперше. |
2.7.1.7. Список з одним вибором
<select size="3" name="lst1"> <option selected>список1</option> <option>liste2</option> <option>liste3</option> <option>liste4</option> <option>liste5</option> </select> |
<select size=".." name=".."> <option [selected]>...</option> ... </select> відображає у списку тексти, що містяться між тегами <option>...</option> | |
ті самі, що й для випадаючого списку, який відображає лише один елемент. Цей елемент управління відрізняється від попереднього випадаючого списку лише атрибутом size>1. |
2.7.1.8. Список із можливістю множинного вибору
<select size="3" name="lst2" multiple> <option selected>список1</option> <option>liste2</option> <option selected>список3</option> <option>liste4</option> <option>liste5</option> </select> |
<select size=".." name=".." multiple> <option [selected]>...</option> ... </select> відображає у списку тексти, що містяться між тегами <option>...</option> | |
multiple: дозволяє вибрати кілька елементів зі списку. У наведеному вище прикладі вибрано обидва елементи: liste1 та liste3. |
2.7.1.9. Кнопка типу button
<input type="button" value="Очистити" name="cmdEffacer" onclick="effacer()"> |
<input type="button" value="..." name="..." onclick="effacer()" ....> | |
type="button": визначає елемент управління «кнопка». Існують ще два типи кнопок: submit та reset. value="Очистити": текст, що відображається на кнопці onclick="функція()" : дозволяє визначити функцію, яка має виконуватися, коли користувач натискає на кнопку. Ця функція є частиною скриптів, визначених у відображеному веб-документі. Наведений вище синтаксис відповідає синтаксису javascript. Якщо скрипти написані на VBScript, слід вказати onclick="функція" без дужок. Синтаксис залишається таким самим, якщо потрібно передати параметри до функції: onclick="функція(val1, val2,...)" У нашому прикладі клік на кнопку Effacer викликає таку функцію JavaScript effacer: Функція effacer виводить таке повідомлення:  |
2.7.1.10. Кнопка типу «submit»
<input type="submit" value="Надіслати" name="cmdRenvoyer"> |
<input type="submit" value="Надіслати" name="cmdRenvoyer"> | |
type="submit": визначає кнопку як кнопку відправлення даних форми на веб-сервер. Коли клієнт натисне на цю кнопку, браузер надішле дані форми на URL, визначений в атрибуті action тегу <form>, відповідно до методу, визначеного атрибутом method цього ж тегу. value="Відправити": текст, що відображається на кнопці |
2.7.1.11. Кнопка типу «reset»
<input type="reset" value="Скинути" name="cmdRétablir"> |
<input type="reset" value="Скинути" name="cmdRétablir"> | |
type="reset": визначає кнопку як кнопку скидання форми. Коли клієнт натисне на цю кнопку, браузер поверне форму до того стану, в якому він її отримав. value="Скинути" : текст, що відображається на кнопці |
2.7.1.12. Приховане поле
<input type="hidden" name="secret" value="uneValeur"> |
<input type="hidden" name="..." value="..."> | |
type="hidden": вказує, що це приховане поле. Приховане поле є частиною форми, але не відображається користувачеві. Однак, якщо користувач попросить свій браузер показати вихідний код, він побачить тег <input type="hidden" value="..."> і, отже, значення прихованого поля. value="uneValeur": значення прихованого поля. У чому полягає користь прихованого поля? Воно дозволяє веб-серверу зберігати інформацію під час послідовних запитів клієнта. Розглянемо приклад веб-додатку для покупок. Клієнт купує перший товар art1 у кількості q1 на першій сторінці каталогу, а потім переходить на нову сторінку каталогу. Щоб запам’ятати, що клієнт придбав q1 товарів art1, сервер може помістити ці дві інформації в приховане поле веб-форми на новій сторінці. На цій новій сторінці клієнт купує товари q2 та art2. Коли дані цієї другої форми будуть надіслані на сервер (submit), сервер отримає не тільки інформацію (q2, art2), а й (q1, art1), яка також є частиною форми як приховане поле, яке користувач не може змінювати. Потім веб-сервер помістить у нове приховане поле дані (q1,art1) та (q2,art2) і надішле нову сторінку каталогу. І так далі. |
2.7.2. Відправлення веб-клієнтом значень форми на веб-сервер
У попередньому розділі ми зазначили, що веб-клієнт має два методи для надсилання на веб-сервер значень форми, яку він відобразив: методи GET та POST. Розглянемо на прикладі різницю між цими двома методами. Сторінка, яку ми розглядали раніше, є статичною. Щоб отримати доступ до заголовків HTTP, надісланих браузером, який запитує цей документ, ми перетворюємо її на динамічну сторінку для веб-сервера .NET (IIS або Cassini). Тут мова йде не про технологію .NET, яка буде розглянута в наступному розділі, а про обмін даними між клієнтом і сервером. Код сторінки ASP.NET такий:
<%@ Page Language="vb" CodeBehind="params.aspx.vb" AutoEventWireup="false" Inherits="ConsoleApplication1.params" %>
<script runat="server">
Private Sub Page_Init(Byval Sender as Object, Byval e as System.EventArgs)
' зберегти запит
saveRequest
end sub
Private Sub saveRequest
' зберігає поточний запит у request.txt у папці сторінки
dim requestFileName as String=Me.MapPath(Me.TemplateSourceDirectory)+"\request.txt"
Me.Request.SaveAs(requestFileName,true)
end sub
</script>
<html>
<head>
<title>balises</title>
<script language="JavaScript">
function effacer(){
alert("Vous avez cliqué sur le bouton Effacer");
}//видалити
</script>
</head>
<body background="/images/standard.jpg">
....
</body>
</html>
До вмісту HTML досліджуваної сторінки ми додаємо фрагмент коду у форматі VB.NET. Ми не будемо коментувати цей код, окрім того, що при кожному виклику вищезазначеного документа веб-сервер зберігатиме запит веб-клієнта у файлі [request.txt] у папці викликуваного документа.
2.7.2.1. Метод GET
Проведемо перший тест, у якому в коді HTML документа тег FORM визначено таким чином:
<form method="get">
Попередній документ (HTML + код VB) називається [params.aspx]. Він розміщений у дереві каталогів веб-сервера .NET (IIS/Cassini) і викликається за URL-адресою http://localhost/aspnet/chap1/params.aspx:
Браузер щойно надіслав запит, і ми знаємо, що він було збережено у файлі [request.txt]. Давайте подивимося на його вміст:
GET /aspnet/chap1/params.aspx HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113
Ми бачимо елементи, які вже зустрічалися у клієнта [curl]. Інші з’являються вперше:
клієнт просить сервер не закривати з’єднання після його відповіді. Це дозволить йому використовувати те саме з’єднання для наступного запиту. З’єднання не залишається відкритим нескінченно. Сервер закриє його після занадто тривалого періоду бездіяльності. | |
тривалість у секундах, протягом якої з’єднання [Keep-Alive] залишатиметься відкритим | |
Категорія символів, з якими клієнт може працювати | |
Список мов, яким віддає перевагу клієнт. |
Ми заповнюємо форму наступним чином:
Ми використовуємо кнопку [Envoyer], розташовану вище. Її код HTML такий:
При натисканні кнопки типу [Submit] браузер надсилає параметри форми (тег <form>) на URL, вказаний в атрибуті [action] тегу <form action="URL">, якщо він існує. Якщо цей атрибут відсутній, параметри форми надсилаються на URL, який видав форму. Саме так і відбувається в даному випадку. Отже, натискання кнопки [Envoyer] має призвести до надсилання браузером запиту до URL [http://localhost/aspnet/chap1/params.aspx] із передачею параметрів форми. Оскільки сторінка [params.aspx] запам’ятовує отриманий запит, ми повинні дізнатися, як клієнт передав ці параметри. Спробуємо. Натискаємо кнопку [Envoyer]. Отримуємо таку відповідь від браузера:
Це початкова сторінка, але можна помітити, що значення URL у полі [Adresse] браузера змінилося. Воно стало таким:
http://localhost/aspnet/chap1/params.aspx?R1=Так&C1=один&C2=два&txtSaisie=веб-програмування&txtMdp=це+таємниця&areaSaisie=основи+0D%0Aвеб-програмування&cmbValeurs=вибір3&lst1=список3&lst2=список1&lst2=список3&cmdRenvoyer=Надіслати&secret=uneValeur
Можна побачити, що вибір, зроблений у формі, відображається у URL. Давайте розглянемо вміст файлу [request.txt], який зберіг запит клієнта:
GET /aspnet/chap1/params.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/aspnet/chap1/params.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113
Ми бачимо запит HTTP, який досить схожий на той, що спочатку надсилав браузер, коли запитував документ без передачі параметрів. Є дві відмінності:
Параметри форми були додані після URL документа у вигляді ?param1=val1¶m2=val2&... | |
за допомогою цього заголовка HTTP клієнт вказує URL документа, який він переглядав під час надсилання запиту |
Давайте детальніше розглянемо, як параметри були передані в запиті GET URL?param1=значення1¶m2=значення2&... HTTP/1.1, де parami — це імена елементів управління веб-форми, а «значення» — відповідні їм значення. Нижче наведено таблицю з трьома стовпцями:
- 1-й стовпець: містить визначення елемента управління HTML із прикладу
- 2-й стовпець: відображення цього елемента управління в браузері
- стовпець 3: містить значення, яке браузер надсилає на сервер для елемента управління зі стовпця 1 у тому вигляді, в якому воно міститься у запиті GET з прикладу
елемент управління HTML | візуальна частина | повернуте значення (значення) |
<input type="radio" value="Так" name="R1">Так <input type="radio" name="R1" value="ні" checked>Ні |  | R1=Так - значення атрибута value радіо-кнопки, яку вибрав користувач. |
<input type="checkbox" name="C1" value="один">1 <input type="checkbox" name="C2" value="два" checked>2 <input type="checkbox" name="C3" value="три">3 |  | C1=один C2=два - значення атрибутів value полів, позначених користувачем |
<input type="text" name="txtSaisie" size="20" value="кілька слів"> |  | txtSaisie=веб-програмування - текст, введений користувачем у поле введення. Пробіли замінено на знак + |
<input type="password" name="txtMdp" size="20" value="unMotDePasse"> |  | txtMdp=цесекрет - текст, введений користувачем у поле введення |
<textarea rows="2" name="areaSaisie" cols="20"> рядок1 рядок 2 рядок3 </textarea> |  | areaSaisie=основи+%0D%0A веб-програмування+ - текст, введений користувачем у поле введення. %OD%OA — це позначка кінця рядка. Пробіли замінено на знак + |
<select size="1" name="cmbValeurs"> <option>вибір1</option> <option selected>варіант2</option> <option>варіант3</option> </select> |  | cmbValeurs=варіант3 - значення, обране користувачем у списку з одним варіантом вибору |
<select size="3" name="lst1"> <option selected>список1</option> <option>список2</option> <option>список3</option> <option>список4</option> <option>список5</option> </select> |  | lst1=список3 - значення, вибране користувачем зі списку з одним вибором |
<select size="3" name="lst2" multiple> <option selected>список1</option> <option>список2</option> <option selected>список3</option> <option>список4</option> <option>список5</option> </select> |  | lst2=список1 lst2=список3 - значення, вибрані користувачем зі списку з можливістю множинного вибору |
<input type="submit" value="Надіслати" name="cmdRenvoyer"> | cmdRenvoyer=Надіслати - ім'я та атрибут value кнопки, яка використовувалася для надсилання даних форми на сервер | |
<input type="hidden" name="secret" value="uneValeur"> | secret=значення - атрибут value прихованого поля |
Можна запитати, що сервер зробив із параметрами, які йому передали. Насправді нічого. Після отримання команди
GET /aspnet/chap1/params.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
веб-сервер передав параметри URL у документ http://localhost/aspnet/chap1/params.aspx, а c.a.d — у документ, який ми створили спочатку. Ми не написали жодного коду для отримання та обробки параметрів, які надсилає нам клієнт. Тому все відбувається так, ніби запит клієнта був просто таким:
Саме з цієї причини у відповідь на натискання нашої кнопки [Envoyer] ми отримали ту саму сторінку, що й спочатку при запиті URL [http://localhost/aspnet/chap1/params.aspx] без параметрів.
2.7.2.2. Метод POST
Документ HTML тепер налаштований таким чином, що браузер використовує метод POST для надсилання значень форми на веб-сервер:
Ми запитуємо новий документ за допомогою URL [http://localhost/aspnet/chap1/params.aspx], заповнюємо форму так само, як для методу GET, і передаємо параметри на сервер за допомогою кнопки [Envoyer]. Ми отримуємо від сервера таку сторінку відповіді:
Отже, ми отримуємо той самий результат, що й у разі використання методів GET та c.a.d — початкову сторінку. Можна помітити одну відмінність: у полі [Adresse] браузера передані параметри не відображаються. Тепер розглянемо запит, надісланий клієнтом і збережений у файлі [request.txt]:
POST /aspnet/chap1/params.aspx HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Content-Length: 210
Content-Type: application/x-www-form-urlencoded
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/aspnet/chap1/params.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113
R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecrey&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur
У запиті клієнта HTTP з’являються нові елементи:
запит GET замінено на запит POST. Параметри більше не містяться в першому рядку запиту. Можна помітити, що тепер вони розміщені після запиту HTTP, після порожнього рядка. Їхнє кодування ідентичне тому, яке вони мали в запиті GET. | |
кількість «відправлених» символів, c.a.d. Кількість символів, яку веб-сервер повинен прочитати після отримання заголовків HTTP, щоб отримати документ, який надсилає йому клієнт. У даному випадку цим документом є список значень форми. | |
вказує тип документа, який клієнт надішле після заголовків HTTP. Тип [application/x-www-form-urlencoded] вказує, що це документ, який містить значення форми. |
Існує два методи передачі даних на веб-сервер: GET та POST. Чи є один із цих методів кращим за інший? Ми бачили, що якщо значення форми надсилалися браузером за допомогою методу GET, браузер відображав у своєму полі Adresse запитуване значення URL у формі URL?param1=val1¶m2=val2&.... Це можна розглядати як перевагу або недолік:
- перевагою, якщо ми хочемо дозволити користувачеві додати цей налаштований URL до своїх улюблених посилань
- недолік, якщо ми не хочемо, щоб користувач мав доступ до певної інформації у формі, наприклад, до прихованих полів
Надалі ми будемо використовувати у своїх формах майже виключно метод POST.
2.8. Conclusion
У цьому розділі було представлено різні базові концепції веб-розробки:
- різні доступні інструменти та технології (Java, ASP, asp.net, PHP, Perl, VBScript, JavaScript)
- обмін даними між клієнтом і сервером за допомогою протоколу HTTP
- розробка документа за допомогою мови HTML
- створення форм для введення даних
На прикладі ми побачили, як клієнт може надсилати інформацію на веб-сервер. Ми не розглядали, як сервер може
- отримувати цю інформацію
- обробити її
- надіслати клієнту динамічну відповідь, що залежить від результату обробки
Це сфера веб-програмування, яку ми розглянемо в наступному розділі, де буде представлено технологію ASP.NET.