How the Web Works, HTTP Request/Response Cycle

As we start to build out web applications, it is important to be able to visualize the way information flows through the system; typically called the Request/Response Cycle.

In the last article, we learned how to create a simple node server. Today we'll explore the HTTP protocol and the request/response cycle to get a better understanding of how a web server interacts with a browser.

How the web works

The basis of the web is asking for and receiving information. The 'asker' in this case is a client and the 'provider' is a server. The messages sent by the client, usually a Web browser, are called requests and the messages sent by the server as an answer are called responses.

HTTP is a set of rules for how this exchange of information happens.

What is a client?

A client is a piece of computer hardware or software that connects to and accesses the resources of a remote computer, or server. In the web development world, clients are web browsers (like Chrome, Firefox, Safari), but clients can also be API’s making requests to another server or the command line (when making cURL, telnet requests).

What is a server?

A server is a piece of computer hardware or software that provides resources, data, services, or functionality for other programs or devices, called clients.

What is HTTP?

HTTP (HyperText Transfer Protocol) is a protocol for fetching resources such as HTML documents, images, videos, scripts, and more.

HTTP is responsible for communication between web servers and clients. Every time you visit a webpage, submit a form, click a button, you make a request and get back a response.

HTTP is stateless

This means that every request is completely independent, there is no link between two requests successively carried out on the same connection.

That said, with programming, local storage, cookies, and sessions we can create enhanced user experiences that use stateful sessions.

HTTPS

Hypertext Transfer Protocol Secure (HTTPS) is an extension of the Hypertext Transfer Protocol (HTTP). It is used for secure communication over a computer network and is widely used on the Internet. In HTTPS, the communication protocol is encrypted using Transport Layer Security (TLS) or, formerly, Secure Sockets Layer (SSL).

HTTP Request

When a client (like a web browser) retrieves information, it sends a payload of data to a server as a request. This request is made up of three main parts:

A Request line, containing three pieces of information:
- the HTTP verb (also called an HTTP method) for sending or retrieving information
- the URI path of the resource where we’re sending or retrieving information
- the version of the HTTP protocol our “client” software is using, usually HTTP/1.1
Headers, which are key/value pairs, which contain supplemental information about our request
An optional body; we only send data to the server in the body when we are creating or modifying something

HTTP Response

When a server or web application is finished processing a request, it sends a response which is a payload of data, back to the client. This response contains three main parts:

a status line, containing three pieces of information:
- The version of the HTTP protocol that this response is using
- a 3-digit numeric “status code”.
- a user-friendly string description of what the “status code” means
Headers, also sent as key/value pairs similar to the HTTP request
An optional body; almost all responses will contain additional data in the body.

HTTP Methods

How the user wants to interact with the resource is communicated through the request method.

Below are the primary or most commonly-used HTTP methods. These methods correspond to create, read, update, and delete (or CRUD) operations, respectively. There are several other methods, too, but they are utilized less frequently.

GET - retrieve some information to be READ by the client/user
POST - CREATE a new resource with the information contained in the request
PUT - UPDATE an entire resource with the information contained in the request
PATCH - UPDATE a part of a resource with the information contained in the request
DELETE - DESTROY a resource, typically indicating that it is removed from the database

HTTP Headers

HTTP headers let the client and the server pass additional information with an HTTP request or response.

HTTP header fields are grouped into 3 categories:

General: These are fields that are common to all requests and responses.

Response: These are fields that are specific to responses.

Request: These are fields that are specific to requests.

HTTP Status Codes

Status codes are issued by a server in response to a client's request made to the server.

All HTTP response status codes are separated into five classes or categories. The first digit of the status-code defines the class of response, while the last two digits do not have any classifying or categorization role. There are five classes defined by the standard:

1xx informational response – the request was received, continuing process
2xx successful – the request was successfully received, understood, and accepted
3xx redirection – further action needs to be taken to complete the request
4xx client error – the request contains bad syntax or cannot be fulfilled
5xx server error – the server failed to fulfill a valid request

HTTP Cats API is a website that displays HTTP Status Codes with their definitions.

The Request/Response Cycle

Flow as executed by computers:

You open your browser, the client, and type in a web address like http://davisgitonga.dev and hit enter.
The browser takes this address and builds an HTTP Request. It addresses it to the server located at http://davisgitonga.dev.
The request is handed off to your Internet Service Provider (ISP) and sent through the internet, mostly a series of wires and fiber optic cables, to a server.
The server reads the request. It knows how to read it because it is formatted as an HTTP Request.
The server generates an HTTP Response to that request.
The server hands the response off to their ISP which goes through the internet to arrive at your computer.
Your browser reads the response. It knows how to read it because it is formatted as an HTTP Response.
Your browser displays the data on your machine.

Thanks for reading to the end, please share your feedback in the comments section below if you found this post helpful.