Что происходит когда в браузере набираешь адрес и нажимаешь enter

Вопрос №45082 от пользователя K R в уроке «Cookies», курс «Протокол HTTP»

Добрый день, я правильно понимаю, что все что мы делали в данном курсе руками внутри себя браузер производит сам автоматически? Он точно также отправляет запросы и тд? И еще как данные знания применяются в разработке? разработчику надо где-то прописывать методы в коде?(GET, POST и тд).

K R, приветствую.

На собеседованиях часто бывает вопрос «что происходит когда в строке браузера набираешь адрес и нажимаешь Enter». Считается, что чем более развёрнутый и осознанный ответ, тем выше уровень специалиста. Конечно, всё можно заучить, но вот чтобы понимать — надо понимать и операционные системы, и сети, и сервера, поэтому вариант «браузер всё делает сам» не годится даже приблизительно.

Если же мы говорим о том, что уже имеется страница с кнопками, то с неё запросы с разными методами посылает код, написанный разработчиками и, разумеется, там всё тоже не так просто.

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

Сергей Мелодин, то есть кнопка на странице при нажатии пользователем может отправить к примеру GET запрос?

K R, она может отправлять и POST-запрос, если это Submit у формы. Другое дело, что происходит это всё не столько само, сколько множеством «подкапотных» механизмов.

H Анатомия HTTP-запроса в черновиках

Каждый хороший разработчик должен знать, что происходит под капотом после того, как пользователь введет URL сайта в адресной строке браузера и нажмет кнопку «Перейти». На самом деле это самый частый вопрос на собеседовании. В этой статье мы разберем, что происходит во время обработки HTTP-запроса.

Терминология

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

• веб-сервер — программное обеспечение на сервере, которое позволяет принять и обработать входящий запрос
• DNS — сокращение от Domain Name System (система доменных имен), которая просто как телефонная книга, связывает адрес сайта с IP-адресом
• код ответа — число, которое обозначает тип ответа сервера. Общеизвестными являются 200 (все хорошо), 404 (не найдено), 302 (перенаправление), 500 (внутренняя ошибка сервера)

Шаг 1: поиск DNS

На самом деле веб-адреса представляют собой простую строку, которую выглядит как-то так: 216.58.198.174. Если вы перейдете по этому адресу с помощью браузера, то откроется Google. Доменное имя (google.com) это просто псевдоним, который позволяет пользователю легче запомнить адрес.

Итак, когда пользователь вводит доменное имя (например, google.com), браузер делает запрос к DNS и получает IP-адрес, который связан с этим именем.

Думайте о DNS как о телефонной книге. Вместо того, что запоминать номер Вани, вы можете записать его в телефонную книгу. Затем вы можете просто нажать «позвонить Ване» и ваш телефон найдет его номер в базе, и позвонит по этому номеру. В этой аналогии имя «Ваня» — это доменное имя, его номер — это IP-адрес, а телефонная книга — это DNS.

Шаг 2: выполнение запроса

После того, как браузер получил IP-адрес сервера от DNS, он может приступить к созданию запроса. Запрос содержит в себе заголовок и также может содержать тело запроса (например, данные из формы, которую отправил пользователь).

Заголовок содержит в себе следующие параметры:

• Request method (метод запроса) — чаще всего это либо GET, либо POST. Обычно GET-запрос используется для получения данных (например при отображении веб-страницы), а POST — при отправке формы или данных (например, при авторизации или отправке почты).
• Request URL (URL-запроса) — это полный URL, который говорит серверу, какую страницу запрашивает пользователь
• Protocol (протокол) — версия протокола HTTP (обычно 1.2)

В итоге запрос будет выглядеть так:

GET /about.html HTTP/1.1

Дополнительная информация может быть добавлена ниже. Они представлены в виде пар ключ/значение, где ключ — это идентификатор, название, а значение — собственно сам кусочек информации. Пример ниже включают в себя информацию о браузере пользователя (user-agent), куки (cookies), тип содержимого (content type), хост (host), которое в данном случае является названием домена и т.д. Полный HTTP-запрос выглядит как-то так:

GET /culture/anatomy-web-request HTTP/1.1[CRLF] Host: viacreative.co.uk[CRLF] Connection: close[CRLF] User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36 Accept-Encoding: gzip[CRLF] Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7[CRLF] Cache-Control: no-cache[CRLF] Accept-Language: de,en;q=0.7,en-us;q=0.3[CRLF]

Шаг 3: ответ сервера

После того, как сервер получил запрос, он генерирует ответ. Так же как и запрос ответ содержит различную информацию, включая:

• HTTP-код ответа (смотрите раздел «Терминология»). Если запрос прошел успешно, он (код) обычно равен 200 (все хорошо)
• дата и время генерации ответа
• HTML-содержимое страницы

Обычный ответ сервера выглядит как-то так:

HTTP/1.x 200 OK Transfer-Encoding: chunked Date: Mon, 19 Dec 2016 15:32:21 GMT Server: nginx/1.11.5 Connection: close Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Vary: Accept-Encoding, Cookie, User-Agent

Поле Content-Type говорит, браузеру, какой тип содержимого ему следует ожидать. В данном случае это простой HTML. Таким образом, браузер узнает, что ему нужно отрендерить и показать HTML. Тип содержимого может быть также указан как картинка, видео, JSON и т.д. Это поле говорит браузеру, как нужно обработать полученную информацию.

HTML также подключает различные ресурсы, такие как изображения, видео, шрифты или внешние CSS и JavaScript-файлы. Браузер отправляет запросы к серверу для получения этих ресурсов, а затем размещает их на странице. Если вы откроете инструменты разработчика в Google Chrome (Ctrl+Shift+J) и откроете какой-нибудь сайт, то увидите запросы, которые выполнил браузер (вкладка Network).

Заключение

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

комментарии ( 9 )

, —> grossws , 27 декабря 2016 в 16:41 (МСК)

Во-первых, для «оригинал тут» есть выбор публикация/перевод.

Во-вторых статей такого вида уже даже на хабре тонна и непонятно зачем этот мусор нужен ещё раз, да ещё и в хабе «программирование».

, —> muhammad_97 , 27 декабря 2016 в 17:04 (МСК)
Не нашел такой галочки, была только «туториал»
, —> grossws , 27 декабря 2016 в 17:08 (МСК)

, —> grossws , 27 декабря 2016 в 17:10 (МСК)

Это не считая того, что это же написано в help’е: https://habrahabr.ru/info/help/posts/:

Если нажать на слово «Публикацию» во фразе «Хочу опубликовать публикацию», то ниспадающее меню предложит вам выбрать второй доступный для создания вид записи — «Перевод». Механизм создания тот же, что и у публикации, но есть два дополнительных поля — «Автор оригинала» (тут надо указать имя автора оригинального текста) и «Ссылка на оригинал» (здесь — URL страницы оригинала).

, —> Grief , 27 декабря 2016 в 16:48 (МСК)

Статья очень-очень базовая. На мой взгляд, ее польза несколько сомнительна, но тем не менее, позволю себе оставить пару замечаний.
Мне кажется, что упоминание того, что заголовок Host с доменным именем используется веб-сервером для возможности одновременной работы нескольких веб-ресурсов на одном IP-адресе заслуживает упоминания даже в такой базовой статье. Хотя бы для того, чтобы новичку было понятно, почему при блокировке одного IP блокируются другие сайты, хостящиеся на том же адресе.
«Заголовок» — это на самом деле «строка запроса» (request line), чтобы не создавать путаницы с заголовками (headers), это проблема не перевода, а оригинала. «Пары ключ-значение» — это как раз заголовки.
И еще, мне кажется, что в самых базовых статьях стоит освещать тот факт, что уже 17 лет протокол HTTP/1.1, позволяет не закрывать соединение после каждого запроса-ответа для того чтобы ускорить работу сети, избавившись от затрат на переподключение для каждого ресурса. Для того, чтобы сервер и клиент понимали, когда данные завершились, используется, на мой взгляд один из самых главных заголовков Content-length, значением которого является размер тела сообщения в байтах. Если игнорировать этот заголовок в своих приложениях, даже при указании HTTP/1.1 в строке ответа сервера, соединение будет фактически HTTP/1.0 (Конечно, если не указан Transfer-Encoding, но вот это уже advanced ИМХО) Вообще, последняя спека написана вполне себе человеческим языком и не слишком длинная.

, —> muhammad_97 , 27 декабря 2016 в 17:11 (МСК)
Косяки есть, согласен, просто статья рассчитана на новичков
, —> lair , 27 декабря 2016 в 17:13 (МСК)

… а что, новичкам можно давать ошибочную информацию?

, —> lair , 27 декабря 2016 в 16:48 (МСК)

А почему в ответ на вопрос «что происходит» выбран именно этот уровень абстракции? Почему не разбираются детали TCP/IP соединения? Или HTTPS, которого сейчас много? Или почему не разбирается, что происходит в браузере между моментом нажатия на Enter и отправкой собственно HTTP-запроса?

В конце концов, почему переход на страницу в браузере приравнивается к HTTP-запросу?

, —> TimsTims , 27 декабря 2016 в 17:11 (МСК) * (был изменён)

+1
Начиная про то, что запрос имён в DNS не такая и простая штука, как кажется, заканчивая тем, что на шаге 2 перед формированием запроса происходит хотя бы банальное подключение к серверу.

Очередная статья, очень низкого уровня, имхо не годная для хабра, а вот для начинающих эникеев/домохозяек сойдет.

> Анатомия HTTP-запроса
И уж точно статью нельзя назвать «Анатомией http», а так — «беглый осмотр веб-технологий»

Время указано в том часовом поясе, который установлен на Вашем устройстве.

Блог Валерия Леонтьева

Место публикации личных заметок. Технологии, управление, бизнес, жизнь

Собеседование по PHP

Обратите внимание: пост написан в апреле 2009 года. Сейчас у меня вопросы немного другие. Как будет время, обновлю список.

Компания, в которой я работаю, собирается искать хорошего PHP-программера. В связи с этим мне стала задача разработать план проведения собеседования. Решил подготовиться к этому и составить план-список вопросов, по которым будет проходить беседа.

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

Естественно, что вопросов программисту PHP можно задать море. Особенно учитвая, что знать надо связанные области (БД, сети, HTML и иже с ним, Linux). Смысла задать все вопросы, какие только можно, конечно нету. Задача — определить уровень специалиста, чтобы принять решение: подходит он нам или нет. По-этому выбрал наиболее подходящие на мой взгляд вопросы, по которым я смогу оценить уровень кандидата.

Кроме того, конечно не одиними вопросами можно обойтись. Следует предложить пройти небольшие тесты по практическим моментам. Об этом ниже.

Вопросы

1. PHP и основы программирования
1.1. Почему PHP?
1.2. Что такое ООП, основные принципы ООП.
1.3. Понятие абстракции, наследования, инкапсуляции и полиморфизма.
1.4. Что такое MVC?
1.5. Какие паттерны проектирования вам известны?
1.6. Под какую версию PHP писали? В чем различия между четвертой и пятой версиями?
1.7. Какими сторонними библиотеками пользовались?
1.8. Опыт работы с различными Frameworks/CMS?
1.9. Типы данных в PHP? (string, int, float, object, resource, null, bool, array)
1.10. Назовите по памяти функции для работы с массивами, строками и объектами в PHP (хотя бы по 5 штук).
1.11. Что такое сериализация?
1.12. Чем отличается абстрактный класс от интерфейса?
1.13. В каких случаях лучше использовать статические методы и классы?
1.14. Можно ли создать приватный конструктор? Зачем?
1.15. Как сказывается большое количество объектов в коде на производительность?
1.16. Что такое хэш?
1.17. Что такое область видимости переменной?
1.18. Что такое PDO? Что такое ORM?
1.19. Что такое PEAR?
1.20. Когда лучше использовать mysql_pconnect?
1.21. Обязательно ли писать ?> в конце скрипта?
1.22. Как вы отлаживаете PHP-код?
1.23. Проводили когда-нибудь оптимизацию сайтов?
1.24. Какую IDE используете? Какие использовали ранее?
1.25. Что такое unit-test? Использовали?
2. Tools
2.1. Что такое Apache? mod_rewrite? nginx?
2.2. Аббревиатуры SVN и CVS о чем-нить говорят? А Git и Mercurial?
2.3. Багтрекинг системы? BugZilla? Mantis? Redmine? JIRA?
2.4 .Моделирование, UML использовали?
2.5. Что такое SSH? Какие есть варианты авторизации при входе по SSH?
3. Data Bases
3.1. Что такое реляционная база данных? Какие есть типы БД?
3.2. Нормализация, денормализация.
3.3. SQL. Join’ы, Union. Подзапросы.
3.4. Процедуры, тригеры.
3.5. Вьюшки.
3.6. InnoDB vs MyISAM.
3.7. Какие бывают индексы в MySQL?
3.8. В чем отличие MySQL от PostgreSQL?
3.9. Что такое SQL-инъекция? Приведите пример.
4. HTML + CSS
4.1. Нарисуйте простенькую форму для отправки файла.
4.2. Что такое CSS? В чем разница между записью #my и .my? Для каких атрибутов можно указать :hover?
4.3. Расшифруй вот такую запись в CSS table#a tbody td.odd ?
4.4. Что такое стандарты W3C?
5. JavaScript
5.1. Как работает наследование в JS?
5.2. Чем отличается хэш от объекта? (провокационный)
5.3. А хэш от массива?
5.4. Если ли опыт работы с Jquery, ExtJS? Какие фреймворки использовались?
5.5. Что такое Ajax? Есть ли опыт работы с ним?
5.6. Использовали ли FireBug? Drag-on-fly?
5.7. Что такое замыкания и как они работают?
6. Linux
6.1. С *nix знаком? Какие дистрибутивы? Почему?
6.2. Apache, PHP и СУБД устанавливали под *nix? Настраивали? Оптимизировали?
7. Networking
7.1. Что такое уровни модели OSI? Сколько их?
7.2. По какому протоколу осуществляется передача данных в сети Интернет?
7.3. Какие вообще есть сетевые протоколы?
7.4. Расскажите, что происходит, когда в строке браузера набираешь адрес и нажимаешь Enter?
7.5. Что такое WSDL & web-services? Есть опыт работы?
7.6. Что такое SSL? Как работает HTTPS? Какой принцип работы HTTPS? Какие есть варианты авторизации HTTP?
8. Что такое XSLT, XML? Есть ли опыт работы с ними?

Как отработает код?

1)
/* Что будет выведено на экран? */
$a = ‘true’;
if( 0 == $a || $a )
echo ‘yes’;
>

2)
/* Что будет выведено на экран? */
$a = 10;
echo $a— — — — — — — — — — — —$a;

3)

class A public function A() public static function I()>
/*
Как вывести на экран именно то ‘b’, которое определено в массиве выше, используя одну команду (одну строку кода)?
*/

/*
Какая строчка выведется при исполнении скрипта?
Почему исполняется или не исполняется каждое из условий?
*/
$x = 1;
if ($x == ‘1’) echo ‘a’;
>
if ($x == true) echo ‘b’;
>
if((bool)$x === true) echo ‘e’;
>
if ($x === true) echo ‘c’;
>
if((int)$x === true) echo ‘d’;
>

5)
/*
Что выведет скрипт? (запускается непосредственно)
*/
error_reporting(E_ALL);
ini_set(‘display_errors’,’0′);

6)
/*
Для какой версии PHP будет работать этот скрипт?
Что выведет этот скрипт?
*/
class Test

function setMe($value) $this->var = $value;
>
>

class More extends Test public $var;
>

$oTest = new Test;
$oMore = new More;

PHP: Собеседование // PHP

Довольно часто (постоянно) мне приходиться проводить собеседование людей желающих устроитсья в мой отдел на должность “junior PHP developer” и “PHP developer”. И, с завидным постоянством, я и team-lead отдела задаем одни и те же вопросы…

Каждое собеседование начинается с одного и того же вопроса:

– Почему PHP?

И, как ни странно, некоторые умудряются “засыпаться” уже на нем:
– Пробывал язык N – такой сложный, и поэтому решил учить PHP
или еще лучше:
– Решил пока поработать в PHP отделе, а потом перейти в отдел .Net
Но чаще всего слышим один из следующих ответов:
– Делал страничку – понадобилась динамика – выбор пал на PHP
– Кто-то, зачем-то посоветовал
– Преподавали в ВУЗе – только PHP и смог осилить

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

А теперь начинается самое оно:

– Под какую версию PHP писали? В чем различия между четвертой и пятой версиями?
– Какими сторонними библиотеками пользовались?
– Опыт работы с различными CMF/CMS?
– Типы данных в PHP? (их всего 8, не верите – читайте мануал)
– Назови по памяти функции для работы с массивами, строками
– Что такое сериализация?

И далее несколько практических вопросов…

– Что такое Apache? А mod_rewrite?

– Аббревиатура SVN и CVS о чем-нить говорят?

– Багтрекинг системы? BugZilla? JIRA?

Не забываем и о БД:
– Что такое реляционная база данных?
– Нормализация, денормализация
И чуть-чуть практики (связь многое-ко-многим в MySQL, каталог товаров произвольной вложенности)

HTML + CSS + W3C (знания HTML на базовом уровне считаю обязательным):
– Нарисуй-ка простенькую форму для отправки файла
– CSS знаешь? В чем разница между записью #my и .my?
– Расшифруй вот такую запись в CSS … (и далее что-то невообразимое, но вполне читабельное, задаю не часто, если только испытуемый заявляет что знает CSS)
– Что такое стандарты W3C?

Linux:
– С *nix знаком?
– Apache и PHP сетапил?

Сетевые технологии и не только:

– Знаешь что такое уровни модели OSI? Назови хотя бы их количество. (это вопрос на “пять”)
– По какому протоколу осуществляется передача данных в сети Интернет?
– Расскажи что поисходит, когда в строке браузера набираешь адрес и нажимаешь Enter?

Иностранные языки:
Тут особо не мучаем, если же в резюме указан уровень знания английского как “хорошо” – вот тогда нам на помощь спешит COTOHA – лучше правдиво пишите – уровень университета или начальной школы… 😉

Бывает, озадачиваем каким-нить тестом на сообразительность (поменяй-ка друг значение переменных A и B местами не используя третью переменную)

Вот подумываем написать тест, который однозначно говорил бы о уровне знаний человека (brainbench для новичков не подходит), если у кого есть что предложить – пишите в комментариях…

Информация

• jQuery для начинающих
• jQuery для всех
• PHP для всех

Проекты

• Charts Builder
• Photo Blog
• Syntax Highlighter

Блогролл

• NIX Solutions Ltd.
• Мысли с самого низа
• Прохождение игр

© Антон Шевчук 2007-2023