Технология AJAX

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-сообщение состоит из трёх частей, которые передаются в указанном порядке:

• Стартовая строка(Starting line) - определяет тип сообщения
• Заголовки(Headers) - характеризуют тело сообщения, параметры передачи и прочие сведения
• Тело сообщения(Message Body) - непосредственно данные сообщения. Обязательно должно отделяться от заголовков пустой строкой.

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

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

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

    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; существуют также методы PUT и DELETE) — обязателен только 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, который виден почти всегда).

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

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

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

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

• 1xx - Информационные
• 2xx - Успех
• 3xx - Перенаправление
• 4xx - Ошибки клиента
• 5xx - Ошибки сервера

Заголовки HTTP

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

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

• General Headers(«Основные заголовки») — могут включаться в любое сообщение клиента и сервера
• Request Headers(«Заголовки запроса») — используются только в запросах клиента
• Response Headers(«Заголовки ответа») — только для ответов от сервера
• Entity Headers(«Заголовки сущности») — сопровождают каждую сущность сообщения

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

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

AJAX

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

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

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

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

• Свойства status и statusText возвращают код состояния HTTP в числовом и текстовом виде. Эти свойства хранят стандартные HTTP-значения, такие как 200 и «OK» в случае успешного выполнения запроса или 404 и «Not Found» при попытке обратиться к ресурсу, отсутствующему на сервере.
• Заголовки ответа можно получить с помощью методов getResponseHeader() и getAllResponseHeaders().
• Тело ответа в текстовом в де доступно через свойство responseText или в виде объекта Document через свойство responseXML(выбор такого имени свойства объясняется историческими причинами).

Пример 2.

Пример 3.

Событие readystatechange

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

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

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

Пример 4.