Skip to content
finote

14. What is HTTP

Introduction

Section titled “Introduction”

HTTP (HyperText Transfer Protocol) is the foundation of data communication on the World Wide Web. It’s the protocol that enables browsers to request web pages and servers to respond with the requested content. Understanding HTTP is essential for web development, as it governs how all web resources are transferred between clients and servers.

What is HTTP?

Section titled “What is HTTP?”

HTTP is an application-layer protocol used for transmitting hypermedia documents, such as HTML. It’s the standard protocol for communication between web browsers and web servers, defining how messages are formatted and transmitted, and how web servers and browsers respond to various commands.

Key Characteristics

Section titled “Key Characteristics”
  • Stateless: Each request is independent
  • Request-Response: Client requests, server responds
  • Text-based: Human-readable protocol
  • Application layer: Works on top of TCP/IP

How HTTP Works

Section titled “How HTTP Works”

HTTP follows a simple request-response pattern:

Basic Flow

Section titled “Basic Flow”
  1. Client sends request: Browser requests a resource
  2. Server processes: Server handles the request
  3. Server sends response: Server returns the resource
  4. Connection closes: (In HTTP/1.0 and 1.1, connections can be kept alive)

HTTP Request Structure

Section titled “HTTP Request Structure”

An HTTP request consists of:

Request Line

Section titled “Request Line”
GET /index.html HTTP/1.1
│    │            │
│    │            └─ HTTP Version
│    └─ Resource Path
└─ HTTP Method

Request Headers

Section titled “Request Headers”
Host: example.com
User-Agent: Mozilla/5.0...
Accept: text/html,application/xhtml+xml
Accept-Language: en-US,en;q=0.9

Request Body (Optional)

Section titled “Request Body (Optional)”

For POST and PUT requests:

username=john&password=secret

Complete Request Example

Section titled “Complete Request Example”
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml
Accept-Language: en-US,en;q=0.9
Connection: keep-alive

HTTP Response Structure

Section titled “HTTP Response Structure”

An HTTP response consists of:

Status Line

Section titled “Status Line”
HTTP/1.1 200 OK
│         │   │
│         │   └─ Status Text
│         └─ Status Code
└─ HTTP Version

Response Headers

Section titled “Response Headers”
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Date: Mon, 15 Jan 2024 12:00:00 GMT
Server: Apache/2.4.41

Response Body

Section titled “Response Body”

The actual content (HTML, JSON, etc.):

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Complete Response Example

Section titled “Complete Response Example”
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Date: Mon, 15 Jan 2024 12:00:00 GMT
Server: Apache/2.4.41


<!DOCTYPE html>
<html>...</html>

HTTP Methods

Section titled “HTTP Methods”

HTTP methods indicate the desired action:

GET

Section titled “GET”

Retrieve data from server:

GET /api/users HTTP/1.1

Characteristics:

  • Safe and idempotent
  • Can be cached
  • Parameters in URL
  • No request body

POST

Section titled “POST”

Submit data to server:

POST /api/users HTTP/1.1
Content-Type: application/json


{"name": "John", "email": "john@example.com"}

Characteristics:

  • Not idempotent
  • Can have request body
  • Used for creating resources
  • Not cached

PUT

Section titled “PUT”

Update existing resource:

PUT /api/users/123 HTTP/1.1
Content-Type: application/json


{"name": "John Doe", "email": "john@example.com"}

Characteristics:

  • Idempotent
  • Replaces entire resource
  • Requires resource identifier

PATCH

Section titled “PATCH”

Partially update resource:

PATCH /api/users/123 HTTP/1.1
Content-Type: application/json


{"email": "newemail@example.com"}

Characteristics:

  • Idempotent
  • Partial updates
  • More efficient than PUT

DELETE

Section titled “DELETE”

Delete a resource:

DELETE /api/users/123 HTTP/1.1

Characteristics:

  • Idempotent
  • Removes resource
  • No request body typically

HTTP Status Codes

Section titled “HTTP Status Codes”

Status codes indicate the result of a request:

2xx Success

Section titled “2xx Success”
  • 200 OK: Request successful
  • 201 Created: Resource created
  • 204 No Content: Success, no content returned

3xx Redirection

Section titled “3xx Redirection”
  • 301 Moved Permanently: Permanent redirect
  • 302 Found: Temporary redirect
  • 304 Not Modified: Use cached version

4xx Client Error

Section titled “4xx Client Error”
  • 400 Bad Request: Invalid request
  • 401 Unauthorized: Authentication required
  • 403 Forbidden: Access denied
  • 404 Not Found: Resource doesn’t exist
  • 405 Method Not Allowed: Method not supported

5xx Server Error

Section titled “5xx Server Error”
  • 500 Internal Server Error: Server error
  • 502 Bad Gateway: Invalid response from upstream
  • 503 Service Unavailable: Server temporarily unavailable
  • 504 Gateway Timeout: Upstream server timeout

HTTP Headers

Section titled “HTTP Headers”

Headers provide additional information:

Request Headers

Section titled “Request Headers”
  • Host: Target hostname
  • User-Agent: Client information
  • Accept: Acceptable content types
  • Accept-Language: Preferred languages
  • Authorization: Credentials
  • Content-Type: Request body type
  • Cookie: Stored cookies

Response Headers

Section titled “Response Headers”
  • Content-Type: Response body type
  • Content-Length: Response size
  • Set-Cookie: Cookie to set
  • Cache-Control: Caching directives
  • Location: Redirect URL
  • Server: Server information

HTTPS (HTTP Secure)

Section titled “HTTPS (HTTP Secure)”

HTTPS adds encryption to HTTP:

SSL/TLS

Section titled “SSL/TLS”
  • Encryption: Encrypts data in transit
  • Authentication: Verifies server identity
  • Integrity: Prevents tampering

Benefits

Section titled “Benefits”
  • Privacy: Encrypted communication
  • Security: Protected against interception
  • Trust: Verified server identity
  • SEO: Search engines prefer HTTPS

HTTP Versions

Section titled “HTTP Versions”

HTTP/1.0

Section titled “HTTP/1.0”
  • One request per connection: New connection for each request
  • Simple: Basic functionality
  • Limited: No persistent connections

HTTP/1.1

Section titled “HTTP/1.1”
  • Persistent connections: Reuse connections
  • Pipelining: Multiple requests (limited)
  • Chunked transfer: Streaming responses
  • Host header: Required

HTTP/2

Section titled “HTTP/2”
  • Multiplexing: Multiple requests simultaneously
  • Header compression: Reduced overhead
  • Server push: Proactive resource sending
  • Binary protocol: More efficient

HTTP/3

Section titled “HTTP/3”
  • QUIC protocol: Built on UDP
  • Faster: Reduced latency
  • Better mobile: Handles network changes
  • Encryption: Built-in security

Stateless Nature

Section titled “Stateless Nature”

HTTP is stateless—each request is independent:

Implications

Section titled “Implications”
  • No memory: Server doesn’t remember previous requests
  • Session management: Requires cookies or tokens
  • Scalability: Easier to scale horizontally
  • Caching: Responses can be cached independently

State Management

Section titled “State Management”

To maintain state, use:

  • Cookies: Stored on client
  • Sessions: Server-side state
  • Tokens: JWT, OAuth tokens
  • URL parameters: Query strings

Caching

Section titled “Caching”

HTTP provides caching mechanisms:

Cache-Control Headers

Section titled “Cache-Control Headers”
Cache-Control: public, max-age=3600

Directives:

  • public: Can be cached by any cache
  • private: Only browser cache
  • max-age: Cache duration in seconds
  • no-cache: Must revalidate
  • no-store: Don’t cache

ETag

Section titled “ETag”

Entity tag for cache validation:

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Common Use Cases

Section titled “Common Use Cases”

Loading a Web Page

Section titled “Loading a Web Page”
GET /index.html HTTP/1.1
Host: example.com


HTTP/1.1 200 OK
Content-Type: text/html


<!DOCTYPE html>...

Submitting a Form

Section titled “Submitting a Form”
POST /submit HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded


name=John&email=john@example.com

API Request

Section titled “API Request”
GET /api/users/123 HTTP/1.1
Host: api.example.com
Authorization: Bearer token123


HTTP/1.1 200 OK
Content-Type: application/json


{"id": 123, "name": "John", "email": "john@example.com"}

Best Practices

Section titled “Best Practices”

Use Appropriate Methods

Section titled “Use Appropriate Methods”
  • GET: For retrieving data
  • POST: For creating resources
  • PUT: For full updates
  • PATCH: For partial updates
  • DELETE: For deletion

Proper Status Codes

Section titled “Proper Status Codes”

Use correct status codes:

  • 200: Success
  • 201: Created
  • 400: Client error
  • 404: Not found
  • 500: Server error

Security Headers

Section titled “Security Headers”

Include security headers:

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

HTTPS

Section titled “HTTPS”

Always use HTTPS in production:

  • Encrypts communication
  • Protects user data
  • Required for modern features

References

Section titled “References”