Introduction to HTTP 
Published: 2021-02-01 22:37:54

##  What does HTTP stand for? 
 HTTP stands for HyperText Transfer Protocol. If the acronym is intimidating, don't worry we'll break these four words down further. 

Even if you're brand new to web development, you've likely heard of HTML, which stands for HyperText Markup Language. Any of that acronym seem familiar? (Hint: it's the "hypertext" part). 

HTML is a text-based approach to describing the structure of a web page's content. It is *the* major markup language used across the worldwide web. ([W3 Schools](https://www.w3schools.com/whatis/whatis_http.asp))

Okay, so HTML gives us the structure, or essentially, tells us how content on a web page should be *organized*. HTTP provides the rules (protocol) for how that content should be sent and received or *transferred* across the web. It is the foundation of any data exchange on the web. Hence, HyperText Transfer Protocol. 

To give you an analogy, let's say you want to order a bookcase from a furniture company. You have to provide that company with information about what type of bookcase you want, maybe the size, color, and model. The company has to process this information and get the bookcase to your door somehow. The rules, or protocol, the company uses to get the bookcase to you is HTTP. Once your bookcase arrives, the instructions for how to build the bookcase, how the pieces should be organized, is HTML. (Note: this simple analogy is imperfect but hopefully useful). 


<a data-flickr-embed="true" href="https://www.flickr.com/photos/25708116@N08/2984153738/in/photolist-5xGyWw-4uJBGW-63Q6X6-8wSHm-7PusJv-r1y8Uq-fHq1i-8QY16K-8XpEhc-4aLFH9-9WN3F6-63Q744-7ChABG-7Uebs7-pKRxCK-4ciuoZ-2KuqbX-2VX1xJ-4BzX3V-7JUweq-6sM4Tv-7JUwf9-4wE74m-uoWHG-8cYqV6-8TSF7E-63UjEA-2WbqRJ-5BnLF-9WQSRN-4CjRbw-2vjrfU-63Q6Rv-5VkXEP-57Jr11-6dQWMG-FZww-79JTaR-57NiqC-4vaspL-2mY331-wE8Xam-63Q6U8-5zjjei-8v1euR-9hxkcx-cKpSCf-2LvcsY-6hkvs3-7M2Rns" title="bookcase"><img src="https://live.staticflickr.com/3230/2984153738_deea09c372_w.jpg" width="267" height="400" alt="bookcase"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

## How does HTTP work? 


Now that we have a better understanding of what HTTP is, let's talk about how it works. 

Commonly, HTTP is defined as a stateless, "client-server" protocol or "request-response" protocol. The client-server protocol describes the communication between two computers. The client (maybe a browser or another application) requests data and the server provides a response. This is how we are able to go to a website (make a request) and see information (get the response). With this protocol, the client request always happens first and is followed by the server's response.<sup>1</sup>
   
"Stateless" describes the fact that once the server provides a response, it isn't required to keep information stored about each user. Each request is executed without any knowledge of the requests that were executed before it or after it.<sup>1</sup>

<a title="Gnome-fs-client.svg: David Vignoni
Gnome-fs-server.svg: David Vignoni
derivative work: Calimo, LGPL &lt;http://www.gnu.org/licenses/lgpl.html&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Client-server-model.svg"><img width="256" alt="Client-server-model" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Client-server-model.svg/256px-Client-server-model.svg.png"></a>



### HTTP Request 
The request is where it all begins. Let's look at the components of a request<sup>1</sup>: 
1. Request line 
1. Request Headers (it is possible to have zero headers)
1. An empty line 
1. The message body (optional)

```
GET /Protocols/rfc2626/rfc2616.htmll HTTP/1.1
Host: www.w3.org
User-Agent: Mozzila/5.0
(empty line)
```

The first word in the first line (GET) is the request method. This is the action that we want to be done. In this case, we literally want to get some information. GET was the first method and is the most fundamental it is supported with all browsers because it is how we get content. 

For your reference, a list of methods taken from [TutorialsPoint](https://www.tutorialspoint.com/http/http_methods.htm)

Methods    | Description
-----------|------------
GET    | The GET method is used to retrieve information from the given server using a given URI. Requests using GET should only retrieve data and should have no other effect on the data.
HEAD | Same as GET, but transfers the status line and header section only.
POST | A POST request is used to send data to the server, for example, customer information, file upload, etc. using HTML forms.
PUT | Replaces all current representations of the target resource with the uploaded content.
DELETE | Removes all current representations of the target resource given by a URI.
CONNECT | Establishes a tunnel to the server identified by a given URI
OPTIONS | Describes the communication options for the target resource.
TRACE | Performs a message loop-back test along the path to the target resource.

The request method is followed by the URI (Uniform Resource Identifier - we'll discuss this later) and the version of HTTP being used (yes, there is more than one version). While the request method holds the desired action, the headers contain other information for the server. Most of them are optional, but the host header field (which provides the name of the server along with the port number) is required.<sup>1</sup>

### HTTP Response 

We discussed how it all begins with a request. Well, every time there is a request an HTTP response is sent. Fortunately for us, the components that make up the HTTP response are very similar to the components that make up the HTTP request<sup>1</sup>: 

1. Status line 
1. Response headers (can be zero)
1. An empty line 
1. The message body (optional)

```
HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
Content-Length: 88
Content-Type: text/html
```

The first line is the status line. It has a status code that provides information on whether or not the success was successfully processed. Followed by response headers. This provides more information to the client the same way request headers provide more information to the server. Another lovely table also take from [TutorialsPoint](https://www.tutorialspoint.com/http/http_responses.htm)

Status Codes: 
Status Code Class|Description
-----------------|--------------
1xx|Informational. It means the request was received and the process is continuing.
2xx|Success.| It means the action was successfully received, understood, and accepted.
3xx|Redirection. It means further action must be taken in order to complete the request.
4xx| Client Error. It means the request contains incorrect syntax or cannot be fulfilled.
5xx|It means the server failed to fulfill an apparently valid request.

## URI 


Previously, I mentioned the URI (Uniform Resource Identifier). You may be more familiar with the term URL (uniform resource locator). The relationship between URIs and URLs is kind of like the relationship between rectangles and squares. All squares are rectangles, but not all rectangles are squares (Wow, what a throwback to my grade school lessons on shapes). All URLs are URIs but not all URIs are URLs. URIs allow us to identify distinct resources. We can do that with a URL (which tells us exactly where to find a resource ), but we can do that with other things too. Like a URN (uniform resource name), which tells us what a resource is called, but not how to find it.

 <a data-flickr-embed="true" href="https://www.flickr.com/photos/kosmulski_origami/50385835217/in/photolist-2jLqzoR-Gzmb1N-we7e8o-2dvzcCS-Bk2oRi-26Wraj4-oXMhyX-xe9RoG-2d6nWq3-naUC15-28NgWRD-CLCHHf-Q55mMD-mhWG2-RiMmh4-JKV2Mj-2i9VT6g-2jdAE1Z-2kuw5Fw-2j626ua-2jWGMdr-K4LApR-2iRvXn4-2jfTSE9-2g5U4tE-2jg28S1-8hnYmv-Jav4yy-2k7LzfR-2jvRYAo-8LCax5-2iKXjD1-2iLancP-RQWDaw-2ieVkZx-2jMDmj3-b8Zf5K-ALMnjz-2jtzLtq-27fmPuo-2hmKvAJ-21AFrMN-UpZQtC-KZr6Uk-K7LKxr-pTn6pj-2c94xBc-2fWQ8mD-2iTLpbX-PKSMTm" title="Rectangle and Square Flagstone"><img src="https://live.staticflickr.com/65535/50385835217_df48fe8fba_w.jpg" width="400" height="400" alt="Rectangle and Square Flagstone"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

If this is interesting (or confusing to you. [Wikipedia](https://en.wikipedia.org/wiki/Uniform_Resource_Identifier) has a great article breaking down the history and usage of all three), but I pretty much use URL and URI interchangeably. 


The goal of this article is to walk through HTTP since it's an integral part of web applications that is important to understand. When I was first learning about web development it felt like a topic that was important, but my understanding was kind of fuzzy. Hopefully, this article can provide some clarity.  

[1]: Sau Sheong Chang. Go Web Programming