Технология AJAX

Интернет - всемирная система объединённых компьютерных сетей для хранения и передачи информации(сеть сетей).

Ресурсы Интернета разбросаны по оборудованию на всем земном шаре. Для связи этого оборудования между собой на огромных расстояниях придумали специальные алгоритмы и стандарты, в частности, стек протоколов TCP/IP, на котором в настоящее время функционирует наш Интернет.

По стандарту, каждый компьютер, находящийся в Глобальной сети, имеет свой уникальный адрес - IP-адрес. IP-адрес представляет собой последовательность четырех чисел в диапазоне от 0 до 255, разделенных между собой точками.

    92.166.31.18
    192.168.0.1
		

Один компьютер может связаться с другим компьютером в сети, зная его IP-адрес. Но сказать "компьютер связался с компьютером" не совсем верно, так как связываются не сами компьютеры, а сетевые службы (программы), выполняющиеся на них.

Допустим, мы отправляем письмо по электронной почте, при этом наша почтовая программа связывается с почтовым сервером для отправки письма.

На компьютере одновременно может работать несколько сетевых программ, поэтому помимо IP-адреса для связи в стеки протоколов TCP/IP предусмотрено дополнительно такое понятие как порт.

Порт - это число в диапазоне от 1 до 65536. Таким образом, минимальным условием для связи одной сетевой программы с другой является наличие у первой IP-адреса и номера порта второй. Совокупность IP-адреса и порта принято записывать через двоеточие.

    92.166.31.18:8080
    192.168.0.1:443
		

Для установления связи первой программе задается номер порта и она начинает "ожидать" подключение второй. Второй программе указывается тот же самый номер порта и IP-адрес компьютера, на котором запущена первая программа. Это своего рода связь звонок по сотовому телефону, где номер телефона это совокупность IP-адреса и порта.

Программа, ожидающая подключение, называется сервером. Серверу при запуске указывается номер порта, часто говорят: "сервер слушает порт". На компьютере не может быть запущено более одного сервера с одинаковым номером порта, иначе невозможно определить, к какому из серверов подключаться. Программа, устанавливающая соединение с сервером, называется клиентом. На клиентов не распространяется подобное ограничение. К примеру, по этому на клиенте можно запустить более одного IRC-клиента. Также к серверу могут подключаться несколько клиентов с разных компьютеров, если это конечно поддерживает сам сервер.

Веб-сервер - это сетевая программа, ожидающая и принимающая запросы от клиентов и выдающий им HTTP-ответы, как правило, вместе с HTML-страницей, изображением, файлами, медиа-потоком или другими данными. По умолчанию, веб-сервер "слушает" порт под номером 80. Клиентом для веб-сервера выступает веб-браузер.

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

    yandex.ru
    vk.com
		

Доменные имена более понятны и более легки в запоминании. Однако, протокол TCP/IP не в состоянии найти требуемый компьютер по доменному имени, поэтому его необходимо преобразовать в IP-адрес. Для этого служат DNS-сервера, на которых расположены таблицы соответствий доменных имен и IP-адресов. Допустим, когда мы вводим в адресной строке браузера домен yandex.ru, в первую очередь посылается запрос на DNS-сервер для определения IP-адреса данного домена. Когда адрес определен, браузер пытается связаться с веб-сервером по этому адресу и стандартному порту 80. Если соединение с веб-сервером установлено, браузер запрашивает у веб-сервера требуемую страницу сайта.

Расположение корневых DNS-серверов
В принципе, веб-сервер можно настроить на работу и на другом порту, в таком случае в браузере при запросе страницы необходимо его указывать через двоеточие после доменного имени (например, site.ru:8080).

Каким же образом происходит запрос страницы сайта у веб-сервера? Для взаимодействия веб-сервера и браузера существует "общий язык", то есть стандарт, по которому формируются запросы и ответы. Этим стандартом служит протокол HTTP (HyperText Transfer Protocol).

HTTP

Стандарт RFC2616 Hypertext Transfer Protocol HTTP/1.1

Стандарт RFC7540 Hypertext Transfer Protocol Version 2 (HTTP/2)

HTTP ( HyperText Transfer Protocol - «протокол передачи гипертекста») - протокол прикладного уровня передачи данных (изначально - в виде гипертекстовых документов в формате HTML, в настоящий момент используется для передачи произвольных данных). Основой HTTP является технология клиент-сервер.

Когда вы заходите в браузер и вводите в адресную строку адрес к сайту, то браузер автоматически прибавляет к адресу приставку «http://». Единственное, эта приставка может быть по умолчанию скрыта, но если скопировать адрес и вставить его в другое место, то ее без труда можно будет увидеть. Эта приставка обозначает, что вы будете обращаться к ресурсу по протоколу HTTP.

Этот протокол соответствует схеме "запрос-ответ".На каждый HTTP-запрос браузера веб-сервер отвечает HTTP-ответом. По своей инициативе веб-сервер HTTP-пакеты не шлет, к тому же, зачастую, после завершения операции "запрос-ответ" сервер разрывает соединение с клиентом.

Схема запрос-ответ

Общение между хостом и клиентом происходит в два этапа: запрос и ответ. Клиент формирует HTTP запрос, в ответ на который сервер даёт ответ (сообщение).

По сути, протокол HTTP - это инструмент, с помощью которого можно передавать веб-страницы в сети Интернет. Веб-страница, которую мы получаем в ответе от сервера, на самом деле это HTML-код, который получает браузер и соответствующим образом его интерпретирует.

HTTP-сообщения

Каждое HTTP-сообщение состоит из трёх частей, которые передаются в указанном порядке:

Заголовки и тело сообщения могут отсутствовать, но стартовая строка является обязательным элементом, так как указывает на тип запроса/ответа.
Для версии протокола 1.1, сообщение запроса обязательно должно содержать заголовок Host.
HTTP-сообщения

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

Стартовые строки различаются для запроса и ответа. Строка запроса выглядит следующим образом

    METHOD URI HTTP/VERSION
			

Метод(METHOD)- это тип запроса, одно слово заглавными буквами.

URI определяет путь к запрашиваемому документу.

Версия протокола(VERSION) - определяет, в соответствии с какой версией стандарта HTTP составлен запрос(на данный момент актуальная версия 1.1 и по степенно уже внедряется HTTP/2).

Для того, чтобы обратиться к веб-странице по определённому адресу (в данном случае путь к ресурсу — это «/»), нам следует отправить следующий запрос:

    GET / HTTP/1.1
    Host: ya.ru
	
    GET /img/adqfcd12.txt HTTP/1.1
    Host: filehost.ru
			

Стартовая строка ответа сервера имеет следующий формат

    HTTP/Версия КодСостояния Пояснение 
			

Версия протокола - определяет, в соответствии с какой версией стандарта HTTP отправлен ответ(такая же версия как и в запросе).

Код состояния(Status Code) - три цифры (первая из которых указывает на класс состояния), которые определяют результат совершения запроса.

Пояснение к коду состояния(Reason Phrase) - текстовое пояснение к коду ответа, предназначено для упрощения чтения ответа человеком. Пояснение может не учитываться клиентским программным обеспечением, а также может отличаться от стандартного в некоторых реализациях серверного ПО.

    HTTP/1.1 200 ОК
    Server: nginx/1.2.1
    Date: Sat, 08 Mar 2014 22:53:46 GMT
    ....
			

Методы

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

Наиболее часто используются методы GET и POST

Обратите внимание на тот факт, что спецификация HTTP не обязывает сервер понимать все методы (которых на самом деле гораздо больше, чем 4) — обязателен только GET, а также не указывает серверу, что он должен делать при получении запроса с тем или иным методом.

GET

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

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

HTTP-запрос типа GET состоит только из HTTP-заголовков, тело у него отсутствует.

При помощи GET-запроса можно передать веб-серверу параметры - некоторую информацию. Например, если необходимо осуществить поиск по определённым имени, то с помощью параметров можно передавать имя веб-серверу.

Клиент может передавать параметры выполнения запроса в URI целевого ресурса после символа ?(знак вопроса)

Пример из адресной строки браузера
    GET /path/resource?param1=value1&param2=value2 HTTP/1.1
    Host: host.local
				

Основным преимуществом GET-параметров является их размещение непосредственно в URL, что дает возможность сформировать гиперссылку на документ с определенными параметрами.

Стоит помнить так же и о длине URL. Она ограничена 1024 символами, это является ограничением для данных, которые можно отослать GET запросом

POST

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

Основное предназначение POST запроса - это создания нового ресурса. POST запрос обычно содержит в себе всю нужную информацию для создания нового ресурса.

POST передает данные, используя тело HTTP запроса, в отличии от GET, который может передавать данные используя URI.

POST может отправлять гораздо большие объемы данных, чем GET запрос. Лимит устанавливается веб-сервером и обычно он колеблется в диапазоне от 2MB до 5MB(это ограничение только на размер одного запроса).

Передача данных методом POST более безопасна, чем методом GET, так как секретные данные (например пароль) не отображаются напрямую пользователю (в отличии от URI, который виден почти всегда).

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

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

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

Выделено пять классов кодов состояния.

Заголовки HTTP

Заголовки HTTP - это строки в HTTP-сообщении, содержащие разделённую двоеточием пару параметр-значение.

Все заголовки разделяются на четыре основных группы

Тело сообщения

Тело сообщения - это, собственно, передаваемые данные. В ответе передаваемыми данными, как правило, является html-страница, которую запросил браузер, а в запросе, например, в теле сообщения передается содержимое файлов, загружаемых на сервер. Но как правило, тело сообщения в запросе вообще отсутствует.

AJAX

AJAX (Asynchronous Javascript And Xml) – технология обращения к серверу без перезагрузки страницы. Технология AJAX в основном используется для создания асинхронных запросов к серверу. Асинхронный запрос - это запрос, который выполняется в фоновом режиме и не мешает пользователю взаимодействовать со страницей. За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

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

Несмотря на то, что в названии технологии присутствует буква X (от слова XML), использовать XML вовсе не обязательно. Под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.

Реальный пример использования AJAX

XMLHttpRequest

Объект XMLHttpRequest (или, как его кратко называют, «XHR») дает возможность из JavaScript делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на слово «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML.

Каждый экземпляр этого класса представляет единственную пару запрос/ответ, а свойства и методы объекта позволяют определять параметры запроса и извлекать данные из ответа.

Первое, что обычно необходимо сделать при использовании этого прикладного интерфейса к протоколу HTTP, это, разумеется, создать экземпляр объекта XMLHttpRequest

    var xhr = new XMLHttpRequest();
				

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

Настройка .open()

Следующий этап после создания объекта XMLHttpRequest - определение параметров HTTP-запроса вызовом метода open() объекта XMLHttpRequest, которому передаются две обязательные части запроса: метод и URI

    xhr.open("GET", "http://domain.local/img/sample.png");
				

Данный метод – как правило, вызывается первым после создания объекта XMLHttpRequest. Его синтаксис

    xhrReq.open(method, url[, async, user, password]);
				

С первыми двумя параметрам всё понятно. Третий параметр async - если установлено в false, то запрос производится синхронно, если true – асинхронно.

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

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

Параметры user, password(опциональны) - логин и пароль для HTTP-авторизации, если нужны.

Заметим, что вызов open, в противоположность своему названию не открывает соединение. Он лишь настраивает запрос, а коммуникация инициируется методом send().

Отправка данных .send()

По следний этап в процедуре выполнения HTTP-запроса с помощью объекта XMLHttpRequest передача необязательного тела запроса и отправка его серверу. Делается это с помощью метода send()

    xhrReq.send([body]);
				

Именно этод метод открывает соединение и отправляет запрос на сервер.

Данный пример не будет работать через codepen.io. Он представлен для удобного просмотра кода.
Ссылка на работающий пример. После нажатия на кнопку в примере откройте консоль чтобы посмотреть результат

GET-запросы не имеют тела, и в этом случае можно передать методу значение null или вообще опустить аргумент. POST-запросы имеют тело, в котором как раз передаются данные.

Получение ответа

Полный HTTP-ответ содержит код состояния, набор заголовков ответа и тело ответа. Все это доступно в виде свойств и методов объекта XMLHttpRequest

Пример 2.

Пример 3.

Событие readystatechange

Обычно объект XMLHttpRequest используется в асинхронном режиме: метод send() возвращает управление сразу же после отправки запроса, по этому методы и свойства, перечисленные выше, не могут использоваться до фактического получения ответа. Что бы определить момент получения ответа, необходимо обрабатывать событие readystatechange, возбуждаемое в объекте XMLHttpRequest. Но, что бы понять, как обрабатывать это событие, необходимо сначала разобраться со свойством readyState.

Свойство readyState - это целочисленное значение, определяющее код состояния HTTP-запроса; его возможные значения перечислены в таблице. Идентификаторы, указанные в первой колонке, - это константы, определяемые конструктором XMLHttpRequest.

КонстантаЗначениеОписание
UNSENT0Метод open() еще не был вызван
OPENED1Метод open() был вызван
HEADERS_RECEIVED2Были получены заголовки
LOADING3Идет прием тела ответа
DONE4Прием ответа завершен

Событие readystatechange возбуждается всякий раз, когда изменяется значение свойства readyState.

Пример 4.