Request-Response Cycle

Understanding how browsers communicate with servers

What is HTTP?

HTTP (Hypertext Transfer Protocol) is the foundation of data communication on the World Wide Web. It defines how messages are formatted and transmitted between web browsers (clients) and web servers.

When you type a URL in your browser or click a link, HTTP governs the conversation between your browser and the server hosting the website.

The Client-Server Model

HTTP follows a client-server architecture:

  • Client: The application making requests (usually a web browser, but can be mobile apps, command-line tools, or other software)
  • Server: The machine that receives requests, processes them, and sends back responses

The client always initiates communication by sending a request. The server listens for requests, processes them, and returns responses. This is a stateless protocol—each request-response pair is independent.

HTTP Request Structure

An HTTP request consists of three main parts:

  1. request line
  2. headers
  3. body (aka payload)

The Law of Three for HTTP is useful to understand. Three parts go in and three parts come out, that is the entire surface area of an HTTP conversation.

Here's a complete request with all three parts labeled:

The Request Line

The first line of every HTTP request contains three pieces of information: the HTTP method, the resource path, and the protocol version:

Request Headers

Headers provide additional information about the request. Each header is a key-value pair. The Host header is required in HTTP/1.1—it tells the server which website you're requesting (important for servers hosting multiple sites):

Common request headers include:

  • Host: The domain name of the server (required)
  • Accept: Media types the client can handle
  • User-Agent: Information about the client software
  • Authorization: Credentials for authentication

Request Body

Some requests include a body containing data to send to the server. This is common with POST and PUT requests when submitting form data or creating resources. Notice the JSON body highlighted below:

HTTP Response Structure

An HTTP response also has three parts: the status line, headers, and an optional body.

Here's a complete response with all three parts labeled:

The Status Line

The first line of every response contains the protocol version, a numeric status code, and a human-readable reason phrase. The status code tells you whether the request succeeded:

Response Headers

Response headers provide metadata about the response. The Content-Type header is particularly important—it tells the client how to interpret the response body:

Common response headers include:

  • Content-Type: The media type of the response body
  • Content-Length: Size of the response body in bytes
  • Cache-Control: Caching directives
  • Set-Cookie: Instructs client to store a cookie

Response Body

The body contains the actual content—HTML pages, JSON data, images, or other resources. Here's an HTML response with the body highlighted:

Common HTTP Methods

HTTP defines several methods (also called verbs) that indicate the desired action:

  • GET - Retrieve a resource (most common)
  • POST - Submit data to create a new resource
  • PUT - Update an existing resource completely
  • PATCH - Partially update a resource
  • DELETE - Remove a resource
  • HEAD - Like GET but returns only headers
  • OPTIONS - Describe communication options

Status Code Categories

HTTP status codes are grouped into five categories based on their first digit:

  • 1xx (Informational) - Request received, continuing process
  • 2xx (Success) - Request successfully received and processed
    • 200 OK - Success
    • 201 Created - Resource created
    • 204 No Content - Success with no body
  • 3xx (Redirection) - Further action needed
    • 301 Moved Permanently - Resource has new URL
    • 304 Not Modified - Cached version still valid
  • 4xx (Client Error) - Request contains bad syntax or cannot be fulfilled
    • 400 Bad Request - Invalid request
    • 401 Unauthorized - Authentication required
    • 403 Forbidden - Access denied
    • 404 Not Found - Resource doesn't exist
  • 5xx (Server Error) - Server failed to fulfill valid request
    • 500 Internal Server Error - Generic server error
    • 502 Bad Gateway - Invalid upstream response
    • 503 Service Unavailable - Server temporarily overloaded

Complete Examples

Now let's look at complete HTTP exchanges without any highlighting to see the full picture.

GET Request for JSON Data

A typical API request retrieving user information:

POST Request Creating a Resource

Creating a new user with JSON data in the request body:

Error Response (404 Not Found)

What happens when a requested resource doesn't exist:

HTML Page Response

A browser requesting and receiving an HTML page: