Web-приложения и web-протоколы

Web-applications

Веб-приложения

программное обеспечение, которое работает на сервере и доступно пользователю через веб-браузер или клиентское приложение с помощью сети Интернет

Доступность через браузер, без необходимости установки.
Удобство обновления и распространения (обновления происходят на сервере).
Кроссплатформенность (работают на любом устройстве с браузером).

Типы Web-приложений

Static

Статические

Содержат фиксированный контент (HTML, CSS).
Отображают одинаковую информацию для всех пользователей.

личный сайт или портфолио

Dynamic

Динамические

Создают контент на основе пользовательских запросов или действий.
Используют серверную обработку и базы данных.

социальные сети, интернет-магазины

Типы Web-приложений

Single Page Application (SPA)

Одностраничные приложения

Загружают основную страницу один раз.
Все взаимодействия происходят без перезагрузки страницы (с использованием JavaScript).

Gmail, Trello

Progressive Web Applications (PWA)

Прогрессивные веб-приложения

Используют возможности браузера для обеспечения опыта, близкого к нативным приложениям (offline-режим, push-уведомления).

Twitter Lite

Основные компоненты Web-приложений

Клиентская часть

Frontend

Отвечает за отображение интерфейса пользователю.

HTML (структура), CSS (оформление), JavaScript (интерактивность)

Основные компоненты Web-приложений

Серверная часть

Backend

Обрабатывает запросы пользователя, выполняет вычисления и взаимодействует с базой данных

PHP, Python, Ruby, Node.js и другие

Основные компоненты Web-приложений

Базы данных

Databases

Хранение и управление информацией, используемой приложением

MySQL, PostgreSQL, MongoDB

Работа модели клиент-сервер

Клиент

устройство, с которого пользователь отправляет запросы

Сервер

система, которая обрабатывает запросы, выполняет нужные вычисления или получает информацию из базы данных и отправляет ответ обратно клиенту

Пример модели клиент-сервер

Пользователь вводит адрес сайта в браузере.
Браузер отправляет HTTP-запрос на сервер.
Сервер обрабатывает запрос и возвращает HTML-страницу.
Браузер отображает страницу пользователю.

Архитектурные подходы в Web-приложениях

Одноуровневая архитектура

Вся обработка данных и выполнение операций происходит на одном сервере

Простые веб-сайты или локальные приложения

Многоуровневая архитектура

взаимодействуют несколько уровней: клиент, сервер и база данных

Большие e-commerce платформы, социальные сети

Архитектурные подходы в Web-приложениях

Representational State Transfer (REST)

Архитектурный стиль, который использует HTTP-методы (GET, POST, PUT, DELETE) для обмена данными между клиентом и сервером

Интеграции различных сервисов

Основные принципы REST

Без состояния (stateless) — каждый запрос должен содержать всю необходимую информацию.
Использование стандартных HTTP-методов.
Работает с ресурсами через уникальные URL-адреса.

Роль браузера в работе Web-приложений

1. Запрос к серверу

Браузер инициирует запросы, отправляя HTTP-запросы на сервер

2. Отображение контента

Браузер интерпретирует полученные данные (HTML, CSS, JavaScript) и отображает их в виде визуальной страницы

Роль браузера в работе Web-приложений

3. Обработка взаимодействия с пользователем

Браузер передает действия пользователя (клики, ввод текста и т. д.) серверу через дополнительные HTTP-запросы

4. Выполнение клиентского кода

Браузер выполняет JavaScript, который может взаимодействовать с сервером через AJAX-запросы или обновлять DOM для отображения динамических данных

Основные этапы работы Web-приложения

1. Запрос от клиента

Клиент (браузер) отправляет запрос на сервер, в котором могут содержаться параметры, указывающие, какую именно информацию или ресурс хочет получить пользователь

Основные этапы работы Web-приложения

2. Обработка запроса на сервере

Сервер принимает запрос и обрабатывает его, возможно, обращаясь к базе данных или выполняя нужные вычисления

Основные этапы работы Web-приложения

3. Ответ от сервера

Сервер отправляет ответ в виде HTML-страницы или других данных (например, JSON).

Ответ может включать дополнительные метаданные, такие как заголовки HTTP, которые содержат информацию о типе данных, кодировке и других настройках

Основные этапы работы Web-приложения

4. Отображение информации пользователю

Браузер получает ответ от сервера и отображает информацию на экране пользователя

Взаимодействие с сервером может происходить не только при первоначальной загрузке страницы, но и в процессе работы с приложением

1. Клиентский запрос

Пользователь вводит URL http://example.com/index.html в браузере. Это инициирует следующий GET-запрос:

                        
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

2. Ответ сервера

Сервер получает запрос, обрабатывает его и отправляет ответ с содержимым страницы


HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<html>
    <head><title>Example Page</title></head>
    <body>Welcome to Example.com</body>
</html>

3. Отображение на клиенте

Браузер получает HTML-код и отрисовывает страницу, показывая пользователю приветственное сообщени

HTTP

HyperText Transfer Protocol

основной протокол, используемый для передачи данных. Он определяет правила, по которым браузеры (клиенты) и серверы обмениваются информацией

Является stateless протоколом, что означает, что каждый запрос и ответ обрабатываются независимо от других

Структура HTTP-запроса

1. Стартовая строка

определяет тип запроса и целевой ресурс

GET /index.html HTTP/1.1

GET - HTTP-метод (операция, которая должна быть выполнена)
/index.html - путь к ресурсу на сервере
HTTP/1.1 - версия HTTP-протокола

Структура HTTP-запроса

2. Заголовки

содержат дополнительную информацию о запросе, такую как тип содержимого, язык и предпочтения пользователя

                        
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Accept-Language: en-US,en;q=0.9

Структура HTTP-запроса

3. Тело запроса

может содержать данные, отправляемые на сервер

username=admin&password=12345

HTTP-методы

методы определяют, что клиент хочет сделать с данным ресурсом

GET

используется для получения данных с сервера

Запрос не изменяет состояние сервера

POST

используется для отправки данных на сервер

Например, для отправки формы или загрузки файла

Идемпотентность

свойство операции, при котором повторное выполнение этой операции дает тот же результат, что и единичное выполнение

GET : Повторный запрос ресурса не изменяет его состояние.

PUT : Повторное обновление ресурса одинаковыми данными приводит к тому же результату.

DELETE : Повторное удаление ресурса не изменяет состояние, если он уже был удалён.

HTTP-методы

методы определяют, что клиент хочет сделать с данным ресурсом

DELETE

используется для удаления ресурса с сервера

HEAD

похож на GET, но сервер возвращает только заголовки ответа без тела

HTTP-методы

PUT

используется для замены ресурса на сервере

PATCH

используется для частичного обновления ресурса

Используются для обновления ресурсов на сервере

Задача: обновить пароль пользователя

PUT

Необходимо послать всего пользователя


fetch("https://mysite.ru/changeUser", {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({username: "admin", password: "qwe123"})
})

PATCH

Необходимо послать только новый пароль


fetch("https://mysite.ru/changeUser", {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({password: "qwe123"})
})

Структура HTTP-ответа

Стартовая строка

содержит информацию о статусе ответа

HTTP/1.1 200 OK

HTTP/1.1 - версия HTTP
200 - код состояния (статус)
OK - описание статуса

Структура HTTP-ответа

Заголовки

содержат метаданные о содержимом

например, тип содержимого, длину ответа и кодировку


Content-Type: text/html; charset=UTF-8
Content-Length: 1234

Структура HTTP-ответа

Тело ответа

содержит сам контент, который сервер отправляет клиенту

может быть HTML-страница, изображение, JSON-данные и т. д


<html>
    <body>
        Hello, World!
    </body>
</html>

Коды состояния HTTP

информационные

1xx

100 Continue - сервер готов продолжить обработку запроса

успешные

2xx

200 OK - запрос выполнен успешно
201 Created - ресурс был успешно создан

Коды состояния HTTP

перенаправления

3xx

301 Moved Permanently - запрашиваемый ресурс был окончательно перемещен
302 Found - ресурс временно перемещен

Коды состояния HTTP

ошибки клиента

4xx

400 Bad Request - неправильный запрос
401 Unauthorized - необходимо авторизоваться
404 Not Found - ресурс не найден

ошибки сервера

5xx

500 Internal Server Error - внутренняя ошибка сервера
503 Service Unavailable - сервер недоступен

HTTP-статус коды

Примеры HTTP-заголовков

Content-Type

указывает на тип содержимого (например, text/html , application/json )

Cache-Control

контролирует кэширование данных

Authorization

используется для передачи данных авторизации, например, при отправке токенов

Set-Cookie

используется для установки cookies на клиенте

Протокол HTTPS

HyperText Transfer Protocol Secure

защищенная версия HTTP, которая использует SSL/TLS для шифрования данных, передаваемых между клиентом и сервером

Конфиденциальность - данные, передаваемые через HTTPS, зашифрованы, что делает их недоступными для третьих сторон
Целостность - данные не могут быть изменены или повреждены при передаче
Аутентификацию - HTTPS позволяет удостовериться в подлинности сервера, что помогает предотвратить атаки man-in-the-middle

Взаимодействие с сервером через AJAX

Asynchronous JavaScript and XML (AJAX)

позволяет отправлять HTTP-запросы и получать ответы от сервера без перезагрузки страницы

1. Отправка асинхронного запроса

С помощью JavaScript создается HTTP-запрос, который отправляется на сервер без обновления страницы. Этот запрос может быть как GET, так и POST.


let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data", true);
xhr.onload = function() {
   if (xhr.status === 200) {
       let response = JSON.parse(xhr.responseText);
       document.getElementById("data-container").innerHTML = response.data;
   }
};
xhr.send();

2. Обработка запроса на сервере

Сервер получает запрос, обрабатывает его (например, обновляет данные в базе данных или извлекает их) и формирует ответ, который возвращается клиенту

3. Обработка ответа на клиенте

JavaScript на клиенте получает ответ от сервера, парсит его (например, из формата JSON) и обновляет части веб-страницы, изменяя только те элементы, которые требуют обновления


let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data", true);
xhr.onload = function() {
   if (xhr.status === 200) {
       let response = JSON.parse(xhr.responseText);
       document.getElementById("data-container").innerHTML = response.data;
   }
};
xhr.send();