Skip to content

2. Основи веб-програмування

Основна мета цього розділу — ознайомити читача з основними принципами веб-програмування, які не залежать від конкретної технології, що використовується для їх реалізації. У ньому наведено чимало прикладів, які рекомендується випробувати, щоб поступово «ввібратися» у філософію веб-розробки. Читач, який вже володіє цими знаннями, може перейти безпосередньо до наступного розділу.

Складові веб-додатку такі:

Image

Номер
Роль
Поширені приклади
1
OS Сервер
Unix, Linux, Windows
2
Веб-сервер
Apache (Unix, Linux, Windows)
IIS (Windows + платформа .NET)
Node.js (Unix, Linux, Windows)
3
Код, що виконується на стороні сервера. Він може виконуватися модулями сервера або програмами, зовнішніми щодо сервера (CGI).
JAVASCRIPT (Node.js)
PHP (Apache, IIS)
JAVA (Tomcat, Websphere, JBoss, Weblogic, ...)
C#, VB.NET (IIS)
4
База даних — вона може розміщуватися на тому самому комп’ютері, що й програма, яка її використовує, або на іншому комп’ютері через Інтернет.
Oracle (Linux, Windows)
MySQL (Linux, Windows)
Postgres (Linux, Windows)
SQL Server (Windows)
5
OS Клієнт
Unix, Linux, Windows
6
Веб-браузер
Chrome, Internet Explorer, Firefox, Opera, Safari, ...
7
Скрипти, що виконуються на стороні клієнта в браузері. Ці скрипти не мають доступу до дисків клієнтського комп'ютера.
JavaScript (усі браузери)

2.1. Обмін даними у веб-додатку з використанням форми

Image

Номер
Роль
1
Браузер вперше надсилає запит URL на (http://machine/url). Параметри не передаються.
2
Веб-сервер надсилає йому веб-сторінку з цим URL. Вона може бути статичною або динамічно згенерованою серверним скриптом (SA), який міг використовувати вміст баз даних (SB, SC). У цьому випадку скрипт виявить, що запит на URL надійшов без передачі параметрів, і згенерує початкову веб-сторінку.
Браузер отримує сторінку та відображає її (CA). Скрипти на стороні браузера (CB) могли змінити початкову сторінку, надіслану сервером. Потім у результаті взаємодії між користувачем (CD) та скриптами (CB) веб-сторінка буде змінена. Зокрема, будуть заповнені форми.
3
Користувач підтверджує дані форми, які потім мають бути надіслані на веб-сервер. Браузер повторно запитує початкову сторінку URL або іншу, залежно від обставин, і одночасно передає серверу значення з форми. Для цього він може використовувати два методи, що називаються GET та POST. Отримавши запит від клієнта, сервер запускає скрипт (SA), пов’язаний із запитаним URL, який виявляє параметри та обробляє їх.
4
Сервер видає веб-сторінку, створену за допомогою програми (SA, SB, SC). Цей етап ідентичний попередньому етапу 2. Обмін даними тепер відбувається відповідно до етапів 2 та 3.

2.2. Статичні веб-сторінки, динамічні веб-сторінки

Статична сторінка представлена файлом HTML. Динамічна сторінка — це сторінка HTML, яка генерується «на льоту» веб-сервером.

2.2.1. Статична сторінка HTML (мова розмітки HyperText)

Створимо перший веб-проект за допомогою Visual Studio Express 2012. Використаємо опцію [Fichier / Nouveau projet]:

  • у [1] вказуємо, що хочемо створити порожню програму ASP.NET;
  • у [2] — ім’я рішення Visual Studio. Усі приклади в цьому документі будуть у тому самому рішенні;
  • у [3] — батьківська папка проекту, що буде створено;
  • у полі [4] — вкажіть ім’я проекту.

Натискаємо «ОК».

Отриманий проект представлено у [5]. Ми будемо використовувати його для ілюстрації основних принципів веб-програмування.

Почнемо зі створення статичної сторінки HTML:

  • у [1], клацніть правою кнопкою миші на проекті, а потім дотримуйтесь вказівок;
  • в [2], дайте назву сторінці;
  • у [3] — сторінка додана.

Вміст створеної сторінки такий:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

</body>
</html>
  • рядки 2–10: код обмежується кореневим тегом <html>;
  • рядки 3–6: тег <head> обмежує так званий заголовок сторінки;
  • рядки 7–9: тег <body> обмежує так званий основний вміст сторінки.

Змінимо цей код наступним чином:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>
  • рядок 5: визначає заголовок сторінки — він відображатиметься як заголовок вікна браузера, у якому відкрито сторінку;
  • рядок 8: текст, виділений жирним шрифтом (<h1>).

Переглянемо цю сторінку в браузері:

  • у [1] запитується перегляд сторінки;
  • у [2] — URL переглянутої сторінки;
  • у [3] — заголовок вікна, який було надано тегом <title> на сторінці;
  • у [4] — основний текст сторінки, який було отримано з тегу <h1>.

Розглянемо [1] — код HTML, отриманий браузером:

  • у [2] браузер отримав сторінку HTML, яку ми створили. Він її інтерпретував і перетворив на графічне зображення.

2.2.2. Сторінка ASP.NET

Тепер створимо сторінку ASP.NET. Це сторінка HTML, яка може містити код, що виконується на стороні сервера і генерує певні частини сторінки. Ми дотримуємося підходу, аналогічного тому, що використовувався при створенні сторінки HTML:

  • у [1] викликається сторінка ASP.NET, а в [Web Form] — сторінка [1];
  • в [2], новій сторінці присвоюється ім’я;
  • у [3] сторінка створена.

Код створеної сторінки такий:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Тут ми бачимо теги HTML, з якими вже стикалися раніше. Теги, що мають атрибут [runat= "server "], — це теги, які будуть оброблені сервером і перетворені на чисті теги HTML. Отже, те, що ми бачимо вище, не є, як у випадку з попередньою статичною сторінкою, кодом HTML, який отримає браузер. У цьому випадку йдеться про динамічну сторінку: потік HTML, що надсилається на сервер, генерується кодом, який виконується на стороні сервера. Змінимо сторінку наступним чином:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Démo asp.net</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <h1>Il est <% =DateTime.Now.ToString("hh:mm:ss") %></h1>
    </div>
  </form>
</body>
</html>
  • рядок 8: задаємо заголовок сторінки;
  • рядок 13: виводимо текст, згенерований кодом C#. Цей код знаходиться між тегами <% %>. Цей код C# виводить поточний час у форматі години:хвилини:секунди.

Відкриємо цю сторінку в браузері:

  • у [1] ми запитуємо перегляд сторінки;
  • у [2] — URL переглянутої сторінки;
  • у [3] — заголовок вікна, який було надано тегом <title> сторінки;
  • у [4] — основний текст сторінки, який було отримано з тегу <h1>.

Якщо оновити сторінку (F5), ми отримаємо інше відображення (новий час), тоді як URL не змінюється. Це і є динамічний аспект сторінки: її вміст може змінюватися з плином часу. Тепер розглянемо код HTML, отриманий браузером:

  • у [1] ми бачимо вихідний код сторінки;
  • у [2]: цього разу отриманий код HTML — це не той, який ми створили, а той, що був згенерований веб-сервером на основі інформації з нашої сторінки ASP.NET.

2.2.3. Висновок

З вищесказаного слід винести висновок про принципово різну природу динамічних і статичних сторінок.

2.3. Скрипти на стороні браузера

Сторінка HTML може містити скрипти, які будуть виконуватися браузером. Наразі (вересень 2013 року) основною мовою скриптів на стороні браузера є JavaScript. Для полегшення роботи розробників на цій мові створено сотні бібліотек.

Створимо нову сторінку HTML [1] у вже створеному проєкті:

Відредагуємо файл [HtmlPage2.html], додавши до нього такий вміст:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>exemple Javascript</title>
  <script type="text/javascript">
    function réagir() {
      alert("Vous avez cliqué sur le bouton !");
    }
  </script>
</head>
<body>
  <input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>
  • рядок 13: визначає кнопку (атрибут type) з текстом «Натисніть мене» (атрибут value). При натисканні на неї виконується функція JavaScript [réagir] (атрибут onclick);
  • рядки 6–10: скрипт JavaScript;
  • рядки 7–9: функція [réagir];
  • рядок 8: відображає діалогове вікно з повідомленням [Vous avez cliqué sur le bouton].

Переглянемо сторінку в браузері:

  • у [1] — відображена сторінка;
  • на [2] — діалогове вікно, що з’являється при натисканні кнопки.

При натисканні на кнопку обмін даними з сервером не відбувається. Код JavaScript виконується браузером.

Завдяки величезній кількості доступних бібліотек JavaScript тепер можна вбудовувати у браузер повноцінні додатки. Тому спостерігається тенденція до використання таких архітектур:

  • 1–4: сервер HTML — це сервер статичних сторінок HTML5 / CSS / JavaScript;
  • 5–6: сторінки HTML5 / CSS / JavaScript, що видаються, безпосередньо взаємодіють із сервером даних. Цей сервер видає виключно дані без оформлення HTML. Саме Javascript вставляє їх у сторінки HTML, які вже відкриті в браузері.

У такій архітектурі код JavaScript може стати об’ємним. Тому його намагаються структурувати за рівнями, як це робиться для серверного коду:

  • шар [UI] взаємодіє з користувачем;
  • шар [DAO] взаємодіє з сервером даних;
  • шар [métier] об’єднує бізнес-процедури, які не взаємодіють ані з користувачем, ані з сервером даних. Цей шар може бути відсутнім.

2.4. Взаємодія «клієнт-сервер»

Повернімося до нашої початкової схеми, яка ілюструвала учасників веб-додатку:

Image

Тут нас цікавить обмін даними між клієнтським і серверним комп’ютерами. Він відбувається через мережу, і варто нагадати загальну структуру обміну даними між двома віддаленими комп’ютерами.

2.4.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: визначення маршруту, яким має пройти інформація, щоб дістатися до адресата.
Транспортний рівень
Забезпечує зв’язок між двома додатками, тоді як попередні рівні дозволяли лише зв’язок між комп’ютерами. Однією зі служб, що надаються цим рівнем, може бути мультиплексування: транспортний рівень може використовувати одне й те саме мережеве з’єднання (між комп’ютерами) для передачі інформації, що належить кільком додаткам.
Сесія
У цьому рівні містяться послуги, що дозволяють додатку відкривати та підтримувати робочу сесію на віддаленому комп’ютері.
Представлення
Вона спрямована на уніфікацію представлення даних на різних машинах. Таким чином, дані, що надходять з машини А, будуть «оформлені» шаром Présentation машини А відповідно до стандартного формату перед відправкою в мережу. Потрапивши на рівень Présentation комп’ютера-одержувача B, який розпізнає їх завдяки стандартному формату, дані будуть «оформлені» іншим чином, щоб програма на комп’ютері B могла їх розпізнати.
Застосування
На цьому рівні знаходяться додатки, які зазвичай знаходяться найближче до користувача, такі як електронна пошта або передача файлів.

2.4.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, за допомогою якого машини обмінюються рядками тексту в мережі для взаєморозуміння. Цей обмін стандартизований, тобто клієнт має у своєму розпорядженні певну кількість повідомлень, щоб точно вказати серверу, чого він хоче, а сервер також має певну кількість повідомлень, щоб надати клієнту відповідь. Цей обмін повідомленнями має такий вигляд:

Image

Клієнт --> Сервер

Коли клієнт надсилає запит до веб-сервера, він надсилає

  1. рядки тексту у форматі HTTP, щоб вказати, чого він хоче;
  2. порожній рядок;
  3. за бажанням — документ.

Сервер --> Клієнт

Коли сервер надсилає відповідь клієнту, він надсилає

  1. рядки тексту у форматі HTTP, щоб вказати, що саме він надсилає;
  2. порожній рядок;
  3. опціонально — документ.

Отже, обмін даними має однакову форму в обох напрямках. В обох випадках може відбуватися надсилання документа, хоча клієнт рідко надсилає документ на сервер. Але протокол HTTP це передбачає. Саме це дозволяє, наприклад, абонентам інтернет-провайдера завантажувати різноманітні документи на свій особистий сайт, розміщений у цього провайдера. Обмінювані документи можуть бути будь-якими. Розглянемо браузер, який запитує веб-сторінку, що містить зображення:

  1. браузер підключається до веб-сервера та запитує потрібну сторінку. Запитані ресурси однозначно позначаються за допомогою URL (Uniform Resource Locator). Браузер надсилає лише заголовки HTTP, а не сам документ.
  2. Сервер відповідає йому. Спочатку він надсилає заголовки HTTP, що вказують, який тип відповіді він надсилає. Це може бути повідомлення про помилку, якщо запитувана сторінка не існує. Якщо сторінка існує, сервер у заголовках HTTP своєї відповіді вкаже, що після них він надішле документ HTML (HyperText Markup Language). Цей документ — це послідовність рядків тексту у форматі HTML. Текст у форматі HTML містить теги (маркери), які надають браузеру вказівки щодо способу відображення тексту.
  3. Клієнт, виходячи з заголовків HTTP сервера, знає, що отримає документ HTML. Він проаналізує цей документ і, можливо, виявить, що той містить посилання на зображення. Ці зображення відсутні в документі HTML. Тому він надсилає новий запит на той самий веб-сервер, щоб отримати перше зображення, яке йому потрібно. Цей запит ідентичний тому, що був зроблений у пункті 1, за винятком того, що запитуваний ресурс інший. Сервер обробить цей запит, надіславши клієнту запитане зображення. Цього разу у відповіді заголовки HTTP вкажуть, що надісланий документ є зображенням, а не документом HTML.
  4. Клієнт отримує надіслане зображення. Етапи 3 і 4 повторюватимуться доти, доки клієнт (зазвичай веб-браузер) не отримає всі документи, необхідні для відображення сторінки в повному обсязі.

2.4.3. Протокол HTTP

Розглянемо протокол HTTP на прикладах. Які дані обмінюються браузер і веб-сервер?

Веб-сервіс або сервіс HTTP — це сервіс TCP-IP, який зазвичай працює на порту 80. Він може працювати й на іншому порту. У цьому випадку браузер-клієнт буде змушений вказати цей порт у запиті URL. Запит URL має такий загальний вигляд:

протокол://комп'ютер[:port]/шлях/інформація

де

протокол
http для веб-сервісу. Браузер також може виступати клієнтом для сервісів ftp, news, telnet тощо.
машина
ім’я машини, на якій працює веб-сервіс
порт
порту веб-сервісу. Якщо це 80, номер порту можна опустити. Це найпоширеніший випадок
шлях
шлях, що вказує на запитуваний ресурс
додаткова інформація
додаткова інформація, що надається серверу для уточнення запиту клієнта

Що робить браузер, коли користувач запитує завантаження URL?

  1. він відкриває канал зв'язку TCP-IP із машиною та портом, вказаними в частині machine[:port] файлу URL. Встановити з'єднання TCP-IP означає створити «канал» зв'язку між двома машинами. Після створення цього каналу вся інформація, що обмінюється між двома машинами, буде проходити через нього. Створення цього каналу TCP-IP ще не передбачає використання веб-протоколу HTTP.
  2. Після створення каналу TCP-IP клієнт надсилає запит до веб-сервера, відправляючи йому рядки тексту (команди) у форматі HTTP. Він надсилає серверу частину «шлях/інформація» з URL
  3. сервер відповість йому таким самим чином і через той самий канал
  4. один із двох учасників прийме рішення про закриття каналу. Це залежить від використовуваного протоколу HTTP. З протоколом HTTP 1.0 сервер закриває з’єднання після кожної своєї відповіді. Це змушує клієнта, який повинен зробити кілька запитів для отримання різних документів, що складають веб-сторінку, відкривати нове з’єднання для кожного запиту, що пов’язано з витратами. З протоколом HTTP/1.1 клієнт може вказати серверу залишити з’єднання відкритим, доки він не дасть команду його закрити. Таким чином, він може завантажити всі документи веб-сторінки за допомогою одного з’єднання та самостійно закрити його після отримання останнього документа. Сервер виявить це закриття і також закриє з’єднання.

Щоб дослідити обмін даними між клієнтом і веб-сервером, ми скористаємося розширенням [Advanced Rest Client] для браузера Chrome, яке ми встановили в розділі 1.3. Ми опинимося в такій ситуації:

Image

Веб-сервер може бути будь-яким. Наша мета — проаналізувати обмін даними, що відбуватиметься між браузером і веб-сервером. Раніше ми створили таку статичну сторінку HTML:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

яку ми переглядаємо у браузері:

 

Бачимо, що запитувана сторінка URL має адресу: http://localhost:56376/HtmlPage1.html. Отже, сервер веб-служби — це localhost (=локальний комп’ютер), а порт — 56376. Скористаємося додатком [Advanced Rest Client], щоб звернутися до того самого URL:

  • у [1] запускаємо додаток (у вкладці [Applications] нової вкладки Chrome);
  • у [2] вибираємо опцію [Request];
  • у [3] вказуємо сервер, до якого звертаємося: http://localhost:56376;
  • у [4] вкажіть запитуваний URL: /HtmlPage1.html;
  • у [5] додаються можливі параметри до URL. Тут їх немає;
  • у [6] вказується команда HTTP, яка використовується для запиту, у даному випадку GET.

У результаті отримуємо такий запит:

Підготовлений таким чином запит [7] надсилається на сервер за допомогою [8]. Отримана відповідь має такий вигляд:

Вище ми зазначали, що обмін даними між клієнтом і сервером має такий вигляд:

Image

  • у [1] ми бачимо заголовки HTTP, надіслані браузером у його запиті. У нього не було документа для надсилання;
  • у [2] ми бачимо заголовки HTTP, надіслані сервером у відповіді. У [3] ми бачимо документ, який він надіслав.

У [3] можна впізнати статичну сторінку HTML, яку ми розмістили на веб-сервері.

Розглянемо запит HTTP від браузера:

1
2
3
4
5
6
GET /HtmlPage1.html HTTP/1.1 
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
Content-Type: text/plain; charset=utf-8 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
  • 1-й рядок не відображався додатком;
  • рядок 2: браузер ідентифікується за допомогою заголовка [User-Agent];
  • рядок 3: браузер вказує, що надсилає серверу текстовий документ (text/plain) у форматі UTF-8. Насправді тут браузер не надіслав жодного документа;
  • рядок 4: браузер вказує, що приймає у відповідь будь-який тип документа;
  • рядок 5: браузер вказує формати документів, які він приймає;
  • рядок 6: браузер вказує бажані мови в порядку пріоритетності.

Сервер відповів, надіславши такі заголовки HTTP:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
HTTP/1.1 304 Not Modified 
Accept-Ranges: bytes 
Server: Microsoft-IIS/8.0 
X-SourceFiles: =?UTF-8?B?RDpcZGF0YVxpc3RpYS0xMzE0XGFzcG5ldFxkdnBcRXhlbXBsZXNcRXhlbXBsZS0wMFxIdG1sUGFnZTEuaHRtbA==?=
X-Powered-By: ASP.NET
Date: Wed, 18 Sep 2013 15:33:53 GMT 
Content-Type: text/html 
Content-Encoding: gzip 
Last-Modified: Wed, 18 Sep 2013 13:13:19 GMT 
ETag: "b474e0d770b4ce1:0" 
Vary: Accept-Encoding 
Content-Length: 313
  • рядок 1: не відображається додатком;
  • рядок 3: сервер ідентифікує себе, у даному випадку це сервер IIS від Microsoft;
  • рядок 5: вказує технологію, яка згенерувала відповідь, у даному випадку ASP.NET;
  • рядок 6: дата та час відповіді;
  • рядок 7: тип документа, надісланого сервером. У даному випадку — документ HTML;
  • рядок 12: розмір у байтах надісланого документа HTML.

2.4.4. Висновок

На кількох прикладах ми розглянули структуру запиту веб-клієнта та відповіді, яку йому надає веб-сервер. Діалог відбувається за допомогою протоколу HTTP — набору команд у текстовому форматі, якими обмінюються обидва учасники. Запит клієнта та відповідь сервера мають однакову структуру:

Image

Дві типові команди для запиту ресурсу — це GET та POST. Команда GET не супроводжується документом. Команда POST, у свою чергу, супроводжується документом, який найчастіше є рядком символів, що містить усі значення, введені у форму. Команда HEAD дозволяє запитувати лише заголовки HTTP і не супроводжується документом.

На запит клієнта сервер надсилає відповідь, яка має таку саму структуру. Запитаний ресурс передається у частині [Document], за винятком випадків, коли команда клієнта була HEAD — у такому разі надсилаються лише заголовки HTTP.

2.5. Основи мови HTML

Веб-браузер може відображати різні документи, найпоширенішим з яких є документ HTML (мова розмітки HyperText). Це текст, відформатований за допомогою тегів у вигляді <balise>texte</balise>. Так, текст <B>important</B> відображатиме важливий текст жирним шрифтом. Існують окремі теги, такі як тег <hr/>, який відображає горизонтальну лінію. Ми не будемо розглядати теги, які можна знайти в тексті HTML. Існує чимало програм WYSIWYG, що дозволяють створювати веб-сторінки без написання жодного рядка коду HTML. Ці інструменти автоматично генерують код HTML на основі макета, створеного за допомогою миші та попередньо визначених елементів управління. Таким чином, можна (за допомогою миші) вставити на сторінку таблицю, а потім переглянути код HTML, згенерований програмою, щоб дізнатися, які теги слід використовувати для визначення таблиці на веб-сторінці. Все дуже просто. Крім того, знання мови HTML є необхідним, оскільки динамічні веб-додатки повинні самостійно генерувати код HTML для надсилання веб-клієнтам. Цей код генерується програмно, і, звісно, потрібно знати, що саме слід згенерувати, щоб клієнт отримав бажану веб-сторінку.

Підсумовуючи, для початку веб-програмування зовсім не обов’язково знати мову HTML у повному обсязі. Однак ці знання є необхідними і їх можна здобути завдяки використанню програмного забезпечення WYSIWYG для створення веб-сторінок, такого як DreamWeaver та десятків інших. Інший спосіб ознайомитися з тонкощами мови HTML — це переглядати веб-сторінки та вивчати їхній вихідний код, який містить цікаві та ще невідомі вам особливості.

2.5.1. Приклад

Розглянемо наступний приклад, який містить деякі елементи, що можуть зустрічатися у веб-документі, такі як:

  • таблиця;
  • зображення;
  • посилання.

Документ HTML має такий загальний вигляд:

<html>
    <head>
        <title>Заголовок</title>
        ...
    </head>
    <атрибути body>
        ...
    </body>
</html>

Весь документ обмежений тегами <html>...</html>. Він складається з двох частин:

  1. <head>...</head>: це невидима частина документа. Вона надає інформацію браузеру, який буде відображати документ. У ній часто зустрічається тег <title>...</title>, який визначає текст, що буде відображатися в рядку заголовка браузера. Також тут можуть бути інші теги, зокрема ті, що визначають ключові слова документа, які потім використовуються пошуковими системами. У цій частині також можуть міститися скрипти, найчастіше написані на JavaScript або VBScript, які будуть виконуватися браузером.
  1. <body атрибути>...</body>: це частина, яка відображатиметься браузером. Теги HTML, що містяться в цій частині, вказують браузеру «бажаний» візуальний вигляд документа. Кожен браузер інтерпретує ці теги по-своєму. Тому два браузери можуть по-різному відображати один і той самий веб-документ. Зазвичай це є однією з головних проблем веб-дизайнерів.

Код HTML нашого прикладу документа виглядає так:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>balises</title>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Les balises HTML</h1>
  <hr />

  <table border="1">
    <thead>
      <tr>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
        <th>Colonne 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>cellule(1,1)</td>
        <td style="width: 150px; text-align: center;">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>
    </tbody>
  </table>

  <table border="0">
    <tr>
      <td>Une image</td>
      <td>
        <img border="0" src="/images/cerisier.jpg"/></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>теги</title> (рядок 5)
текст balises з’явиться у рядку заголовка браузера, який відображатиме документ
горизонтальна смуга
<hr/>: відображає горизонтальну лінію (рядок 10)
таблиця
<атрибути таблиці>....</table> : для визначення таблиці (рядки 12, 32)
<thead>...</thead>: для визначення заголовків стовпців (рядки 13, 19)
<tbody>...</tbody>: для визначення вмісту таблиці (рядки 20, 31)
<tr атрибути>...</tr>: для визначення рядка (рядки 21, 25)
<td атрибути>...</td>: для визначення комірки (рядок 22)
приклади:
<table border="1">...</table>: атрибут border визначає товщину межі таблиці
<td style="width: 150px; text-align: center;">комірка(1,2)</td>: визначає комірку, вміст якої буде комірка(1,2). Цей вміст буде вирівняно по горизонталі (text-align: center). Ширина комірки становитиме 150 пікселів (width: 150px)
зображення
<img border="0" src="/images/cerisier.jpg"/> (рядок 38): визначає зображення без рамки (border=0"), вихідний файл якого знаходиться за адресою /images/cerisier.jpg на веб-сервері (src="/images/cerisier.jpg"). Це посилання міститься у веб-документі, отриманому за допомогою URL http://localhost:port/html/balises.htm. Отже, браузер завантажить файл URL http://localhost:port/images/cerisier.jpg, щоб отримати зображення, на яке тут є посилання.
посилання
<a href="http://istia.univ-angers.fr">тут</a> (рядок 42): робить текст ici посиланням на URL http://istia.univ-angers.fr.
фонове зображення
<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (рядок 8): вказує, що зображення, яке має слугувати фоном сторінки, знаходиться за адресою URL /images/standard.jpg на веб-сервері. У контексті нашого прикладу браузер надішле запит на URL http://localhost:port/images/standard.jpg, щоб отримати це фонове зображення. Крім того, основний текст документа буде відображатися у прямокутнику висотою 400 пікселів і шириною 400 пікселів.

З цього простого прикладу видно, що для побудови всього документа браузер повинен надіслати три запити до сервера:

  1. http://localhost:port/html/balises.htm, щоб отримати вихідний код документа HTML
  2. http://localhost:port/images/cerisier.jpg — для отримання зображення cerisier.jpg
  3. http://localhost:port/images/standard.jpg — щоб отримати фонове зображення standard.jpg

2.5.2. Форма HTML

У наступному прикладі наведено форму:

 

Код HTML, що створює це зображення, виглядає так:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>formulaire</title>
  <script type="text/javascript">
    function effacer() {
      alert("Vous avez cliqué sur le bouton Effacer");
    }
  </script>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Formulaire HTML</h1>
  <form method="post" action="FormulairePost.aspx">
    <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="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="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 value="1">choix1</option>
            <option selected="selected" value="2">choix2</option>
            <option value="3">choix3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix simple</td>
        <td>
          <select size="3" name="lst1">
            <option selected="selected" value="1">liste1</option>
            <option value="2">liste2</option>
            <option value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix multiple</td>
        <td>
          <select size="3" name="lst2" multiple="multiple">
            <option value="1" selected="selected">liste1</option>
            <option value="2">liste2</option>
            <option selected="selected" value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">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" action="...">
поле введення
<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="checked" />Ні
прапорці
<input type="checkbox" name="C1" value="один" />1
<input type="checkbox" name="C2" value="два" checked="checked" />2
<input type="checkbox" name="C3" value="три" />3
Список
<select size="1" name="cmbValeurs">
<option value="1">варіант 1</option>
<option selected="selected" value="2">варіант 2</option>
<option value="3">варіант 3</option>
</select>
список з одним варіантом вибору
<select size="3" name="lst1">
<option selected="selected" value="1">список1</option>
<option value="2">список2</option>
<option value="3">список3</option>
<option value="4">список4</option>
<option value="5">список5</option>
</select>
список із можливістю вибору декількох елементів
<select size="3" name="lst2" multiple="multiple">
<option value="1">список1</option>
<option value="2">список2</option>
<option selected="selected" value="3">список3</option>
<option value="4">список4</option>
<option value="5">список5</option>
</select>
кнопка типу «submit»
<input type="submit" value="Надіслати" name="cmdRenvoyer" />
кнопка типу «Скинути»
<input type="reset" value="Скинути" name="cmdRétablir" />
кнопка типу button
<input type="button" value="Очистити" name="cmdEffacer" onclick="effacer()" />

Давайте розглянемо ці різні теги:

2.5.2.1. Форма « »

форма

<form method="post" action="FormulairePost.aspx">
тег HTML
<form name="..." method="..." action="...">...</form>
атрибути
name="frmexemple": ім'я форми
method="..." : метод, який використовує браузер для надсилання на веб-сервер значень, зібраних у формі
action="..." : URL, на яку будуть надіслані значення, зібрані у формі.
Веб-форма оточена тегами <form>...</form>. Форма може мати ім’я (name="xx"). Це стосується всіх елементів управління, які можна знайти у формі. Мета форми — зібрати інформацію, введену користувачем за допомогою клавіатури/миші, та надіслати її на URL веб-сервера. Який саме? Той, що вказаний в атрибуті action="URL". Якщо цей атрибут відсутній, інформація буде надіслана на URL документа, в якому знаходиться форма. Веб-клієнт може використовувати два різні методи, що називаються POST та GET, для надсилання даних на веб-сервер. Атрибут method="méthode", причому method дорівнює GET або POST, у тезі <form> вказує браузеру, який метод слід використовувати для надсилання інформації, зібраної у формі, на URL, вказаний атрибутом action="URL". Якщо атрибут method не вказано, за замовчуванням використовується метод GET.

2.5.2.2. Поля для введення тексту

поле введення
<input type="text" name="txtSaisie" size="20" value="кілька слів" />
<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
 
тег HTML
<input type="..." name="..." size=".." value=".."/>
Тег `input` використовується для різних елементів управління. Саме атрибут type дозволяє розрізняти ці різні елементи управління між собою.
Атрибути
type="text": вказує, що це поле введення
type="password": символи у полі введення замінюються на символи *. Це єдина відмінність від звичайного поля введення. Цей тип елемента управління підходить для введення паролів.
size="20": кількість символів, що відображаються у полі — не обмежує введення більшої кількості символів
name="txtSaisie": ім’я елемента управління
value="кілька слів" : текст, який відображатиметься у полі введення.

2.5.2.3. Багаторядкові поля введення

багаторядкове поле введення
<textarea rows="2" name="areaSaisie" cols="20">
рядок1
рядок 2
рядок 3
</textarea>
 
тег HTML
<textarea ...>текст</textarea>
відображає багаторядкове поле введення, яке спочатку містить текст
атрибути
rows="2": кількість рядків
cols="'20" : кількість стовпців
name="areaSaisie": ім'я елемента управління

2.5.2.4. Радіо-кнопки

радіо-кнопки
<input type="radio" value="Так" name="R1" />Так
<input type="radio" name="R1" value="no" checked="checked" />Ні
 
тег HTML
<input type="radio" атрибут2="значення2" ..../>текст
відображає перемикач із текстом поруч.
атрибути
name="radio": ім'я елемента управління. Перемикачі з однаковим ім'ям утворюють групу, елементи якої взаємовиключні: можна вибрати лише один із них.
value="значення": значення, присвоєне радіо-кнопці. Не слід плутати це значення з текстом, що відображається поруч із радіо-кнопкою. Останній призначений лише для відображення.
checked="checked": якщо цей ключовий атрибут присутній, перемикач позначений як вибраний, інакше — ні.

2.5.2.5. Поля для позначення

поля для позначення
<input type="checkbox" name="C1" value="un" />1
<input type="checkbox" name="C2" value="два" checked="checked" />2
<input type="checkbox" name="C3" value="три" />3
 
тег HTML
<input type="checkbox" attribut2="valeur2" ....>текст
відображає прапорець із текстом поруч.
атрибути
name="C1": ім'я елемента управління. Поля для позначення можуть мати однакове ім'я або ні. Поля з однаковим ім'ям утворюють групу пов'язаних полів.
value="значення": значення, присвоєне прапорцю. Не слід плутати це значення з текстом, що відображається поруч із перемикачем. Останній призначений лише для відображення.
checked= "checked": якщо цей ключовий параметр присутній, прапорець встановлено; інакше — ні.

2.5.2.6. Список, що розгортається (комбо)

Комбо
<select size="1" name="cmbValeurs">
<option value="1">варіант1</option>
<option selected="selected" value="2">варіант 2</option>
<option value="3">варіант 3</option>
</select>
 
тег HTML
<select size=".." name="..">
<option [selected="selected"] value=”v”>...</option>
...
</select>
відображає у списку тексти, що містяться між тегами <option>...</option>
атрибути
name="cmbValeurs": ім'я елемента управління.
size="1": кількість видимих елементів списку. size="1" перетворює список на комбінований список.
selected="selected": якщо це ключове слово вказано для елемента списку, він відображається у списку як вибраний. У нашому прикладі вище елемент списку choix2 відображається як вибраний елемент комбобокса, коли той з’являється вперше.
value=”v”: якщо елемент вибрано користувачем, саме це значення [v] надсилається на сервер. За відсутності цього атрибута на сервер надсилається текст, що відображається та вибрано.

2.5.2.7. Список з одним вибором

список з одним вибором
<select size="3" name="lst1">
<option selected="selected" value="1">список1</option>
<option value="2">список2</option>
<option value="3">список3</option>
<option value="4">список4</option>
<option value="5">список5</option>
</select>
 
тег HTML
<select size=".." name="..">
<option [selected="selected"]>...</option>
...
</select>
відображає у списку тексти, що містяться між тегами <option>...</option>
атрибути
такі самі, як і для випадаючого списку, що відображає лише один елемент. Цей елемент управління відрізняється від попереднього випадаючого списку лише атрибутом size>1.

2.5.2.8. Список із можливістю множинного вибору

Список з одним вибором
<select size="3" name="lst2" multiple="multiple">
<option value="1" selected="selected">список1</option>
<option value="2">список2</option>
<option selected="selected" value="3">список3</option>
<option value="4">список4</option>
<option value="5">список5</option>
</select>
 
тег HTML
<select size=".." name=".." multiple="multiple">
<option [selected="selected"]>...</option>
...
</select>
відображає у списку тексти, що містяться між тегами <option>...</option>
атрибути
multiple: дозволяє вибрати кілька елементів зі списку. У наведеному вище прикладі вибрано обидва елементи liste1 та liste3.

2.5.2.9. Кнопка типу button

кнопка типу button
<input type="button" value="Очистити" name="cmdEffacer" onclick="effacer()" />
 
тег HTML
<input type="button" value="..." name="..." onclick="effacer()" ..../>
атрибути
type="button": визначає елемент управління «кнопка». Існують ще два типи кнопок: submit та reset.
value="Очистити": текст, що відображається на кнопці
onclick="функція()" : дозволяє визначити функцію, яка має виконуватися, коли користувач натискає на кнопку. Ця функція є частиною скриптів, визначених у відображеному веб-документі. Наведений вище синтаксис відповідає синтаксису javascript. Якщо скрипти написані на VBScript, слід вказати onclick="функція" без дужок. Синтаксис залишається таким самим, якщо потрібно передати параметри до функції: onclick="функція(val1, val2,...)"
У нашому прикладі клік на кнопку Effacer викликає таку функцію JavaScript effacer:
<script type="text/javascript">
function effacer() {
alert("Ви натиснули кнопку «Очистити»");
}
</script>
Функція effacer відображає повідомлення:

2.5.2.10. Кнопка типу «submit»

кнопка типу «submit»
<input type="submit" value="Надіслати" name="cmdRenvoyer" />
 
тег HTML
<input type="submit" value="Надіслати" name="cmdRenvoyer" />
атрибути
type="submit": визначає кнопку як кнопку відправки даних форми на веб-сервер. Коли клієнт натисне на цю кнопку, браузер надішле дані форми на URL, визначений в атрибуті action тегу <form>, відповідно до методу, визначеного атрибутом method цього ж тегу.
value="Відправити": текст, що відображається на кнопці

2.5.2.11. Кнопка типу «reset»

кнопка типу reset
<input type="reset" value="Скинути" name="cmdRétablir" />
 
тег HTML
<input type="reset" value="Скинути" name="cmdRétablir"/>
атрибути
type="reset": визначає кнопку як кнопку скидання форми. Коли користувач натисне цю кнопку, браузер поверне форму до того стану, в якому він її отримав.
value="Скинути": текст, що відображається на кнопці

2.5.2.12. Приховане поле

приховане поле
<input type="hidden" name="secret" value="uneValeur" />
тег HTML
<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.5.3. Відправлення веб-клієнтом значень форми на веб-сервер

У попередньому розділі ми зазначили, що веб-клієнт має два методи для надсилання на веб-сервер значень форми, яку він відобразив: методи GET та POST. Розглянемо на прикладі різницю між цими двома методами.

2.5.3.1. Метод GET

Давайте проведемо перший тест, у якому в коді HTML документа тег <form> визначено таким чином:


<form method="get" action="FormulaireGet.aspx">

Коли користувач натисне на кнопку [1], значення, введені у форму, будуть надіслані на сторінку ASP.NET [2]. Ця сторінка нічого не робить із цими параметрами та повертає порожню сторінку. Ми хочемо лише дізнатися, як браузер передає введені значення на веб-сервер. Для цього ми скористаємося інструментом налагодження, доступним у Chrome. Його можна активувати, ввівши CTRL-I (великими літерами) [3]:

Оскільки нас цікавить обмін даними між браузером і веб-сервером, ми відкриваємо вкладку [Network], а потім натискаємо кнопку [Envoyer] у формі. Ця кнопка є елементом типу [submit], розміщеним усередині тегу [form]. Браузер реагує на клік, запитуючи URL [FormulaireGet.aspx], вказані в атрибуті [action] тегу [form], за допомогою методу GET, вказаного в атрибуті [method]. У результаті ми отримуємо таку інформацію:

На знімку екрана вище показано URL, який браузер запитує після натискання кнопки [envoyer]. Він дійсно запитує URL, передбачений [FormulaireGet.aspx], але додає до нього інформацію, яка складається зі значень, введених у форму. Щоб отримати додаткову інформацію, ми натискаємо на посилання вище:

Вище, у [1, 2], ми бачимо заголовки HTTP, надіслані браузером. Тут вони були відформатовані. Щоб переглянути необроблений текст цих заголовків, переходимо за посиланням [view source] [3, 4]. Повний текст виглядає так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GET /FormulaireGet.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

Ми бачимо елементи, з якими вже стикалися раніше. Інші з’являються вперше:

Connection: keep-alive
клієнт просить сервер не закривати з’єднання після його відповіді. Це дозволить йому використовувати те саме з’єднання для наступного запиту. З’єднання не залишається відкритим нескінченно. Сервер закриє його після занадто тривалого періоду бездіяльності.
Referer
URL — це URL-адреса, яка відображалася в браузері під час надсилання нового запиту.

Новим елементом є рядок 1 у інформації, що йде за URL. Можна помітити, що вибір, зроблений у формі, відображається в URL. Значення, введені користувачем у форму, були передані в запиті GET URL?param1=значення1&param2=значення2&... HTTP/1.1, де parami — це імена (атрибут name) елементів управління веб-форми, а valeuri — значення, пов’язані з ними. Нижче наведено таблицю з трьома стовпцями:

  • 1-й стовпець: містить визначення елемента управління HTML із прикладу;
  • 2-й стовпець: відображення цього елемента управління в браузері;
  • стовпець 3: містить значення, яке браузер надсилає на сервер для елемента управління зі стовпця 1 у тому вигляді, в якому воно міститься у запиті GET з прикладу.
елемент управління HTML
візуальне представлення
повернуте значення (значення)
<input type="radio" value="Так" name="R1"/>Так
<input type="radio" name="R1" value="ні" checked="checked"/>Ні
R1=Так
- значення атрибута value радіо-кнопки, яку користувач позначив.
<input type="checkbox" name="C1" value="один"/>1
<input type="checkbox" name="C2" value="два" checked="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=основи+програмування+Web%0D%0A
веб-програмування+Web
- текст, введений користувачем у поле введення. %OD%OA — це позначка кінця рядка. Пробіли замінено на знак +
<select size="1" name="cmbValeurs">
<option value='1'>варіант1</option>
<option selected="selected" value='2'>варіант2</option>
<option value='3'>варіант3</option>
</select>
cmbValeurs=3
- атрибут [value] елемента, вибраного користувачем
<select size="3" name="lst1">
<option selected="selected" value='1'>список1</option>
<option value='2'>список2</option>
<option value='3'>список3</option>
<option value='4'>список4</option>
<option value='5'>список5</option>
</select>
lst1=3
- атрибут [value] елемента, вибраного користувачем
<select size="3" name="lst2" multiple="multiple">
<option selected="selected" value='1'>список1</option>
<option value='2'>список2</option>
<option selected="selected" value='3'>список3</option>
<option value='4'>список4</option>
<option value='5'>список5</option>
</select>
lst2=1
lst2=3
- атрибути [value] елементів, вибраних користувачем
<input type="submit" value="Надіслати" name="cmdRenvoyer"/>
 
cmdRenvoyer=Надіслати
- ім'я та атрибут value кнопки, яка використовувалася для надсилання даних форми на сервер
<input type="hidden" name="secret" value="uneValeur"/>
 
secret=значення
- атрибут value прихованого поля

2.5.3.2. Метод POST

Ми змінюємо документ HTML, щоб браузер тепер використовував метод POST для надсилання значень форми на веб-сервер:


  <form method="post" action="FormulairePost.aspx">

Ми заповнюємо форму так само, як для методу GET, і передаємо параметри на сервер за допомогою кнопки [Envoyer]. Як і в попередньому абзаці на сторінці 34, у Chrome ми маємо доступ до заголовків HTTP запиту, надісланого браузером:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
POST /FormulairePost.aspx HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Content-Length: 195
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:56376
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=unMotDePasse&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur

У запиті HTTP від клієнта з’являються нові елементи:

POST URL HTTP/1.1
запит GET замінено на запит POST. Параметри більше не містяться в першому рядку запиту. Можна помітити, що тепер вони розміщені (рядок 14) після запиту HTTP, після порожнього рядка. Їхнє кодування ідентичне тому, яке вони мали в запиті GET.
Content-Length
кількість «відправлених» символів, c.a.d. Кількість символів, яку веб-сервер повинен прочитати після отримання заголовків HTTP, щоб отримати документ, який надсилає йому клієнт. У даному випадку цим документом є список значень форми.
Content-type
вказує тип документа, який клієнт надішле після заголовків HTTP. Тип [application/x-www-form-urlencoded] вказує, що це документ, який містить значення форми.

Існує два методи передачі даних на веб-сервер: GET та POST. Чи є один із цих методів кращим за інший? Ми бачили, що якщо значення форми надсилалися браузером за допомогою методу GET, браузер відображав у своєму полі Adresse запитуване значення URL у формі URL?param1=val1&param2=val2&.... Це можна розглядати як перевагу або недолік:

  • перевагою, якщо ми хочемо дозволити користувачеві додати цей налаштований URL до своїх улюблених посилань;
  • недоліком — якщо не хочемо, щоб користувач мав доступ до певної інформації у формі, наприклад, до прихованих полів.

Надалі ми будемо використовувати у своїх формах майже виключно метод POST.

2.6. Conclusion

У цьому розділі було представлено різні базові концепції веб-розробки:

  • обмін даними між клієнтом і сервером за допомогою протоколу HTTP;
  • створення документа за допомогою мови HTML;
  • створення форм для введення даних.

На прикладі ми побачили, як клієнт може надсилати інформацію на веб-сервер. Ми не розглядали, як сервер може

  • отримувати цю інформацію;
  • обробляти її;
  • надіслати клієнту динамічну відповідь, що залежить від результату обробки.

Це сфера веб-програмування, яку ми розглянемо в наступному розділі, де буде представлено технологію ASP.NET MVC.

https://stahe.github.io
Цей навчальний курс, написаний Сержем Тахе, надається громадськості на умовах Creative Commons «Вказання авторства — Не для комерційного використання — Поширення на тих самих умовах 3.0 без змін.