web update

2026-10-04 19:57:51 +03:00
parent 11432e782f
commit 12a473f46e
14 changed files with 247 additions and 0 deletions
@@ -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 - будет...

@@ -14,3 +14,5 @@
 - [HTML](Фронтенд/HTML.md)
 - [CSS](Фронтенд/CSS.md)
 - [JavaScript](Фронтенд/JavaScript.md)
+## Клиент-серверное взаимодействие
+- [Клиент-серверное взаимодействие](Клиент-сервер/Клиент-серверное%20взаимодействие.md)
@@ -0,0 +1,20 @@
+- Asynchronious JavaScript and XML 
+- Подход к построению интерактивных пользовательских интерфейсов веб-приложений
+- Основан на фоновом обмене данными браузера с веб-сервером
+- При обмене данными между клиентом и сервером веб-страница не перезагружается полностью
+## Основные принципы
+- Использование технологии динамического обращения к серверу "на лету", без перезагрузки всей страницы
+- Использование [DHTML](../Фронтенд/DHTML.md) для динамического изменения содержания страницы
+## Преимущества
+- Экономия трафика
+- Уменьшение нагрузки на сервер
+- Ускорение реакции интерфейса
+## Недостатки
+- Динамически загружаемое содержимое недоступно поисковикам
+- Сложнее собирать метрики по использованию сайта
+- Усложнение проекта
+- Требуется включенный JS в браузере
+## Реализация в коде
+- [XMLHTTPRequest](XMLHTTPRequest.md)
+- [JQuery](JQuery.md)
+- [Fetch API](Fetch%20API.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)
@@ -0,0 +1,3 @@
+- Все запросы могут обрабатываться одним процессом CGI-программы
+- Веб-сервер взаимодействует с процессом через UNIX Domain Sockets или TCP/IP (а не через stdin и stdout)
+- Для общения используется бинарный протокол, обеспечивающий передачу любых текстовых данных
@@ -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)
@@ -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("<p>New content</p>");
+```
+## Работа с событиями
+```JavaScript
+$("#foo").bind("mouseenter mouseleave", function() {
+	$(this).toggleClass("entered");
+});
+```
+## Подключение
+### Через CDN
+```HTML
+<!-- Подключение актуальной версии jQuery через CDN Google -->
+<script src="https://googleapis.com"></script>
+```
+### Локально
+```HTML
+<!-- Подключение локального файла jQuery -->
+<script src="js/jquery-3.7.1.min.js"></script>
+```
+## Почему устарел
+- JS эволюционировал: добавили `document.querySelector` (написано в [заметке про DOM](../Фронтенд/DOM.md)), добавили [Fetch API](Fetch%20API.md)
+- Смена парадигмы: императивный стиль -> декларативный (в современных React, Vue, Angular)
@@ -0,0 +1,11 @@
+## Short Polling
+- Браузер через JS (`setInterval` + `fetch`) отправляет AJAX-запросы на сервер каждые 2 секунды
+- Сервер отвечает сразу: либо отдает новые данные, либо говорит, что данных нет
+- Элементарная реализация, но 99% запросов не нужны
+## Long Polling
+Костыль до появления [WebSocket](WebSocket.md)
+- Браузер делает AJAX-запрос на сервер
+- Сервер отвечает не сразу, но удерживает соединение открытым
+- Как только появляется сообщение, сервер отдает ответ
+- Соединение для этих данных закрывается, клиент повторяет Long Polling запрос
+- Нет пустых запросов, но серверу приходится держать в ОЗУ тысячи открытых соединений
@@ -0,0 +1,6 @@
+- Sever-Sent Events
+- Середина между [Polling](Polling.md) и [WebSocket](WebSocket.md)
+- Однонаправленный канал (от сервера к браузеру)
+- Браузер подписывается, а сервер шлет ему события
+- Подходит для ленты новостей
+- Работает поверх обычного [HTTP](../Сеть%20и%20API/HTTP.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-коннект
+## Плюсы
+- Идеально для реалтайма
+- Нулевые расходы на трафик
+## Минусы
+- Сложнее администрировать
@@ -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
+	}
+}
+```
@@ -0,0 +1,10 @@
+## Клиентские запросы
+- [AJAX](AJAX.md)
+## Модели взаимодействия
+- [WebSocket](WebSocket.md)
+- [Polling](Polling.md)
+- [SSE](SSE.md)
+## Серверная обработка
+- [Серверные сценарии](Серверные%20сценарии.md)
+- [CGI](CGI.md)
+- [FastCGI](FastCGI.md)
@@ -0,0 +1,3 @@
+- Программы, вызываемые на сервере для формирования динамического контента
+- Веб-сервер "делегирует" им на обработку запрос и "транслирует" сформированный ими ответ клиенту
+- Могут использоваться вместе со "статикой", могут - сами по себе
@@ -0,0 +1,7 @@
+Dynamic HTML - способ создания интерактивного веб-сайта, использующий сочетание
+- Статичного языка разметки [HTML](HTML.md)
+- Выполняемого на стороне клиента скриптового языка [JavaScript](JavaScript.md)
+- [CSS](CSS.md) (каскадных таблиц стилей)
+- [DOM](DOM.md) (объектной модели документа)
+## Концепция
+Использовать JavaScipt для изменения HTML-элементов и их стилей на стороне клиента в real-time