How the Web Works

Learning Goals

• Define the vocabulary of the web.
• Develop a diagram for the web.

What is the Internet

The internet, which for most people is the web…how does that work?

The basis of all web interactions is someone asking for information, and receiving information. In order to ask for and receive any information, we need two players - the asker and the producer. In basic web interactions, the ‘asker’ is a client and the ‘producer’ is a server. A client is typically a web browser; for example, Chrome is a client. Clients send Requests to Servers asking for some kind of information. Upon receiving a Request, Servers send Responses back to the Client.

The Internet is the network between devices that allows clients and servers to exchange this information. HTTP is a set of rules for how this exchange of information happens. Clients and Servers adhere to these rules to ensure that they understand each other’s Requests and Responses.

In the web development world, a client is a web browser, not an individual person. The person using the browser is referred to as a user.

The Penpal Analogy

Okay, that was a lot of information. Let’s break all of this down with a metaphor.

Imagine you are writing to a penpal. The process would look something like this:

1. Write a letter
2. Specify your penpal’s address
3. Drop the letter in your mailbox
4. The letter goes through the postal system and arrives at your penpal’s mailbox

Your penpal then goes through a very similar set of steps:

1. Read your letter and write a response
2. Specify your address
3. Drop their letter in their mailbox
4. The letter goes through the postal system and arrives at your mailbox

In this analogy:

• You are the Client
• Your penpal is the Server
• Your letter is the Request
• Your penpal’s letter is the Response
• The postal system, the thing responsible for ensuring your letters are delivered, is The Internet
• The societal norms, and government postage rules that dictate what you can and cannot send through the mail is the HTTP

Metaphor aside, let’s run through the protocol as executed by computers:

1. You open your browser, the Client, and type in a web address like http://turing.edu and hit enter.
2. The browser takes this address and builds an HTTP Request. It addresses it to the Server located at http://turing.edu.
3. The Request is handed off to your Internet Service Provider (ISP) (like CenturyLink or Comcast) and they send it through the Internet, mostly a series of wires and fiber optic cables, to the Server.
4. The Server reads the Request. It knows how to read it because it is formatted as an HTTP Request.
5. The Server generates an HTTP Response to that Request.
6. The server hands the Response off to their ISP and it goes through the internet to arrive at your computer.
7. Your browser reads the Response. It knows how to read it because it is formatted as an HTTP Response.
8. Your browser displays the data on your machine.

That’s the HTTP Request/Response cycle. At its core, it is a bunch of formatting rules that Clients and Servers use to talk to each other.

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.

First a user gives a client a URL, the client builds a request for information (or resources) to be generated by a server. When the server receives that request, it uses the information included in the request to build a response that contains the requested information. Once built, that response is sent back to the client in the requested format, to be rendered to the user.

It is our job as web developers to build out and maintain servers that can successfully build responses based on standardized requests that will be received. But, what does a standard request look like? We need to know that before we can start building servers that will respond successfully.

The standard, or protocol we use is HTTP.

HTTP Requests and Responses

The HyperText Transfer Protocol gives us rules about how messages should be sent around the Internet. The system that initiates a connection sends a “request”, and the system the answers sends a “response”.

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 has many parts, but for now we are going to focus on the verb and path.

Verb and Path

Every request needs to be able to tell a server what information is requested and how that information is being requested. The what is the path, indicating what resource this request is referencing.

Examples of a path:

• /tasks
• /tasks/4
• /items/6/reviews

The how is the verb, indicating what actions the server should take regarding the requested resource. While the path can vary greatly based on the application, the verbs follow common patterns. There are 5 common HTTP verbs:

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

With these 5 verbs, we send requests that allow us to perform all CRUD functions (create, read, update, destroy) for resources in a database!

Checks for Understanding

• Imagine you are in an interview. The interviewer asks you to describe how the internet works. Write out your answer - use as many vocab words that you learned today as you can!
• List the 5 common http verbs and what they indicate about a request.
• Diagram the http request/response cycle for visiting weather.gov indicate as many of the parts of the request/response headers as you can.

Additional Resources

• How the Web Works