HTTP-запросы в браузере — HTTP API
Проще всего увидеть использование HTTP API прямо в браузере. Для удобства разработки и тестирования браузеры включают в себя панель разработчика — с ее помощью можно полностью проанализировать страницу, происходящие внутри процессы и HTTP-запросы.
В этом уроке мы обсудим, как работать с этой панелью и узнавать полезную информацию.
Чтобы открыть панель разработчика у себя в браузере, воспользуйтесь статьей . В этом курсе мы будем пользоваться панелью браузера Chrome:
Остальные браузеры работают почти идентично, поэтому будет несложно повторять то же самое в других браузерах.
Chrome DevTools
Здесь нас интересует вкладка Network. На ней отображаются все запросы, которые выполняет браузер в процессе загрузки страницы. Также здесь показаны картинки, шрифты, файлы стилей, JavaScript и HTML самой страницы:
На каждый из загружаемых ресурсов можно нажать. Появится еще несколько вкладок с информацией, какой HTTP-запрос был отправлен и какой HTTP-ответ был получен. Здесь можно увидеть все заголовки и превью загруженного ресурса:
В этой же вкладке появляются запросы к HTTP API, которые выполняются на странице, использующей API.
Чтобы отделить запросы к HTTP API от всего остального, на вкладке Network нужно нажать кнопку Fetch/XHR. Тогда в списке загружаемых ресурсов останутся ресурсы с типом xhr. Это и есть запросы к HTTP API.
Возьмем для примера форму входа. Когда пользователь авторизуется на сайте, то сайт выполняет запрос (или несколько запросов) к API. Можете самостоятельно проверить, как это работает:
- Перейдите на сайт https://frontend-chat-ru.hexlet.app/
- Откройте панель разработчика, перейдите на вкладку Network и нажмите Fetch/XHR
- Введите данные для входа: имя admin и пароль admin
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Как отправить get запрос javascript
Для отправки POST/GET запроса (и других) можно использовать Fetch API . Fetch API — это современная альтернатива XMLHttpRequest для работы с асинхронными HTTP запросами. Так, используя метод fetch() и указав необходимые параметры мы можем отправить или получить данные по сети.
fetch(url, [options]) - url – URL для отправки запроса.
- options – дополнительные параметры: метод, заголовки и так далее.
Без options это простой GET-запрос, скачивающий содержимое по адресу url. Метод возвращает promise.
fetch(url) .then(response => response.json()) // Декодируем ответ в формате json .then(data => console.log(data)); // Выводим ответ в консоль Взаимодействие браузера и сервера на примере GET и POST запросов. Обработка форм.
Итак, если у вас уже установлен на компьютере локальный сервер (дистрибьютив Денвер) и вы научились писать простейшие программы на PHP, то самое время узнать, каким образом браузер (клиент) может делать серверу запросы и получать соответствующие ответы. На примере создания простой HTML-формы мы изучим основные принципы такого взаимодействия.
Если вы уже хорошо разбираетесь в каталогах Денвера, то можете создать любой PHP-файл в удобной для вас директории и приступить непосредственно к написанию кода. Для тех, кто еще не уверен в своих силах, советую поступить следующим образом: на виртуальном диске с Денвером (обычно это Z) в папке home создайте папку lessons . Далее, в этой папке создайте еще одну папку – www . Это ваша рабочая папка проекта, которая будет доступна из строки адреса браузера. Перезагрузите Денвер, чтобы созданный хост прописался в системе. Наконец, в папке www создайте файл index.php . Это и будет основной файл с вашим кодом.
Содержание файла index.php:
Как видите – это обычная HTML-разметка, однако мы назвали файл index.php , а это значит, что теперь в документ мы можем вставлять любые инструкции на языке PHP.
Если вы теперь зайдете в браузере по адресу http://lessons/, то увидите такой результат:
Заполните поля (например: имя – Вася, год рождения – 1990) и нажмите на кнопку «отправить». Что вы видите? А ничего! Опять та же форма, только пустая. Однако не спешите огорчаться – взгляните на адресную строку браузера. Она изменилась и теперь выглядит примерно вот так:
http://lessons/index.php?user_name=Вася&user_year=1990&submit_form=отправить
А это значит, что сервер все-таки получил ваши данные!
Давайте теперь разберемся.
Метод GET
Во-первых, что вообще такое HTML-форма? Это интерфейс, позволяющий отправлять какие-либо данные с браузера клиента на сервер. Взгляните на атрибуты вашей формы:
Атрибут action отвечает за адрес получателя отправляемых данных. В нашем случае форма отправляется на тот же адрес, т.е. на lessons/index.php.
Особое внимание заслуживает атрибут method , который определяет метод отправки запроса на сервер. Таких методов несколько, а наиболее распространенные (и практичные) это методы GET и POST. Сейчас нас будет интересовать метод GET.
GET-запрос означает, что данные будут передаваться на сервер непосредственно через адресную строку. Вы в этом уже убедились, отправив форму – к строке адреса добавились определенные данные. Откуда эти данные берутся? Обратите внимание на теги input в HTML-форме. У всех их присутствует атрибут name , который устанавливает имя данного поля.
При методе GET к основному адресу добавляется символ «?» (знак вопроса), чтобы сервер понимал, что поступили какие-то данные. После символа «?» идут непосредственно сами данные в виде имя=значение . Если таких данных несколько, то они разделяются между собой символом объединения «&». Отправьте форму с другими значениями полей и убедитесь в этом.
Ладно, данные отправились. Что дальше? Куда они ушли и что с ними делать? Вот тут и начинается самое интересное.
Пришло время научиться «ловить» и обрабатывать полученные данные. Ввиду того, что атрибут action указывает на текущий файл index.php, значит данные поступают именно сюда, поэтому в этом же файле мы и пропишем код обработки GET-запроса .
Итак, сразу же после тега добавим такой PHP-код:
Сохраните файл, снова зайдите на http://lessons/, отправьте форму и – о, чудо! – что вы видите?
Только что, после отправки формы, сервер получил и обработал полученные данные и прислал в браузер свой ответ!
Рассмотрим PHP-код нашего проекта, который представляет собой условие:
if (isset($_GET[‘submit_form’]))
Сервер проверяет, а получена ли переменная GET-запроса с именем submit_form? То есть, говоря проще, а была ли вообще отправлена форма? Если это так, то серверный php-код отправляет прямо в браузер пользователя новую HTML-разметку со своим ответом, используя для этого оператор echo . Если вы внимательно изучите написанный код-обработчик, то вам сразу все станет понятным!
Интересный же этот метод GET! Измените адресную строку, например, на такую:
http://lessons/index.php?user_name=Мое-имя&user_year=1900&submit_form=отправить
и нажмите кнопку «Ввод». Сервер снова вам ответит, приняв уже другие данные! Думаю, с этим все понятно.
Недостатки GET-метода в том, что, во-первых, есть ограничение на объем передаваемых данных, а во-вторых, этот метод является открытым и любую информацию можно перехватить. Поэтому личные данные пользователя (логин, имя, пароль и др.) никогда нельзя передавать через строку адреса.
Метод POST
Этот метод подразумевает передачу данных отдельным пакетным потоком в теле запроса, что надежно защищает отправляемые данные и позволяет передавать внушительные объемы информации, которые могут быть ограничены лишь настройками сервера. Поэтому такой тип запроса идеально подходит для отправки личных данных и любых типов файлов.
Измените ваш файл, заменив в PHP-коде имена переменных $_GET на $_POST, а в форме пропишите method=»POST» . Обновите страницу и снова отправьте форму. Результат будет таким же, что и при методе GET, однако адресная строка осталась без изменений, а это значит, что данные были благополучно отправлены в защищенном виде в теле самого запроса.
Для закрепления материала создадим маленькое веб-приложение, которое будет запрашивать логин и пароль пользователя для входа на сайт. Код примера будет относительно сложным и от вас требуется внимание и желание разобраться в функционале PHP-программы.
Запустите пример и посмотрите, что происходит. Вначале запрашивается логин и пароль пользователя (в коде мы определили их как «admin» и «secret»), если все верно – мы попадаем на главную страницу сайта, если данные неверные – выводится соответствующее предупреждение.
Рассмотрим реализацию данной технологии.
Обратите внимание – весь код HTML-формы мы не выводим непосредственно, а запоминаем в переменной $form.
Будьте внимательны с кавычками! Весь HMTL-код находится внутри одинарных кавычек, поэтому его внутренние кавычки должны быть двойными . Если бы вы написали
$form = " …ваш код… ",
то внутренний код будет содержать наоборот – одинарные кавычки.
Далее, в строке 27 проверяется, была ли отправлена форма (условие 1 на рис.), если нет – выводится HTML-форма, и сценарий прекращает свою работу – функция die() . Больше ничего, кроме формы в браузер не выводится.
Если данные были получены, то проверяются POST-переменные на соответствие заданным (условие 2 на рис.). Если они не совпадают, то выводится предупреждающее сообщение, HTML-форма для входа и сценарий снова прекращает работу ( die() ).
Если же второе условие выполняется, то скрипт пропускает все операторы else и переходит на отображение основной страницы. ( переход 3 на рис.).
Это простейший пример. Естественно, в реальных проектах таких прямых проверок не производится – логин и пароль в зашифрованном виде хранятся в файлах или базе данных. Поэтому в статье описана сама технология взаимодействия клиента и сервера на основе GET и POST запросов. Для создания полноценных приложений вам необходимо иметь твердые знания по базам данных и объектно-ориентированному программированию. Об этом – в следующих статьях.
HTTP-запрос методом GET.
Одним из способов, как можно отправить запрос по протоколу HTTP к серверу, является запрос методом GET. Этот метод является самым распространенным и запросы к серверу чаще всего происходят с его использованием.
Самый простой способ, как можно создать запрос методом GET- это набрать URL-адрес в адресную строку браузера.
Если у вас есть желание погрузиться в тему серверного программирования глубже, все мои уроки здесь.
Браузер передаст серверу примерно следующую информацию:
GET / HTTP/1.1 Host: site.ru User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:18.0) Gecko/20100101 Firefox/18.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Cookie: wp-settings Connection: keep-alive
Запрос состоит из двух частей:
1. строка запроса (Request Line)
2. заголовки (Message Headers)
Обратите внимание, что GET запрос не имеет тела сообщения. Но, это не означает, что с его помощью мы не можем передать серверу никакую информацию. Это можно делать с помощью специальных GET параметров.
Чтобы добавить GET параметры к запросу, нужно в конце URL-адреса поставить знак «?» и после него начинать задавать их по следующему правилу:
имя_параметра1=значение_параметра1& имя_параметра2=значение_параметра2&…Разделителем между параметрами служит знак «&».
К примеру, если мы хотим передать серверу два значения, имя пользователя и его возраст, то это можно сделать следующей строкой:
http://site.ru/page.php?name=dima&age=27
Когда выполнен данный запрос, данные попадают в так называемую переменную окружения QUERY_STRING, из которой их можно получить на сервере с помощью серверного языка веб-программирования.
Вот пример, как это можно сделать на языке PHP.
"; echo "Ваш возраст: " . $_GET["age"] . "
"; ?>
Конструкция $_GET[«имя_параметра»] позволяет выводить значение переданного параметра.
В результате выполнения этого кода в браузере выведется:
Ваше имя: dima Ваш возраст: 27
Кстати, переходя по какой-либо ссылке, которая оформлена в HTML вот так:
мы тоже выполняем запрос к серверу методом GET.
Все мои уроки по серверному программированию здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: