HTTP

or, how computers talk to each other

Networks

Computers can be connected (e.g. via ethernet cable or Wi-Fi)

Scales of network

You can connect the computers in your house (Local Area Network or LAN)

We can connect lots of computers in the world (the Internet)

Protocols

Computers need a shared language in order to talk to each other

There are lots of these: IMAP, FTP, HTTP

(the P usually stands for “protocol”)

“Layers”

Computers are complex and talk to each other on different levels (or “layers”)

The Internet is built on a stack of layers (commonly called TCP/IP)

Internet Layers

Link layer
Internet Layer
Transport Layer
Application Layer

Link layer

MAC (Media Access Control) controls the physical connection between two computers

(e.g. managing the Wi-Fi connection)

Internet layer

IP (Internet Protocol) delivers “packets” of data from one machine to another

Transport layer

TCP (Transfer Control Protocol) ensures packets are delivered reliably in the right order

Application Layer

The application layer is the most important for web devs.

Applications on the web usually communicate using the HyperText Transfer Protocol (HTTP)

HyperText Transfer Protocol

A format everyone has agreed on to send requests for information and responses containing that information

Messages are sent using ASCII text (A-z, 0-9, some punctuation)

Without standardisation

Hey google.com, Firefox here, I’d like to search for “cats” please. Oh and could I get that as HTML?

Without clever AI this unstructured request is too complex.

With standardisation

GET https://google.com/?search=cats HTTP/1.1
User-Agent: Mozilla/5.0...
Accept: text/html

This request has structure, so a machine can understand it

Client/Server model

The computer requesting information is called the “client”.

The computer responding to the request is called the “server”

Clients

Clients are usually web browsers. Sometimes called “user-agents” as they make requests on behalf of a human user.

When you click a link or type a URL your browser sends a request to the server.

When it receives a response it displays it on the page.

If you’re wondering how the browser knows which computer on the internet to send the request to, you should read:

https://howdns.works/

Servers

Servers are normal computers (although usually very powerful).

Nowadays most sites are hosted on servers in dedicated data centres, but you can make your home computer a server if you want.

It just needs to sit listening for requests and sending responses.

HTTP Requests

POST https://facebook.com/signup HTTP/1.1
User-Agent: Mozilla/5.0...
Accept: text/html
Content-Type: application/json

{ "name": "leia organa" }

You won’t have to translate these in your head—the computer does it for you.

But it’s nice to know how human-readable the HTTP format is.

Request method

POST https://facebook.com/signup HTTP/1.1
...

GET: get me the thing
POST: here’s a thing
PUT: update the thing
DELETE: get rid of the thing
Plus a few more complex ones

Request path

POST https://facebook.com/signup HTTP/1.1
...

HTTP resources are identified by URLs (Uniform Resource Locators).

The path can be a full URL (https://google.com/) or just the “path” (/thing.jpg).

Sidenote: URL structure

https:// google.com :443 /search ?query=cats

Request protocol

POST https://facebook.com/signup HTTP/1.1
...

Not super important, but HTTP has been updated over time.

E.g. this could be HTTP/2 nowadays

Request headers

POST https://facebook.com/signup HTTP/1.1
User-Agent: Mozilla/5.0...
Accept: text/html
...

Headers are additional information about the request.

E.g. accept defines what type of response the client understands

Request body

...
Content-Type: application/json

{ "name": "leia organa" }

Requests that send information (e.g. POSTs) should include that here.

Can be any format the server understands, as long as you say what you’re sending in the content-type header.

HTTP Responses

HTTP/1.1 200 Ok
Content-Type: text/html
Content-Length 420

<!DOCTYPE html>
<html>
...

HTTP responses have a very similar structure to requests.

Response status code

HTTP/1.1 200 Ok
Content-Type: text/html
Content-Length 420

<!DOCTYPE html>
<html>
...

Tells the client the result of its request.

E.g. 404 Not found means “resource not found”, 200 Ok means “success”

https://http.cat/

Response body

HTTP/1.1 200 Ok
Content-Type: text/html
Content-Length 420

<!DOCTYPE html>
<html>
...

Contains whatever information was requested.

Browsers will only render a few types (HTML, images, plain text etc).

Other file types will generally just be downloaded.

Sending requests

Browsers have several ways to send requests.

Navigation

<a href="/contact">Contact us</a>

When you type in a URL or click a link the browser sends a GET request to that URL.

When it receives the response (if the body is HTML) it will render that on the page.

Form submission

<form action="/submit" method="POST">...</form>

Submitting a form sends a request to the URL in its action attribute.

The method defaults to GET but can be changed with the method attribute.

The browser will try to render the response just like a navigation.

Via JavaScript

fetch("/something").then((response) => console.log(response));

Manually send a request in your own JS code using fetch.

It defaults to a GET, but you can control the method/headers etc.

The browser won’t do anything automatically—your JS is responsible for updating the page.

In your terminal

Try making a request yourself using the curl command:

$ curl --verbose google.com

*   Trying 2a00:1450:400e:807::200e...
* TCP_NODELAY set
* Connected to google.com (2a00:1450:400e:807::200e) port 80 (#0)
> GET / HTTP/1.1
> Host: google.com
> User-Agent: curl/7.64.1
> Accept: */*
>
< HTTP/1.1 301 Moved Permanently
< Location: http://www.google.com/
< Content-Type: text/html; charset=UTF-8
< Date: Wed, 10 Mar 2021 16:22:34 GMT
< Expires: Fri, 09 Apr 2021 16:22:34 GMT
< Cache-Control: public, max-age=2592000
< Server: gws
< Content-Length: 219
< X-XSS-Protection: 0
< X-Frame-Options: SAMEORIGIN
<
<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>301 Moved</TITLE></HEAD><BODY>
<H1>301 Moved</H1>
The document has moved
<A HREF="http://www.google.com/">here</A>.
</BODY></HTML>
* Connection #0 to host google.com left intact
* Closing connection 0