В JavaScript есть замечательные модули и методы, позволяющие создавать HTTP-запросы. Их можно использовать для отправки или получения данных с ресурса со стороны сервера. В этой статье мы рассмотрим несколько популярных способов добавления HTTP-запросов в JavaScript.
AJAX – традиционный способ создания асинхронных HTTP-запросов. Данные можно отправлять при помощи метода HTTP POST. Получать информацию можно с использованием метода HTTP GET. Давайте взглянем на этот способ и попробуем сделать запрос GET. Я буду использовать JSONPlaceholder – бесплатный онлайн REST API для разработчиков. Он возвращает случайные данные в формате JSON.
Чтобы сделать HTTP вызов в AJAX, нужно инициализировать новый метод XMLHttpRequest() , описать конечную точку URL и метод HTTP (в данном случае – GET). Наконец, мы применим метод open() , чтобы связать метод HTTP и конечную точку URL. Далее мы вызовем метод send() , чтобы отправить запрос.
Мы записываем HTTP ответ в консоль с использованием свойства XMLHTTPRequest.onreadystatechange . Оно содержит обработчик событий, который будет вызван при запуске события readystatechange .
Если вы просмотрите консоль своего браузера, она будет возвращать массив данных в формате JSON. Но как же нам узнать, когда запрос будет обработан? Другими словами, как же работать с ответами в случае с AJAX?
У свойства onreadystatechange есть 2 метода: readyState и status . Они позволяют нам проверять состояние запроса.
Если значение readyState равно 4, то это значит, что запрос закончен. У свойства readyState есть 5 ответов .
Помимо прямой отправки запроса в AJAX для JavaScript, существуют более мощные способы создавать HTTP-запрос (например, $.ajax ) – jQuery, допустим. Сейчас обсудим их.
Содержание
Методы jQuery
В jQuery есть много методов, позволяющие легко обходиться с HTTP-запросами. Чтобы использовать данные методы, вам понадобится включить в свой проект библиотеку jQuery.
$.ajax
Для JavaScript AJAX jQuery – один из самых простых способов обращения к HTTP.
Метод $.ajax имеет много параметров. Некоторые из них являются обязательными, а другие – нет. Этот метод содержит 2 опции обратного вызова: success и error. В них осуществляется работа, когда ответ получен.
$.get
Метод $.get используется для осуществления запросов GET. В нем 2 параметра: конечная точка и функция обратного вызова.
$.post
Метод $.post – еще один способ отправки данных на сервер. Он принимает 3 параметра: url, данные, которые вы хотите отправить, и функцию обратного вызова.
$.getJSON
Метод $.getJSON получает только данные в формате JSON. Он принимает 2 параметра: url и функцию обратного вызова.
В jQuery есть все эти методы, позволяющие отправлять запросы к удаленному серверу и получать от него ответ. Однако, по сути, все эти методы можно уложить в один: для JavaScript – $.ajax (jQuery), как показано ниже:
Fetch
fetch – новый мощный веб-API, который позволяет отправлять асинхронные запросы. Вообще, fetch – это один из лучших (и мой любимый) способов создания HTTP-запросов. Он возвращает Promise («обещание») – замечательную функцию в ES6. Promises позволяют работать с асинхронными запросами по-умному. Взглянем на то, как fetch работает:
Функция fetch принимает всего 1 обязательный параметр: конечную точку URL. В ней также есть и дополнительные параметры, которые продемонстрированы в примере ниже:
Как вы можете заметить, fetch обладает большим количеством преимуществ с точки зрения отправки HTTP-запросов. Кроме того, в fetch есть другие модули и плагины, которые позволяют получать и отправлять запросы к серверной стороне и от нее: например, axios .
Axios
Axios – это открытая библиотека для создания HTTP-запросов. В ней есть много отличных возможностей. Давайте рассмотрим, как она работает.
Для начала вам нужно будет включить Axios. Есть 2 способа включения Axios в свой проект.
Во-первых, можно использовать npm:
Затем вам нужно импортировать библиотеку:
Во-вторых, можно включить Axios при помощи CDN:
Создание запросов с Axios
С Axios можно использовать GET и POST как для того, чтобы получать данные с сервера, так и для того, чтобы отправлять их на него.
GET:
Axios включает в себя 1 обязательный параметр. Он также может принимать второй дополнительный параметр. Он использует данные в качестве простого запроса.
POST:
Axios возвращает Promise («обещание»). Если вы знакомы с обещаниями, то наверняка знаете, что одно обещание может работать с несколькими запросами. То же самое можно проделать с Axios – он тоже может «заниматься» несколькими запросами одновременно.
Axios поддерживает много других методов и опций.
Angular HTTPClient
У Angular есть собственный HTTP модуль, который работает с приложениями на Angular. Он использует библиотеку RxJS для работы с асинхронными запросами. В нем есть много вариантов для осуществления HTTP-запросов.
Отправляем вызов к серверу при помощи Angular HTTPClient
Чтобы сделать запрос с использованием Angular HTTPClient, нам нужно будет запустить свой код в приложении Angular. Из-за этого я и создал такое приложение.
Для начала нужно импортировать HTTPClientModule в app.module.ts .
Затем нам надо создать сервис, который будет обрабатывать запросы. Такой сервис можно легко сгенерировать при помощи Angular CLI .
Далее нужно импортировать HTTPClient в сервис fetchdataService.ts и ввести его в конструктор.
Кроме того, необходимо импортировать fetchdataService в app.component.ts .
Наконец, вызываем сервис и запускаем его.
Демонстрационный пример можно просмотреть на Stackblitz .
Заключение
Мы только что рассмотрели наиболее распространенные способы создания HTTP-запросов используя JavaScript.
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/xmlhttprequest.
Объект XMLHttpRequest (или, как его кратко называют, «XHR») даёт возможность из JavaScript делать HTTP-запросы к серверу без перезагрузки страницы.
Несмотря на слово «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML.
Использовать его очень просто.
Пример использования
Как правило, XMLHttpRequest используют для загрузки данных.
Для начала посмотрим на пример использования, который загружает файл phones.json из текущей директории и выдаёт его содержимое:
Далее мы более подробно разберём основные методы и свойства объекта XMLHttpRequest , в том числе те, которые были использованы в этом коде.
Настроить: open
Этот метод – как правило, вызывается первым после создания объекта XMLHttpRequest .
Задаёт основные параметры запроса:
method – HTTP-метод. Как правило, используется GET либо POST, хотя доступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.
URL – адрес запроса. Можно использовать не только http/https, но и другие протоколы, например ftp:// и file:// .
При этом есть ограничения безопасности, называемые «Same Origin Policy»: запрос со страницы можно отправлять только на тот же протокол://домен:порт , с которого она пришла. В следующих главах мы рассмотрим, как их можно обойти.
async – если установлено в false , то запрос производится синхронно, если true – асинхронно.
«Синхронный запрос» означает, что после вызова xhr.send() и до ответа сервера главный поток будет «заморожен»: посетитель не сможет взаимодействовать со страницей – прокручивать, нажимать на кнопки и т.п. После получения ответа выполнение продолжится со следующей строки.
«Асинхронный запрос» означает, что браузер отправит запрос, а далее результат нужно будет получить через обработчики событий, которые мы рассмотрим далее.
- user , password – логин и пароль для HTTP-авторизации, если нужны.
Заметим, что вызов open , в противоположность своему названию ( open – англ. «открыть») не открывает соединение. Он лишь настраивает запрос, а коммуникация инициируется методом send .
Отослать данные: send
Именно этод метод открывает соединение и отправляет запрос на сервер.
В body находится тело запроса. Не у всякого запроса есть тело, например у GET-запросов тела нет, а у POST – основные данные как раз передаются через body .
Отмена: abort
Вызов xhr.abort() прерывает выполнение запроса.
Ответ: status, statusText, responseText
Основные свойства, содержащие ответ сервера:
status HTTP-код ответа: 200 , 404 , 403 и так далее. Может быть также равен 0 , если сервер не ответил или при запросе на другой домен. statusText Текстовое описание статуса от сервера: OK , Not Found , Forbidden и так далее. responseText Текст ответа сервера.
Есть и ещё одно свойство, которое используется гораздо реже:
Если сервер вернул XML, снабдив его правильным заголовком Content-type: text/xml , то браузер создаст из него XML-документ. По нему можно будет делать запросы xhr.responseXml.querySelector(". ") и другие.
Оно используется редко, так как обычно используют не XML, а JSON. То есть, сервер возвращает JSON в виде текста, который браузер превращает в объект вызовом JSON.parse(xhr.responseText) .
Синхронные и асинхронные запросы
Если в методе open установить параметр async равным false , то запрос будет синхронным.
Синхронные вызовы используются чрезвычайно редко, так как блокируют взаимодействие со страницей до окончания загрузки. Посетитель не может даже прокручивать её. Никакой JavaScript не может быть выполнен, пока синхронный вызов не завершён – в общем, в точности те же ограничения как alert .
Если синхронный вызов занял слишком много времени, то браузер предложит закрыть «зависшую» страницу.
Из-за такой блокировки получается, что нельзя отослать два запроса одновременно. Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают.
Из всего вышесказанного уже должно быть понятно, что синхронные запросы используются чрезвычайно редко, а асинхронные – почти всегда.
Для того, чтобы запрос стал асинхронным, укажем параметр async равным true .
Если в open указан третий аргумент true (или если третьего аргумента нет), то запрос выполняется асинхронно. Это означает, что после вызова xhr.send() в строке (1) код не «зависает», а преспокойно продолжает выполняться, выполняется строка (2) , а результат приходит через событие (3) , мы изучим его чуть позже.
Полный пример в действии:
Событие readystatechange происходит несколько раз в процессе отсылки и получения ответа. При этом можно посмотреть «текущее состояние запроса» в свойстве xhr.readyState .
В примере выше мы использовали только состояние 4 (запрос завершён), но есть и другие.
Запрос проходит их в порядке 0 → 1 → 2 → 3 → … → 3 → 4 , состояние 3 повторяется при каждом получении очередного пакета данных по сети.
Пример ниже демонстрирует переключение между состояниями. В нём сервер отвечает на запрос digits , пересылая по строке из 1000 цифр раз в секунду.
При состоянии readyState=3 (получен очередной пакет) мы можем посмотреть текущие данные в responseText и, казалось бы, могли бы работать с этими данными как с «ответом на текущий момент».
Однако, технически мы не управляем разрывами между сетевыми пакетами. Если протестировать пример выше в локальной сети, то в большинстве браузеров разрывы будут каждые 1000 символов, но в реальности пакет может прерваться на любом байте.
Чем это опасно? Хотя бы тем, что символы русского языка в кодировке UTF-8 кодируются двумя байтами каждый – и разрыв может возникнуть между ними.
Получится, что при очередном readyState в конце responseText будет байт-полсимвола, то есть он не будет корректной строкой – частью ответа! Если в скрипте как-то по-особому это не обработать, то неизбежны проблемы.
HTTP-заголовки
XMLHttpRequest умеет как указывать свои заголовки в запросе, так и читать присланные в ответ.
Для работы с HTTP-заголовками есть 3 метода:
Устанавливает заголовок name запроса со значением value .
Нельзя установить заголовки, которые контролирует браузер, например Referer или Host и ряд других (полный список тут).
Это ограничение существует в целях безопасности и для контроля корректности запроса.
Особенностью XMLHttpRequest является то, что отменить setRequestHeader невозможно.
Повторные вызовы лишь добавляют информацию к заголовку, например:
Возвращает значение заголовка ответа name , кроме Set-Cookie и Set-Cookie2 .
Возвращает все заголовки ответа, кроме Set-Cookie и Set-Cookie2 .
Заголовки возвращаются в виде единой строки, например:
Между заголовками стоит перевод строки в два символа "
" (не зависит от ОС), значение заголовка отделено двоеточием с пробелом ": " . Этот формат задан стандартом.
Таким образом, если хочется получить объект с парами заголовок-значение, то эту строку необходимо разбить и обработать.
Таймаут
Максимальную продолжительность асинхронного запроса можно задать свойством timeout :
При превышении этого времени запрос будет оборван и сгенерировано событие ontimeout :
Полный список событий
Современная спецификация предусматривает следующие события по ходу обработки запроса:
- loadstart – запрос начат.
- progress – браузер получил очередной пакет данных, можно прочитать текущие полученные данные в responseText .
- abort – запрос был отменён вызовом xhr.abort() .
- error – произошла ошибка.
- load – запрос был успешно (без ошибок) завершён.
- timeout – запрос был прекращён по таймауту.
- loadend – запрос был завершён (успешно или неуспешно)
Используя эти события можно более удобно отслеживать загрузку ( onload ) и ошибку ( onerror ), а также количество загруженных данных ( onprogress ).
Ранее мы видели ещё одно событие – readystatechange . Оно появилось гораздо раньше, ещё до появления текущего стандарта.
В современных браузерах от него можно отказаться в пользу других, необходимо лишь, как мы увидим далее, учесть особенности IE8-9.
IE8,9: XDomainRequest
В IE8 и IE9 поддержка XMLHttpRequest ограничена:
- Не поддерживаются события, кроме onreadystatechange .
- Некорректно поддерживается состояние readyState = 3 : браузер может сгенерировать его только один раз во время запроса, а не при каждом пакете данных. Кроме того, он не даёт доступ к ответу responseText до того, как он будет до конца получен.
Дело в том, что, когда создавались эти браузеры, спецификации были не до конца проработаны. Поэтому разработчики браузера решили добавить свой объект XDomainRequest , который реализовывал часть возможностей современного стандарта.
А обычный XMLHttpRequest решили не трогать, чтобы ненароком не сломать существующий код.
Мы подробнее поговорим про XDomainRequest в главе XMLHttpRequest: кросс-доменные запросы. Пока лишь заметим, что для того, чтобы получить некоторые из современных возможностей в IE8,9 – вместо new XMLHttpRequest() нужно использовать new XDomainRequest .
Теперь в IE8,9 поддерживаются события onload , onerror и onprogress . Это именно для IE8,9. Для IE10 обычный XMLHttpRequest уже является полноценным.
IE9- и кеширование
Обычно ответы на запросы XMLHttpRequest кешируются, как и обычные страницы.
Но IE9- по умолчанию кеширует все ответы, не снабжённые антикеш-заголовком. Другие браузеры этого не делают. Чтобы этого избежать, сервер должен добавить в ответ соответствующие антикеш-заголовки, например Cache-Control: no-cache .
Впрочем, использовать заголовки типа Expires , Last-Modified и Cache-Control рекомендуется в любом случае, чтобы дать понять браузеру (не обязательно IE), что ему следует делать.
Альтернативный вариант – добавить в URL запроса случайный параметр, предотвращающий кеширование.
Например, вместо xhr.open(‘GET’, ‘service’, false) написать:
По историческим причинам такой способ предотвращения кеширования можно увидеть много где, так как старые браузеры плохо обрабатывали кеширующие заголовки. Сейчас серверные заголовки поддерживаются хорошо.
Итого
Типовой код для GET-запроса при помощи XMLHttpRequest :
Мы разобрали следующие методы XMLHttpRequest :
- open(method, url, async, user, password)
- send(body)
- abort()
- setRequestHeader(name, value)
- getResponseHeader(name)
- getAllResponseHeaders()
- timeout
- responseText
- responseXML
- status
- statusText
- onreadystatechange
- ontimeout
- onerror
- onload
- onprogress
- onabort
- onloadstart
- onloadend
Задачи
Выведите телефоны
Создайте код, который загрузит файл phones.json из текущей директории и выведет все названия телефонов из него в виде списка.
Исходный код просто выводит содержимое файла (скачайте к себе):
Принцип отправки данных может отличаться в различных ситуациях. Рассмотрим эти ситуации.
Отправка GET-запроса
GET-запрос характеризуется тем, что данные могут отправляться в строке запроса:
Для отправки берем свойства объекта user и формируем из их значений сроку с параметрами: "name=" + user.name + "&age="+user.age . Затем эта строка добавляется к строке запроса в методе open("GET", "http://localhost:8080/postdata.php?"+body)
Предполагается, что данные отправляются скрипту на языке php postdata.php, который может иметь, например, следующее содержание:
Конкретная технология стороны сервера тут не важна. И в качестве тестирования можно взять любую другую технологию. Например, ASP.NET MVC. Метод контроллера в ASP.NET MVC, который принимает данные, мог бы выглядеть следующим образом:
Кодирование параметров
Все отправляемые в GET-запросе параметры разделяются знаком амперсанда(&). Но что, если какой-нибудь параметр имеет знак амперсанда. Например,
В этом случае при получении параметров скрипт на стороне сервера может неправильно обработать данные и неправильно извлечь параметры. Поэтому, чтобы кодировать все передаваемые данные, нужно применять функцию encodeURIComponent() :
При этом строка "Tom&Tim" будет кодирована в следующую строку: "Tom%26Tim".
При необходимости мы можем выполнить обратное декодирование с помощью функции decodeURIComponent() :
POST-запросы
Отправка данных в POST-запросах будет немного отличаться:
Для отправки данных методом POST надо установить заголовок Content-Type с помощью метода setRequestHeader() . В данном случае заголовок имеет значение application/x-www-form-urlencoded .
Отправка форм. FormData
Начиная со спецификации XMLHttpRequest2 в JavaScript появился новый объект — FormData , который позволяет сериализовать данные формы для ее последующей отправки. При этом нам даже необязательно создавать форму в коде html, мы можем создать ее динамически в JavaScript:
Для добавления данных у объекта FormData используется метод append(‘имя_параметра’, значение) . При этом никакие заголовки указывать не надо.
Также мы можем определить форму в html и использовать ее для отправки:
Для сериализации всех полей формы нам достаточно передать объект формы в конструктор FormData: var formData = new FormData(form);
