HTTP - HackMD

# HTTP or, How Computers Talk To Each Other ![](https://media.giphy.com/media/3If8u5wFsfII0/giphy.gif) --- ## Networks Computers can be connected (e.g. via ethernet cable or Wi-Fi) --- ## Scales of network You can connect the computers in your house together (Local Area Network or LAN) We can join all the computers in the world together (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 1. Link layer (e.g. MAC, controls links between hardware like ethernet) 1. Internet Layer (e.g. IP, delivers "packets" of data between machines) 1. Transport Layer (e.g. TCP, ensures reliable & ordered delivery of info between machines) 1. Application Layer (e.g. HTTP, for apps to communicate with each other) --- ### 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 --- ### Client/Server The computer _requesting_ information is called the "client". The computer _responding_ to the request is called the "server" --- ### Client/Server Clients are usually web browsers. When you visit a site your browser sends a _request_ to the server. It uses the _response_ to display information on the page. Other clients might include a mobile app that uses HTTP to talk to its server. --- ## 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" } ``` --- ### Request method - `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 HTTP resources are identified by Uniform Resource Locators (URLs). The path can be a full URL (`https://google.com/`) or relative to the current page (`/thing.jpg`). --- ### Request headers Headers are additional information about the request. E.g. `accept` defines what type of response the client understands (like `text/html`). --- ### Request body This is optional. Requests for information (e.g. `GET`) can't have a body. Requests that _send_ information to the server will. Can be any format the server understands, but commonly `multipart/form-data` (from an HTML form) or JSON (`application/json`). --- ## HTTP Responses ``` HTTP/1.1 200 Ok Content-Type: text/html Content-Length 420 <!DOCTYPE html> <html> ... ``` --- ### Response status code 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 The requested information. Can be pretty much anything, but browsers will only explicitly render a few things (HTML, images, plain text). --- ## Sending requests Browsers have several ways to send requests. --- ### Navigation 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 Submitting a form sends a request to the URL defined 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 You can manually send a request in your own JS code using the `fetch` function. You can specify exactly what type of request to send, and what to do with the response. --- ## Further reading https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview