Современные сайты разрабатываются на множестве языков и используют совершенно разные технологии, но принципы их устройства одинаковые. Так происходит, потому что внутреннее устройство сайтов определяется архитектурой веба.
В ее основе лежит протокол HTTP:
Именно о нем мы поговорим в этом уроке.
Как устроен протокол HTTP
Взаимодействие с любым сайтом сводится к следующим шагам:
- Пользователь запрашивает страницу сайта
- Браузер выполняет HTTP-запрос к веб-серверу на удаленном сервере
- Веб-сервер возвращает содержимое страницы в HTTP-ответе
- Браузер отрисовывает страницу сайта
- Пользователь кликает по ссылке на сайте и весь процесс повторяется снова
Каждый такой цикл включает в себя HTTP-сессию:
- HTTP-запрос
- HTTP-ответ
Самый простой способ увидеть HTTP-сессию — это использовать утилиту curl
:
# Запрос
curl -v --head https://ru.hexlet.io
# Здесь идет обработка запроса на сервере
* Trying 174.66.43.105:443...
# Здесь мы видим ответ
> HEAD / HTTP/2
> Host: ru.hexlet.io
> user-agent: curl/7.68.0
> accept: */*
>
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* old SSL session ID is stale, removing
* Connection state changed (MAX_CONCURRENT_STREAMS == 256)!
< HTTP/2 200
HTTP/2 200
< date: Wed, 09 Feb 2022 07:13:32 GMT
date: Wed, 09 Feb 2022 07:13:32 GMT
< content-type: text/html; charset=utf-8
content-type: text/html; charset=utf-8
...
<
* Connection #0 to host ru.hexlet.io left intact
Как протокол HTTP работает в разных языках
Принцип взаимодействия с сайтом не зависит от того, на чем он написан. В любом случае сайт видит запрос, который нужно обработать и вернуть ответ в виде HTML. При этом формат HTML для конкретного запроса определяется самим запросом — то есть запрошенной страницей и различными параметрами HTTP.
Другими словами, код сайта — набор обработчиков разных страниц, которые принимают входящие запросы, формируют ответ и возвращают его. Ниже мы рассмотрим примеры на разных языках. Даже не зная синтаксиса, вы можете уловить общую структуру всех примеров кода и найти функцию-обработчик, привязанную к конкретной странице.
PHP:
<?php
use Slim\Factory\AppFactory;
$app = AppFactory::create();
$app->get('/', function ($request, $response) {
return $response->write('Welcome to Slim!');
});
$app->get('/about', function ($request, $response) {
return $response->write('About My Site');
});
$app->run();
Ruby:
require 'sinatra'
get '/frank-says' do
'Put this in your pipe & smoke it!'
end
Python:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
Java:
import io.javalin.Javalin;
public class HelloWorld {
public static void main(String[] args) {
Javalin app = Javalin.create().start(7000);
app.get("/", ctx -> ctx.result("Hello World!"));
}
}
JavaScript:
import Express from 'express';
const app = new Express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
Реальные сайты устроены значительно сложнее, но в их основе всегда лежит связка «запрос-ответ» из этого урока. Именно она определяет общую структуру любого сайта, написанного на любом языке.
Самостоятельная работа
- Выполните запрос
curl --head https://hexlet.io
- Изучите отправляемые и возвращаемые заголовки
- Откройте консоль разработчика в своем браузере
- В консоли перейдите на вкладку Network и загрузите
https://ru.hexlet.io
- Изучите, какие запросы делает сайт, какие заголовки он использует и что приходит в ответ
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.