diff --git a/index.md b/index.md index 17c4885..535958e 100644 --- a/index.md +++ b/index.md @@ -5,6 +5,7 @@ [Веб](Веб/Веб.md) - лекции и заметки по Веб-программированию [Computer Science](Computer%20Science/Computer%20Science.md) - лекции и материалы по АК+ОПД+PL и в целом база по CS [Экзамен](ОПД/Экзамен.md) - разбор экзамена по ОПД за 2 семестр +[ЯПы](ЯПы/ЯПы.md) - семинары по ЯПам (осторожно, AI-SLOP) [Other](Other/Other.md) - всякая всячина Spring Boot - будет... diff --git a/Веб/Веб.md b/Веб/Веб.md index ecdd529..7aaabc3 100644 --- a/Веб/Веб.md +++ b/Веб/Веб.md @@ -14,3 +14,5 @@ - [HTML](Фронтенд/HTML.md) - [CSS](Фронтенд/CSS.md) - [JavaScript](Фронтенд/JavaScript.md) +## Клиент-серверное взаимодействие +- [Клиент-серверное взаимодействие](Клиент-сервер/Клиент-серверное%20взаимодействие.md) \ No newline at end of file diff --git a/Веб/Клиент-сервер/AJAX.md b/Веб/Клиент-сервер/AJAX.md new file mode 100644 index 0000000..98fe7db --- /dev/null +++ b/Веб/Клиент-сервер/AJAX.md @@ -0,0 +1,20 @@ +- Asynchronious JavaScript and XML +- Подход к построению интерактивных пользовательских интерфейсов веб-приложений +- Основан на фоновом обмене данными браузера с веб-сервером +- При обмене данными между клиентом и сервером веб-страница не перезагружается полностью +## Основные принципы +- Использование технологии динамического обращения к серверу "на лету", без перезагрузки всей страницы +- Использование [DHTML](../Фронтенд/DHTML.md) для динамического изменения содержания страницы +## Преимущества +- Экономия трафика +- Уменьшение нагрузки на сервер +- Ускорение реакции интерфейса +## Недостатки +- Динамически загружаемое содержимое недоступно поисковикам +- Сложнее собирать метрики по использованию сайта +- Усложнение проекта +- Требуется включенный JS в браузере +## Реализация в коде +- [XMLHTTPRequest](XMLHTTPRequest.md) +- [JQuery](JQuery.md) +- [Fetch API](Fetch%20API.md) \ No newline at end of file diff --git a/Веб/Клиент-сервер/CGI.md b/Веб/Клиент-сервер/CGI.md new file mode 100644 index 0000000..e2f4b48 --- /dev/null +++ b/Веб/Клиент-сервер/CGI.md @@ -0,0 +1,25 @@ +- Common Gateway Interface +- Простейший механизм вызова пользователем программ на стороне сервера +- Данные отправляются программе посредством HTTP-запроса, формируемого веб-браузером +- То, какая именно программа будет вызвана, обычно определяется [URL](../Основы/URI.md) запроса +- Каждый запрос обрабатывается отдельным процессом CGI-программы +- Взаимодействие программы с веб-сервером осуществляется через `stdin` и `stdout` +## Жизненный цикл CGI-запроса +1. Браузер присылает HTTP-запрос `POST /api/check?id=5` с телом `x=1&y=2` +2. Веб-сервер (например Apache Httpd) создает новый процесс в ОС и запускает скомпилированную программу +3. Метаданные (заголовки и тп) кладутся в переменные окружения, тело запроса отправляется в `stdin` +4. Программа выполняется как будто с ней взаимодействует пользователь в консоли +5. Веб-сервер забирает ответ из `stdout` +6. ОС убивает процесс запущенной программы +## Достоинства +- Программы могут быть написаны на множестве ЯПов +- Падение CGI-сценария не приводит к падению всего сервера +- Исключены конфликты при параллельной обработке нескольких запросов +- Хорошая поддержка веб-серверами +## Недостатки +- Высокие накладные расходы на создание нового процесса в ОС +- Плохая масштабируемость +- Слабое разделение уровня представления и бизнес-логики +- Могут быть платформо-зависимы + +Как развитие - [FastCGI](FastCGI.md) \ No newline at end of file diff --git a/Веб/Клиент-сервер/FastCGI.md b/Веб/Клиент-сервер/FastCGI.md new file mode 100644 index 0000000..5b9e064 --- /dev/null +++ b/Веб/Клиент-сервер/FastCGI.md @@ -0,0 +1,3 @@ +- Все запросы могут обрабатываться одним процессом CGI-программы +- Веб-сервер взаимодействует с процессом через UNIX Domain Sockets или TCP/IP (а не через stdin и stdout) +- Для общения используется бинарный протокол, обеспечивающий передачу любых текстовых данных diff --git a/Веб/Клиент-сервер/Fetch API.md b/Веб/Клиент-сервер/Fetch API.md new file mode 100644 index 0000000..71457c6 --- /dev/null +++ b/Веб/Клиент-сервер/Fetch API.md @@ -0,0 +1,40 @@ +- Современный стандарт на замену [XMLHTTPRequest](XMLHTTPRequest.md) +- Поддерживается всеми современными браузерами +- Работает на промисах +## Пример кода +Чуть чуть было написано в [ECMAScript](../Фронтенд/ECMAScript.md) +```JavaScript +async function getData() { + const url = "https://example.org/products.json"; + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`{response.status}`); + } + + const json = await response.json(); + console.log(json); + } catch (error) { + console.error(error.message); + } +} +``` +Отправление данных через POST +```JavaScript +async function checkPoint(x, y, r) { + const pointData = {x: x, y: y, r: r}; + + const response = await fetch("/api/check", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(pointData) + }); + + const res = await response.json(); + console.log(res.hit); +} +``` +## Как работает +- Получение данных работает в два этапа: асинхронное получение ответа, затем асинхронное получение тела (данные могут быть большими и передаться потоком - Stream) \ No newline at end of file diff --git a/Веб/Клиент-сервер/JQuery.md b/Веб/Клиент-сервер/JQuery.md new file mode 100644 index 0000000..4571c0a --- /dev/null +++ b/Веб/Клиент-сервер/JQuery.md @@ -0,0 +1,49 @@ +- JS-библиотека, предназначенная для разработки [DHTML](../Фронтенд/DHTML.md) и [AJAX](AJAX.md)-приложений +- Упрощает доступ к элементам [DOM](../Фронтенд/DOM.md) с помощью кучи разных способов +- Упрощает и унифицирует реализацию AJAX +- Упрощает добавление визуальных эффектов +- Ключевым элементов API является функция(объект) `$` +## Пример AJAX-запроса +```JavaScript +$.ajax({ + type: "POST", + url: "some.php", + data: {name: "JOHN", location: "London"}, + success: function(msg) { + // логика + } +}); +``` +## Взаимодействие с DOM +```JavaScript +$("div.test") + .add("p.quote") + .addClass("blue") + .slideDown("slow"); + +$("a"),click(function() { + alert("Hello"); +}); + +$("div.demo-container").html("

New content

"); +``` +## Работа с событиями +```JavaScript +$("#foo").bind("mouseenter mouseleave", function() { + $(this).toggleClass("entered"); +}); +``` +## Подключение +### Через CDN +```HTML + + +``` +### Локально +```HTML + + +``` +## Почему устарел +- JS эволюционировал: добавили `document.querySelector` (написано в [заметке про DOM](../Фронтенд/DOM.md)), добавили [Fetch API](Fetch%20API.md) +- Смена парадигмы: императивный стиль -> декларативный (в современных React, Vue, Angular) \ No newline at end of file diff --git a/Веб/Клиент-сервер/Polling.md b/Веб/Клиент-сервер/Polling.md new file mode 100644 index 0000000..70ca588 --- /dev/null +++ b/Веб/Клиент-сервер/Polling.md @@ -0,0 +1,11 @@ +## Short Polling +- Браузер через JS (`setInterval` + `fetch`) отправляет AJAX-запросы на сервер каждые 2 секунды +- Сервер отвечает сразу: либо отдает новые данные, либо говорит, что данных нет +- Элементарная реализация, но 99% запросов не нужны +## Long Polling +Костыль до появления [WebSocket](WebSocket.md) +- Браузер делает AJAX-запрос на сервер +- Сервер отвечает не сразу, но удерживает соединение открытым +- Как только появляется сообщение, сервер отдает ответ +- Соединение для этих данных закрывается, клиент повторяет Long Polling запрос +- Нет пустых запросов, но серверу приходится держать в ОЗУ тысячи открытых соединений \ No newline at end of file diff --git a/Веб/Клиент-сервер/SSE.md b/Веб/Клиент-сервер/SSE.md new file mode 100644 index 0000000..7c9a05e --- /dev/null +++ b/Веб/Клиент-сервер/SSE.md @@ -0,0 +1,6 @@ +- Sever-Sent Events +- Середина между [Polling](Polling.md) и [WebSocket](WebSocket.md) +- Однонаправленный канал (от сервера к браузеру) +- Браузер подписывается, а сервер шлет ему события +- Подходит для ленты новостей +- Работает поверх обычного [HTTP](../Сеть%20и%20API/HTTP.md) \ No newline at end of file diff --git a/Веб/Клиент-сервер/WebSocket.md b/Веб/Клиент-сервер/WebSocket.md new file mode 100644 index 0000000..84e770e --- /dev/null +++ b/Веб/Клиент-сервер/WebSocket.md @@ -0,0 +1,28 @@ +- Протокол полнодуплескной(двунаправленной) связи поверх TCP-cоединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени +- Позволяет серверу отправлять данные браузеру без дополнительного запроса со стороны клиента +- Обмен данными ведется через отдельное TCP-соединение +- Поддерживается всеми современными браузерами +- Альтернатива - [[AJAX]] + [Long Polling](Polling.md) +## Пример кода +```JavaScript +var webSocket = new WebSocket("ws://localhost/echo"); + +webSocket.onopen = function(event) { + webSocket.send("Hello"); +} + +webSocket.onmessage = function(event) { + webSocket.close(); +} + +webSocket.onclose = function(event) {} +``` +## Как устанавливается +1. Браузер отправляет обычный [HTTP](../Сеть%20и%20API/HTTP.md)-запрос с заголовком `Connection: Upgrade` и `Upgrade: websocket` +2. Сервер отвечает `101` (Switching Protocols) +3. HTTP обрывается, появляется чистый TCP-коннект +## Плюсы +- Идеально для реалтайма +- Нулевые расходы на трафик +## Минусы +- Сложнее администрировать \ No newline at end of file diff --git a/Веб/Клиент-сервер/XMLHTTPRequest.md b/Веб/Клиент-сервер/XMLHTTPRequest.md new file mode 100644 index 0000000..f7d9926 --- /dev/null +++ b/Веб/Клиент-сервер/XMLHTTPRequest.md @@ -0,0 +1,42 @@ +- XMLHTTP - набор API, позволяющий осуществлять HTTP-запросы к серверу без необходимости перезагружать страницу +- Данные можно пересылать в виде [XML](../Форматы%20данных/XML.md), [JSON](../Форматы%20данных/JSON.md), [HTML](../Фронтенд/HTML.md) или просто неструктурированным текстом +- При пересылке используется [HTTP](../Сеть%20и%20API/HTTP.md) +```JavaScript +var req; +function loadXMLDoc(url) { + req = null; + if (window.XMLHttpRequest) { + try { + req = new XMLHttpRequest(); + } catch (e) {} + } else if (window.ActiveXObject) { // более старая версия + try { + req = new ActiveXObject("Msxml2.XMLHTTP"); + } catch (e) { + try { + req = new ActiveXObject("Microsoft.XMLHTTP"); // вообще древняя версия + } catch (e) {} + } + } + + if (req) { + req.open("GET", url, true); // true - асинхронно + req.onreadystatechange = processReqChange; // callback + req.send(null); + } +} + +function processReqChange() { + try { + if (req.readyState === 4) { + if (req.status === 200) { + // обработка ответа + } else { + // обработка ошибка, доступен req.statusText + } + } + } catch (e) { + // баги самого XMLHttpRequest + } +} +``` \ No newline at end of file diff --git a/Веб/Клиент-сервер/Клиент-серверное взаимодействие.md b/Веб/Клиент-сервер/Клиент-серверное взаимодействие.md new file mode 100644 index 0000000..7d1d62a --- /dev/null +++ b/Веб/Клиент-сервер/Клиент-серверное взаимодействие.md @@ -0,0 +1,10 @@ +## Клиентские запросы +- [AJAX](AJAX.md) +## Модели взаимодействия +- [WebSocket](WebSocket.md) +- [Polling](Polling.md) +- [SSE](SSE.md) +## Серверная обработка +- [Серверные сценарии](Серверные%20сценарии.md) +- [CGI](CGI.md) +- [FastCGI](FastCGI.md) \ No newline at end of file diff --git a/Веб/Клиент-сервер/Серверные сценарии.md b/Веб/Клиент-сервер/Серверные сценарии.md new file mode 100644 index 0000000..071ad91 --- /dev/null +++ b/Веб/Клиент-сервер/Серверные сценарии.md @@ -0,0 +1,3 @@ +- Программы, вызываемые на сервере для формирования динамического контента +- Веб-сервер "делегирует" им на обработку запрос и "транслирует" сформированный ими ответ клиенту +- Могут использоваться вместе со "статикой", могут - сами по себе \ No newline at end of file diff --git a/Веб/Фронтенд/DHTML.md b/Веб/Фронтенд/DHTML.md new file mode 100644 index 0000000..66f3e03 --- /dev/null +++ b/Веб/Фронтенд/DHTML.md @@ -0,0 +1,7 @@ +Dynamic HTML - способ создания интерактивного веб-сайта, использующий сочетание +- Статичного языка разметки [HTML](HTML.md) +- Выполняемого на стороне клиента скриптового языка [JavaScript](JavaScript.md) +- [CSS](CSS.md) (каскадных таблиц стилей) +- [DOM](DOM.md) (объектной модели документа) +## Концепция +Использовать JavaScipt для изменения HTML-элементов и их стилей на стороне клиента в real-time \ No newline at end of file