1. Архитектура Web приложений¶
Web-приложение – клиент-серверное приложение, в котором клиент взаимодействует с веб-сервером при помощи браузера.
1.1. Разделение между Internet и WWW¶
1.1.1. Что такое Internet?¶
Internet – глобальная система объединённых компьютерных сетей. Другими словами - сеть сетей.
Инфраструктура, которая позволяет передавать любые типы данных между сетями и устройствами, подключенными к ней.
Эта инфраструктура поддерживается сетевыми протоколами – алгоритмами, которые реализуют различные сервисы по передачи данных.
Существует несколько стеков сетевых протоколов, основные: OSI и ICP/IP. Рассмотрим на примере ICP/IP.
Из этого множества протоколов и уровней, в Web’e нас больше всего интересуют протоколы прикладного уровня (приложений). В частности: HTTP, FTP, DNS, SSH, P2P. Но для полноты понимания немного затронем и другие уровни.
Примечание
- Прикладной уровень:
- HTTP – протокол передачи гипертекстовых документов.
- FTP – протокол передачи файлов.
- DNS – доменная система имён.
- SSH – защищенное подключение к консоли, удалённое управление операционной системой.
- P2P (Peer-to-Peer) – каждый узел является как клиентом, так и выполняет функции сервера.
- Транспортный уровень:
- TCP – надежная последовательная передача данных. С подтверждением получения.
- UDP – не надежная передача данных. Без подтверждения получения.
- Сетевой уровень:
- IP – глобальная адресация, передача в разнородной среде.
1.1.2. Что такое WWW?¶
World Wide Web – распределённая система взаимосвязанных, посредством гиперссылок, документов и их ресурсов, располагающихся на машинах подключенных к Internet. Эта система посредством протоколов серверного и клиентского ПО обеспечивает доступ к этим вазимосвязанным документам.
Примечание
Распределённая – означает, что физически, документы и их ресурсы могут располагаться на разных серверах.
Примечание
Историческая справка – изначально, WWW разрабатывалась как система ссылок в научном сообществе.
1.2. Клиент-серверная архитектура¶
Клиент-серверная архитектура – означет, что приложение исполняется одновременно на двух машинах: на клиенте и на сервере.
Web-клиенты работают на компьютерах конечных пользователей. Задача Web-клиентов состоит в формировании и отправки запроса, а далее в получении и отображении полученного ответа - документа.
Web-сервера работают (как правило) на серверах в датацентрах. Их задача заключается в хранении (или генерации) и отдачи документов, то есть отвечать на запросы.
- Преимущества подхода
- Открытый протокол – очень хорошо документирован и имеет много реализаций.
- Стандартный клиент – самый распространённый клиен - браузер.
- Прозрачный способ взаимодействия приложений – один ресурс может ссылаться на другой.
- Распределенная и масштабируемая система – физически, одно преложение может быть запущенно на нескольких серверах.
1.3. Типы Web-документов (MIME-типы)¶
MIME-типы – типы данных, которые могут быть переданы, посредством сети Интернет, в Web. Нужны для того, чтобы браузер знал как обрабатывать тот или иной документ.
Расширения файлов играют второстепенную роль.
Документы могут быть:
- Статические:
- Это файлы на дисках сервера
- Как правило, обладают постоянным адресом
- Динамические:
- Создаются на каждый запрос
- Содержимое зависит от параметров запроса. Например, времени и пользователя.
- Адрес может быть постоянным или меняться
1.3.1. Сокращенный перечень MIME-типов¶
- text
- text/html – основной тип для гипертекстовых документов. Разметка текста, пользовательского интерфейса
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/css/style.css"> <script src="http://code.jquery.com/jquery-2.1.4.js"></script> </head> <body> <p> Some text with <img src="pic/img1.png"> and <a href="#yes">hyperlinks</a> </p> </body> </html>
- text/css – стили, которые применяются к html-документам. Определяют внешний вид
body { width: 70%; margin: auto; } h1, h2, h3, h4, h5, h6 { font-family: sans-serif; margin-top: 1.5em; }
- text/javascript – скрипты для документов
<script> document.write("Hello, world!"); </script>
- text/xml – для разметки самих данных. Служит для обмена данными между приложениями
<response status="ok"> <friends> <friend id="1" name="v.pupkin"/> <friend id="2" name="a.pushkin"/> <friend id="3" name="n.tesla"/> </friends> </response>
- image и video
- image/png
- image/jpeg
- video/mp4
- application
- application/json – для разметки самих данных. Служит для обмена данными между приложениями, более совершенная версия, чем xml
{ "status": "ok", "friends": [ { "id": 1, "name": "v.pupkin" }, { "id": 2, "name": "a.pushkin" }, { "id": 3, "name": "n.tesla" } ] }
- application/javascript
- и многие другие…
1.4. URL - Связующие звено¶
URL (Uniform Resource Locator) – определитель местонахождения ресурса, документа. Другими словами – адрес.
Структура у него следующая:
Примечание
Протокол – с помощью какого протокола загружать.
Параметры – список определённых значений, которые передаются вместе с запросом.
Якорь – определённое место в самом документе (Web-страничке).
1.4.1. Абсолютные и относительные URL¶
Абсолютный – полный и точный адрес.
Примеры:
- http://server.org/1.html - абсолютный
- //server.org/1.html - schemeless, для гибкой подстройки протокола http или https
Относительный – адрес, который высчитывается браузером в зависимости от текущего адреса.
Примеры:
- /another/page.html?a=1 - путь от корня домена
- pictures/1.png - от URL текущего документа
- ?a=1&b=2 - параметры, от URL текущего документа
- #part2 - якорь, в пределах текущего документа
1.4.2. Правила разрешения URL¶
Рассмотрим на примере – жирным выделено, какая часть добавляется браузером при обработке относительных адресов:
https://site.com/path/page.html - основной документ
1.5. Как документы могут ссылаться друг на друга?¶
1.5.1. HTML - гиперссылки¶
С помощью специального тега <a>
и его атрибута href="URL"
.
Пример:
Узнать больше о <a href="https://ru.wikipedia.org/wiki/URL">URL</a>
- Результат:
- Узнать больше о URL
1.5.2. HTML - формы¶
С помщью тега <form>
и его атрибута action="URL"
– куда будет отправлен запрос этой формы.
Пример:
<form action="https://duckduckgo.com/">
<input type="text" name="q" value="">
<input type="hidden" name="ia" value="images">
<button type="submit">Найти</a>
</form>
Результат:
1.5.3. HTML - ресурсы¶
URL-адреса как ссылки на ресурсы документа.
Пример:
<link rel="stylesheet" href="/css/index.css">
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<img src="pictures/network.png" width="200">
1.5.4. CSS - ресурсы¶
Подключение ресурсов через использование URL в CSS файлах.
Пример:
/* Загрузка фонового изображения*/
.slide {
background-image: url(../pictures/network.png)
}
/* Загрузка шрифта */
@font-face {
font-family: Terminus;
src: url(fonts/terminus.ttf);
}
1.5.5. JavaScript - прямое указание URL¶
Пример:
var saveApiUrl = '/items/save/';
var newTitle = 'Duck tales';
$.ajax({
type: 'POST',
url: saveApiUrl,
data: { id: 10, title: newTitle }
});