What is HTTP?
When you visit a webpage, either by typing in the URL or clicking a link, your browser makes a request to a web server.
For More Detail: https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages
sequenceDiagram
autonumber
browser->>web server: GET /index.html HTTP/1.1
web server->>browser: HTTP 1.1\n\n
Steps:
- User: types in example.com & hit enter
- Browser: convert that intent to a HTTP request (“GET /index.html”) and sent it to the example.com server.
- Server: Send back an HTTP Response (200 OK, followed by HTML content)
As you may recall, the HTML may contain references to other documents
<img src="/images/monkey.gif">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="main.js"></script>
These tags suggest that the browser goes out and fetches additional content. The browser is free to ignore these (JS is off, you’re in a text-only browser, ad blocking, etc.).
These additional documents would each be fetched in another request
GET /images/monkey.gif HTTP/1.1
Host: example.com
and so on.
What the browser does then is take all of that data and dynamically build a user interface in front of you. It does this very quickly, and so relies on lots of clever tricks like caching, but every time a request is made the page loads all of this data and assembles it into what you are looking at right now, a webpage. The HTML provides the structure and most of the content, the CSS providing styling, and JS interactivity, plus images, videos, etc.
Originally, browsers were for viewing documents, for the most part an HTML document is just text, images, and whatever styling the user applies to it.
Forms are also part of HTML. When you go to a site and submit a form, usually what happens is the data you’ve entered into the form becomes a part of a new request, often a POST instead of a GET. (There’s a bit more nuance to this in practice.)
This looks something like:
POST /submit-form HTTP/1.1
Host: example.com
username=steve&password=grasshopper
The server still needs to provide a response, something like:
200 OK
Thank you for submitting the form!
Each of these interactions is an HTTP request, and you typically see the browser reload the entire page between them.