Info/2 курс/Веб-программирование/Общие стандарты и протоколы сети Интернет.md

## Содержание
- [[#Введение]]
- [[#Клиент-серверное взаимодействие. Протокол HTTP]]
	- [[#HTTP]]
		- [[#Структура запроса HTTP]]
		- [[#Структура ответа HTTP]]
		- [[#Методы HTTP]]
		- [[#Коды состояния]]
		- [[#Заголовки HTTP]]
		- [[#Кеширование]]
	- [[#URI, URN и URL]]
	- [[#REST]]
- [[#Разметка страниц. Язык HTML]]
	- [[#HTML]]
		- [[#Структура HTML-документа]]
		- [[#HTML-формы]]
		- [[#HTML5]]
	- [[#Браузер]]
	- [[#Document Object Model]]
- [[#Стилизация страниц. Основы CSS]]
	- [[#CSS]]
		- [[#Источники CSS]]
		- [[#Структура CSS]]
		- [[#Приоритеты стилей]]
	- [[#LESS & Sass / SCSS]]
		- [[#LESS]]
		- [[#Sass]]
		- [[#SCSS]]
- [[#Динамические сценарии на стороне клиента. Язык JavaScript]]
	- [[#JavaScript]]
		- [[#Структура языка]]
			- [[#ECMAScript]]
			- [[#BOM]]
			- [[#DOM]]
	- [[#Отличия ES5 от ES6]]
		- [[#Видимость переменных]]
		- [[#Вставка переменной в строку]]
		- [[#Деструктуризация]]
		- [[#Классы и объекты]]
		- [[#Наследование]]
		- [[#Промисы]]
		- [[#Стрелочные функции]]
		- [[#Цикл с итератором]]
		- [[#Параметры по умолчанию]]
		- [[#Rest-параметр]]
		- [[#Операция spread]]
- [[#Асинхронное клиент-серверное взаимодействие. DHTML и AJAX]]
	- [[#AJAX]]
		- [[#DHTML]]
		- [[#XMLHttpRequest]]
		- [[#jQuery]]
		- [[#SuperAgent]]
		- [[#Fetch API]]
	- [[#WebSocket]]
## Введение

В основном все держится на 4 вещах:
- [[#Клиент-серверное взаимодействие. Протокол HTTP|Hypertext Transfer Protocol (HTTP)]] - предназначен для передачи гипертекста между клиентом и сервером
- [[#Разметка страниц. Язык HTML|Hypertext Markup Language (HTML)]] - язык разметки гипертекста
- [[#Стилизация страниц. Основы CSS|Cascade StyleSheets (CSS)]] - язык описания внешнего вида HTML-документов
- [[#Динамические сценарии на стороне клиента. Язык JavaScript|JavaScript (JS)]] - язык для написания динамических сценариев, выполняемых на стороне клиента
## Клиент-серверное взаимодействие. Протокол HTTP

### HTTP

Сам по себе HTTP - протокол прикладного уровня. В его основе лежит технология "клиент-сервер". Он может использоваться в качестве "транспорта" для других протоколов прикладного уровня. Основной объект манипуляций этого протокола - ресурс, на который указывает [[#URI, URN и URL|URI]]. Обмен сообщениями в этом протоколе идет по схеме "запрос-ответ". Сам по себе протокол не сохраняет состояние (stateless-протокол), поэтому для реализации сессий используется cookies.
#### Структура запроса HTTP

Первая строка запроса HTTP является стартовой, в ней содержится основное описание необходимого действия (команда). При ее составлении через пробел указывают три основные для протокола вещи: [[#Методы HTTP|метод]], [[#URI, URN и URL|URI]] и версию протокола HTTP (в формате HTTP/Версия). 

За первой строкой следует следующий раздел - заголовки. Этот раздел содержит, как ни странно, [[#Заголовки HTTP|заголовки]].

Последним разделом запроса является тело (или сущность) сообщения. Чаще всего в запросе тело остается пустым. В теле сообщения может находится что угодно, что необходимо передать с помощью протокола на другую сторону. Вся информация о теле, необходимая другой стороне, должна быть указана в заголовках.
#### Структура ответа HTTP

Ответ мало чем отличается от [[#Структура запроса HTTP|запроса]]. Единственным отличием является стартовая строка. Эта строка составляется тем же образом, что и стартовая строка запроса, перечисляя через пробел основную информацию запроса: версию протокола HTTP (в формате HTTP/Версия), [[#Код состояния|код состояния]] и пояснение кода состояния. По сути, в пояснении можно указать что угодно, но лучше придерживаться стандартных шаблонов сообщений.
#### Методы HTTP

Методов HTTP довольно много, поэтому перечислим только используемые чаще всего.
- OPTIONS - определение возможностей сервера
- GET - получение данных с ресурса (запрос содержимого ресурса)
- HEAD - аналог GET, но в ответе не передается (отсутствует) тело
- POST -  передача данных ресурсу
- PUT - загрузка содержимого запроса на указанный [[#URI, URN и URL|URI]]
- DELETE - удаление данных с сервера 
#### Коды состояния

Коды состояния в основном состоят из трёх цифр. Все коды состояния делятся на 5 классов, в соответствии с которыми ставится первая цифра кода.
- 1 - Informational - информационный
- 2 - Success - успешно 
- 3 - Redirection - перенаправление
- 4 - Client error - ошибка клиента
- 5 - Server error - ошибка сервера
#### Заголовки HTTP

Заголовки используются для передачи определенных значений с помощью протокола. В некотором роде, можно думать о заголовках как о входящих переменных. Все они передаются в формате ключ:значение.

Заголовки делятся на 4 группы:
- General Headers - могут включаться в любое сообщение клиента и сервера
- Request Headers - используется только в запросах клиента
- Response Headers - используется только в запросах сервера
- Entity Headers - сопровождают любую сущность сообщения
#### Кеширование

*Информация будет добавлена позже*.
### URI, URN и URL

> **URI (Uniform Resource Identifier)** - уникальный идентификатор ресурса - символьная строка, позволяющая идентифицировать ресурс. Строится по форме <схема>:<идентификатор>. Идентификатор определяется в зависимости от схемы.

> **URL (Uniform Resource Locator)** - URI, позволяющий определить местоположение ресурса. Может представлять из себя абсолютную ссылку (https://), относительную ссылку (../task.html) и тому подобное.

> **URN (Uniform Resource Name)** - URI, содержащий единообразное имя ресурса (не указывает на его местонахождение). Строится по способу, подобному URI, но начинается с urn, и только после него идет уже сама схема с идентификатором.
### REST

> **REST (Representation State Transformer)** - передача состояния представления - подход к архитектуре сетевых протоколов, обеспечивающих доступ к информационным ресурсам. Он описывает взаимодействие между клиентом и сервером, а также между front-end и back-end частями.

Основные концепции REST:
- данные должны передаваться в виде небольшого числа стандартных форматов (к примеру, [[#HTML]], [XML](https://ru.wikipedia.org/wiki/XML?ysclid=mu8vgeju1m2168967), [JSON](https://ru.wikipedia.org/wiki/JSON?ysclid=mu8vgmwdcz833033530))
- сетевой протокол должен поддерживать кеширование, не должен зависеть от сетевого слоя, не должен сохранять информацию о состоянии между парами "запрос-ответ"

Существует подход, противоположный REST, который основан на вызове удаленных процедур (RPC - Remote Process Call).
## Разметка страниц. Язык HTML

### HTML

>**HyperText Markup Language** (HTML) - стандартный декларативный язык разметки документов в интернете.

В основном, он интерпретируется [[#Браузер|браузером]] и отображается в виде документа. Изначально, он являлся частным случаем SGML (стандартного обобщенного языка разметки).

Этот язык был разработан [Тимом Бернерсом-Ли](https://ru.wikipedia.org/wiki/Бернерс-Ли,_Тим?ysclid=mu8uowzcj46005688) в 1989-1991 годах.
#### Структура HTML-документа

В начале документа всегда находится строка с объявлением версии HTML. Хотя чаще всего для версии [[#HTML5]] это правило игнорируется, так как такой стандарт используется неявно.

По синтаксису он очень напоминает [XML](https://ru.wikipedia.org/wiki/XML?ysclid=mu8urdj3jm497572817), и даже существует отдельная нотация [XHTML](https://ru.wikipedia.org/wiki/XHTML?ysclid=mu8urty7p0976864513), которая является частным случаем этого языка. В частности, документ также состоит в основном из элементов, начало и конец которых обозначаются тегами.

Теги однозначно определяют закрытие или открытие того или иного элемента. Это позволяет вкладывать теги друг в друга, при этом сохраняя строгую структуру. В то же время теги могут быть одинарными (или пустыми) - то есть только открываться, не закрываясь. Также теги могут содержать атрибуты - специальные переменные, указанные в открывающем теге.

Начало и конец документа обозначаются специальными тегами. Внутри этих тегов должны находится два других тега, которые определяют заголовок и тело документа соответственно.
В заголовке чаще всего указывают, помимо самого заголовка, мета-информацию и различные необходимые для работы сайта файлы, к примеру файлы [[#Стилизация страниц. Основы CSS|css]] или js.
#### HTML-формы

Основное предназначение форм - обмен данными между пользователем и сервером. Приятной особенностью таких форм является то, что они могут работать без JavaScript.

Сам HTML-документ может содержать любое число форм, но на сервер одновременно может быть отправлена только одна. При этом вложенные формы запрещены.

Границы формы в документе, как и границы любого другого элемента, задаются тегами. В атрибутах формы можно отдельно указать [[#Методы HTTP|метод HTTP]] и ссылку, куда отправляется форма. При этом в конце формы обязательно должна находится отдельная кнопка для ее отправки.
#### HTML5

HTML5 - как следует из названия, пятая версия спецификации языка HTML. Стандарт такого языка был принят в 2014 году (в то время как HTML4 - в 1999 году).

Конечно, за это время в язык добавили много новых синтаксических особенностей. В первую очередь, изменения были внесены для более удобного управления мультимедийным содержимым страницы. Это включает в себя добавление таких тегов, как аудио и видео. Несмотря на то, что они сами по себе достаточно просты (в них присутствует всего три кнопки - старт, стоп и перемотка), они универсальны и работают на любом [[#Браузер|браузере]]. 

Помимо этого были добавлены новые семантические теги - замена для стандартных и универсальных. В основном они редко где используются, но иногда могут помочь в решении проблем доступности (к примеру, для слепых) или для более точного пояснения к содержимому тега.

Также была переработана структура тела HTML. С этой версии он больше не базируется на SGML, но все еще имеет обратную совместимость с HTML4. И формат вводной строки документа тоже изменился.

В дополнение к этому, были также переработаны формы. С этой версии в ней стали доступны новые поля ввода, новые атрибуты и еще куча других изменений.
### Браузер

>**Браузер** - программа, отображающая HTML-документ в его отформатированном виде.

На самом деле, о браузере можно говорить с разных точек зрения: можно определять его главным образом через отображение документов, а можно смотреть на него как на runtime для JavaScript.

Очень важно не путать браузер с поисковиком. Браузер занимается самой отрисовкой документов и чтении динамических сценариев и стилей. В то время как поисковик просто с помощью умных алгоритмов ищет информацию в интернете по заданному запросу. Как главное доказательство их различия, в настройках браузера можно поставить любой другой поисковик.
### Document Object Model

>**Объектная модель документа** (DOM) - это платформо-независимый интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-документа.

В DOM документ представляется в виде дерева узлов. Узлы связаны между собой отношением "родитель-потомок". 

Основным стандартом в данном случае является [W3C](https://www.w3.org/).

Чаще всего DOM используется для динамического изменения HTML-страницы и реализации на ней сложных сценариев поведения. Тем не менее, HTML без JavaScript статичен, а вся динамика возможна только при работе вместе с ним.
## Стилизация страниц. Основы CSS

### CSS

>**Cascade StyleSheets** (CSS) - декларативная технология описания внешнего вида документа, написанного языком разметки. 

В основном CSS используется для задания цветов, шрифтов и других аспектов представления документа. Его основная цель - разделение содержимого документа и его представления. Это, к примеру, позволяет представлять один и тот же документ в различных методах вывода.
#### Источники CSS

Файлы со стилями CSS берутся браузером из разных источников.

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

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

Последним является стандартный стиль браузера. Если браузер не смог найти никаких стилей для описания страницы, он использует стиль по умолчанию, который чаще всего выглядит довольно плохо.

Очень неприятная подводная мина для разработчиков кроется в том, что, хоть пользовательские стили и рассматриваются менее приоритетно, чем авторские, существует специальное правило "important", которое позволяет пользователям игнорировать это правило для определенных элементов и обрабатывать элементы пользовательских стилей приоритетнее авторских.
#### Структура CSS

CSS представляет собой сложную таблицу стилей. Вся эта таблица состоит из различных наборов правил.

Каждое правило состоит из набора селекторов и блока определения. В данном случае селектор - это те теги, для которых будет активно данное правило. Блок определения состоят из разделенных между собой точкой с запятой пар "ключ: значение". В ключе задается свойство, которое нужно изменить, а в значении - значение, на которое меняется свойство.
#### Приоритеты стилей

Очень сложной темой является приоритеты использования стилей в случае, если к одному элементу подходит сразу несколько стилей. Для CSS существует сложная формула, учитывающая все особенности сравниваемых стилей, по которой он дает итоговый результат того, что показывать. Поэтому, не зная точных характеристик сравниваемых стилей, сложно определить точный итоговый результат.

Но можно выделить основные критерии приоритетов, которые чаще всего совпадают с результатом формулы.
1. Свойство задано при помощи !important.
2. Стиль прописан напрямую в теге.
3. Наличие идентификаторов (#id) в селекторе.
4. Количество классов (:classes) и псевдоклассов (:pseudoclass) в селекторе.
5. Количество имен тегов в селекторе.

Помимо вышеперечисленных приоритетов, также важен относительный порядок расположения свойства в файле: будет использоваться то свойство, что указанно ближе к концу файла.
### LESS & Sass / SCSS

Помимо самого CSS, существуют также надстройки над ним - некоторые дополняющие языки стилей. Они позволяют повысить уровень абстракции CSS-кода и упростить структуру таблиц стилей. 

По сравнению с "обычным" CSS, они позволяют использовать переменные (константы и примеси), вложенные правила, а также математические операторы, благодаря которым нет необходимости выносить вычисления за пределы файла CSS. Также у них есть более мощные возможности по импорту и наследованию стилей.

Несмотря на то, что браузеры могут не поддерживать такие надстройки, существуют специальный транслятор, который преобразует эти правила в "обычный" и, соответственно, читаемый для браузера CSS.
#### LESS

По своему синтаксису, LESS почти ничем не отличается от CSS, а просто добавляет некоторые новые функции.
#### Sass

Синтаксис у Sass принципиально отличается от CSS и больше похож на таковой у языка программирования Ruby.
#### SCSS

SCSS иногда называют диалектом Sass, только с синтаксисом, похожим на CSS. При этом этот язык наиболее популярен среди надстроек для CSS.

## Динамические сценарии на стороне клиента. Язык JavaScript

### JavaScript

>**JavaScript** (JS) - объектно-ориентированный скриптовый императивный язык программирования.

Скриптовый в определении означает, что у этого языка нет точки входа.

В основном, JS используется для придания интерактивности веб-страницам. Именно он реализовывает динамические сценарии на стороне клиента. Добавить его на [[#HTML]]-страницу можно, используя три способа: в отдельном теге на странице, внутри используемого скриптом тега и в отдельном скриптовом файле. Предпочтительнее использовать последний способ, так как он наиболее удобен.

В данном языке инициализация скриптов происходит по порядку их объявления в файле. При этом объявить скрипт можно в любом месте [[#HTML]]-кода страницы. Важно учитывать, что если для исполнения скрипта необходим полностью построенный [[#Document Object Model|DOM]], то его следует подключать в конце тега body.

JS однопоточный, и по умолчанию он не поддерживает ни асинхронность, ни многопоточность, а работает только по принципу конкуренции процессов. По факту, все JS-скрипты выполняются в одном event-loop'е, который только один. Тем не менее, в некоторых местах кода можно использовать await, который позволяет другим более срочным процессам выполнится именно в этом месте кода, что позволяет реализовать структуру, похожую на асинхронность. 

Сам по себе JS в [[#Браузер|браузере]] не имеет прямой работы с вводом-выводом, все данные передаются ему через API [[#Браузер|браузера]], на котором он работает.

Этому языку присущ ряд характерных архитектурных черт: динамическая или слабая типизация, автоматическое управление памятью, а также прототипное программирование (то есть одна функция наследует другую функцию-шаблон). Помимо этого, функции в этом языке являются объектами первого класса.
#### Структура языка

Полный язык можно поделить на три части. Первая из них - ядро, [[#ECMAScript]], язык в его чистом виде. Вторая часть языка состоит из [[#BOM|объектной модели браузера (Brawser Object Model, BOM)]]. Третий уровень языка представляет из себя [[#DOM|объектную модель документа (Document Object Model, DOM)]].

[[#BOM]] и [[#DOM]] существуют только внутри [[#Браузер|браузера]], в котором исполняется JS, поэтому для работы с языком вне [[#Браузер|браузера]] требуются специальные инструменты, которые могут их заменить (к примеру, Node.js).
##### ECMAScript

Сам по себе ECMAScript является отдельным языком программирования. Он встраиваемый, расширяемый, и при этом не имеющий средств ввода-вывода.

В данном языке, функция - это тоже объект. При этом, функцию можно задавать анонимно, можно объявить функцию в переменной, и можно объявить функцию с использованием объектной формы записи (хотя этот вариант уже не актуален и не используется).

С новой версией ES6, выпущенной в 2015 году, стали доступны [[#Отличия ES5 от ES6|новые возможности]]. В основном эти изменения коснулись синтаксиса языка.

Этот язык поддерживается практически всеми современными [[#Браузер|браузерами]], хотя для некоторых может потребоваться отдельная программа, называемая транспилером. Транспилеры могут понизить версию кода JS до версий более популярных браузеров. Самым распространенным транспилером на данный момент является Babel.
##### BOM

По факту, BOM - это прослойка между [[#ECMAScript|ядром]] и [[#DOM]]. Основное ее предназначение - управление окнами [[#Браузер|браузера]] и обеспечение их взаимодействия. Она представляет каждое окно [[#Браузер|браузера]] как отдельный объект. При этом она специфична для каждого браузера. 

Данная модель предоставляет множество возможностей. Среди них управление фреймами, поддержка задержки в исполнении кода и зацикливания с задержкой, системные диалоги, управление адресом открытой страницы, управление информацией о [[#Браузер|браузере]], управление информацией о параметрах монитора, ограниченное управление историей просмотра страниц, поддержка работы с [[#HTTP]] cookie.

При использовании JS можно в любой части скрипта получить доступ к BOM, с использованием объекта window. С помощью этого объекта можно изменять окно пользователя и записывать функции в окно из любого места в коде.
##### DOM

Используя JS, с [[#Document Object Model|DOM]] можно производить такие манипуляции, как получение узлов, изменение узлов, изменение связей между узлами, удаление узлов. Для этого используется объект document.

DOM одинаков для каждого браузера.
### Отличия ES5 от ES6

Уже очень долгое время ES6 является стандартом написания [[#JavaScript|JS]] кода. И он актуален и по сей день, так как радикальных изменений после ES6 не производилось. Тем не менее, существует много старых систем, которые все еще работают с ES5. Именно поэтому важно знать их отличия и уметь работать с обеими версиями [[#ECMAScript|ES]].
#### Видимость переменных

В стандарте ES5 все переменные обозначались ключевым словом var, видимость которой распространялась на весь код программы - то есть в любом месте можно было эту переменную задать или перезаписать, и также в любом месте можно было эту переменную использовать.

Главная проблема этого подхода состоит в том, что переменные, объявленные внутри блока, автоматически перезаписывают таковые извне блока. То есть, при запуске блока, внутри которого переопределяется определенная переменная, старое значение данной переменной автоматически стирается, даже если сам блок эту переменную не меняет, а только инициализирует. При этом переопределенные переменные остаются таковыми и извне блока.

В то же время в большинстве других языков программирования область видимости переменной ограничивается блоком, в котором она была создана. Это позволяет удобно отслеживать переменные и дает много преимуществ и удобств по сравнению с неограниченной областью видимости.

Тем не менее, в ES5 существовали "костыли" для ограничения видимости переменной внутри блока - использование IIFE (Immediately Invoked Function Expression - выражение немедленно вызываемой функции). С таким подходом приходилось писать весь блок с необходимой переменной внутри функции, а после сразу вызывать эту функцию. В таком случае все действия внутри функции выполнялись, в то время как объявленная внутри нее переменная не выходила из блока во вешнюю область видимости. Но это все еще было неудобно.

Поэтому в версии ES6 были добавлены два новых ключевых слова - let и const - видимость которых стала ограничена как раз блоком. По своей сути, let работает почти так же, как и var, в то время как const стала честной константой let - константой с ограниченной блоком областью видимости, которая также в некоторой степени ограничивает манипуляции с содержащимся в ней объектом, в том числе и изменение свойств объекта.

Тем не менее, сам var все также существует в ES6, и его можно использовать теми же способами, как и в ES5, хотя это и не рекомендуется.
#### Вставка переменной в строку

С версии ES6 стало возможно вставлять переменные с помощью специальной конструкции ${}. Тем не менее, сделать это можно только в специальных строках, заключенных в обратные кавычки \`\`.

До этого же приходилось постоянно конкатенировать строки при их использовании.
#### Деструктуризация

>**Деструктуризация** - особый синтаксис присвоения, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части.

В ES6 было добавлено много моделей деструктуризации с широким спектром применения.
#### Классы и объекты

Также в версии ES6 появился новый синтаксис описания и инициализации объектов. Модель описания объектов стала более схожей с таковой у других популярных языков программирования, к примеру добавилось ключевое слово class, а также функция конструктора constructor.

В то же время, чтобы реализовать такое на ES5, приходилось определять класс как переменную, отдельную функцию конструктора, а методы реализовывать через прототипное программирование.
#### Наследование

Помимо классов, также были добавлены и ключевые слова для наследования - extends и super. Это, при взаимодействии с классами, намного уменьшило количество необходимого кода для описания наследования, и в то же время увеличило его читаемость.

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

Самое интересное, что на самом деле весь этот ужас из ES5 никуда не делся, просто его скрыли за красивыми ключевыми словами. "Под капотом" же ES6 работает точно так же.
#### Промисы

Вместо коллбэков стали использоваться промисы. Тем не менее, коллбэки все также используются и по сей день. Дословно промисы обещают выполнить функцию.
#### Стрелочные функции

Стрелочная функция - это, по факту, та же анонимная функция, только опуская ключевое слово function, а в некоторых ситуациях и даже само тело функции.
#### Цикл с итератором

В ES5 существовало только два вида for: обычный for, аналогичный таковому в java, а также forEach для элементов массива.

В новой же версии ES6 стал доступен цикл for с итератором массива, который последовательно перебирает все элементы массива. Но по факту, это все тот же forEach, но более мощный.
#### Параметры по умолчанию

В ES6 также добавились возможность устанавливать параметры для функции по умолчанию, которой в ES5 не было.

Раньше в ES5 приходилось использовать различные конструкции ветвления, чтобы понять, была ли передана нужная переменная в функцию, и если нет, установить ей нужное значение.
#### Rest-параметр

В ES6 появилась возможность устанавливать Rest-параметр. По факту, это массив параметров, количество которых по умолчанию не известно. В Java есть аналог такой конструкции - vararg. Названия переменных при таком подходе наследуются.
#### Операция spread

В ES6 появилась новая операция spread, обозначающаяся как [[#Rest-параметр]], которая может передать в функцию не сам массив данных, а разложить его на различные переменные и передать их отдельно друг от друга, как разные переменные.
## Асинхронное клиент-серверное взаимодействие. DHTML и AJAX

### AJAX

>**AJAX** (Asynchronous Javascript And XML) - это подход к построению интерактивных пользовательских интерфейсов веб-приложений.

Несмотря на то, что в абревиатуре используется XML, на сегодняшний день он уже не так важен, вместо него используется любой структурированный текст. Поэтому на сегодняшний день AJAX - это просто асинхронный способ выполнения [[#JavaScript|JS]].

Сам по себе, AJAX основан на фоновом обмене данными между [[#Браузер|браузером]] и веб-сервером. При таком подходе во время обмена данными страница не перезагружается полностью, а лишь меняется в соответствии с поступающими данными.

Основными принципами AJAX являются совместное использование технологии динамического обращения к серверу без перезагрузки полностью всей веб-страницы (с использованием, к примеру, [[#XMLHttpRequest]], динамического создания дочерних фреймов, или динамического создания тега, содержащего [[#JavaScript|JS]]) и [[#DHTML]] для динамического изменения содержания страницы.

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

Недостатками такого подхода являются отсутствие возможности поисковикам найти динамически загружаемое содержимое страницы, сложность собирания метрик по использованию сайта, усложнение проекта и требование браузеру включить [[#JavaScript]] (во всех современных браузерах эта функция включена по умолчанию).
#### DHTML

>**Dynamic HTML** - способ создания интерактивного веб-сайта, использующий сочетание статического языка разметки [[#HTML]], выполняемого на стороне клиента скриптового языка [[#JavaScript]], [[#CSS]] (каскадных таблиц стилей) и [[#Document Object Model|DOM]] (объектной модели документа).
#### XMLHttpRequest

>**XMLHTTP** (или XMLHttpRequest, или XHR) - это набор API, позволяющий осуществлять [[#Структура запроса HTTP|HTTP-запросы]] к серверу без необходимости перезагружать страницу.

При данном подходе данные можно пересылать как в виде XML, так и в виде JSON, [[#HTML]] или даже просто неструктурированным текстом. При пересылке чаще всего используется текстовый протокол [[#HTTP]], и поэтому данные должны передаваться в виде текста, не важно какого вида.
#### jQuery

>**jQuery** - это [[#JavaScript|JS]]-библиотека, предназначенная для разработки [[#DHTML]] и AJAX-приложений.

Использование библиотеки jQuery упрощает доступ к элементам [[#Document Object Model|DOM]] с помощью множества различных способов. Помимо этого, данная библиотека упрощает и унифицирует (для различных браузеров) реализацию AJAX, а также упрощает добавление визуальных эффектов.
#### SuperAgent

>**SuperAgent** - это API для реализации AJAX.
#### Fetch API

>**Fetch API** - это современный стандарт, призванный заменить [[#XMLHttpRequest]] для реализации AJAX.

На данный момент, поддерживается всеми современными [[#Браузер|браузерами]]. Тем не менее, на старых [[#Браузер|браузерах]] он не поддерживается, а значит и работать не будет.

В отличие от [[#XMLHttpRequest]], Fetch API работает на [[#Промисы|промисах]], при этом поддерживает кросс-браузерность, а также сам по себе он уже встроен в [[#браузер]] (что означает, что нет необходимости подключать что-либо отдельно, в том числе не нужны [[#jQuery]] и [[#SuperAgent]]).
### WebSocket

>**WebSocket** - это протокол полнодуплексной связи поверх TCP-соединения, предназначенный для обмена сообщениями между [[#Браузер|браузером]] и веб-сервером в режиме реального времени.

Данный протокол позволяет отправлять данные [[#Браузер|браузеру]] без дополнительного запроса со стороны клиента. При этом обмен такими данными ведется через отдельное TCP-соединение. На данный момент, этот протокол поддерживается всеми современными браузерами.

Основное преимущество WebSocket заключается в том, что с ним данные могут отправляться как с клиента на сервер, так и наоборот. Большинство других реализаций того же самого могут отправлять данные только от клиента только на сервер.

Данный протокол является альтернативой для совместного подхода [[#AJAX]] и Long Polling'а. В данном случае Polling - это постоянные запросы от клиента для проверки состояния сервера. Long Polling означает, что опрос клиентом производится не слишком часто, а с определенным интервалом времени. В то же время существует Short Polling, который делает запросы очень часто.