HTTP Protocol Basics: The Language and Core Mechanism of Web Communication

What is HTTP?

HTTP (HyperText Transfer Protocol) is the most important communication protocol in the Web world. It defines how browsers and servers exchange information.

Understanding HTTP Through a Life Analogy

Imagine you're ordering at a restaurant:

1. You (Browser): Hello, I'd like pasta (send request)
2. Waiter (HTTP Protocol): Received, I'll relay to the kitchen (transmit request)
3. Kitchen (Server): Okay, here's your prepared pasta (prepare response)
4. Waiter (HTTP Protocol): Here's your pasta (transmit response)
5. You (Browser): Received, starting to enjoy (receive and process)

In this process:

• Request: What you want (request content)
• Response: What the restaurant gives you (response content)
• Protocol: Rules and process of ordering (communication specification)

Characteristics of HTTP

1. Stateless

HTTP itself doesn't remember previous interactions:

• Each request is independent
• Server doesn't automatically remember who you are
• Like having to tell the waiter your order every time

Solutions:

• Cookie: Store small data in the browser
• Session: Store user session on server
• Token: Use tokens to identify user identity

2. Based on Request-Response Model

• Client actively initiates request
• Server passively responds to request
• Server cannot actively push information (unless using WebSocket or other technologies)

3. Based on TCP/IP Protocol

• HTTP is built on reliable TCP connections
• Ensures data transmission integrity and order
• Lost data packets are automatically retransmitted

4. Flexible and Extensible

• Can transmit any type of data (HTML, JSON, images, videos, etc.)
• Pass additional information through Headers
• Supports content negotiation (client and server negotiate data format)

HTTP Request

Request Components

A complete HTTP request contains three parts:

1. Request Line

GET /products/laptop HTTP/1.1

Contains:

• Request Method: GET (what you want to do)
• Request Path: /products/laptop (which resource to request)
• Protocol Version: HTTP/1.1 (which version of HTTP to use)

2. Request Headers

Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/json
Accept-Language: en-US,en
Cookie: sessionId=abc123

Contains request metadata:

• Host: Target server domain
• User-Agent: Browser/client information
• Accept: Content types client can accept
• Accept-Language: Preferred language
• Cookie: Previously stored cookie data

3. Request Body

Only exists in certain request methods (like POST, PUT), contains data to send to server:

{
  "username": "john",
  "email": "[email protected]",
  "age": 28
}

Common HTTP Request Methods

HTTP defines multiple request methods (also called HTTP verbs), each with different semantics:

GET - Retrieve Resource

Most commonly used method, for getting data:

• Get webpage content
• Query data
• Download files

Characteristics:

• Data passed through URL (query parameters)
• Idempotent: Multiple requests yield same result
• Can be cached
• Saved in browser history
• Should not be used to modify data

Example:

GET /api/users?page=1&limit=10

Get 10 users from page 1

POST - Create Resource

Used to submit data, create new resource:

• Submit forms
• Upload files
• Create new records

Characteristics:

• Data in request body
• Non-idempotent: Multiple requests may create multiple resources
• Not cached
• Not saved in history
• More secure (data not in URL)

Example:

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

{
  "name": "Jane Smith",
  "email": "[email protected]"
}

Create a new user

PUT - Update Resource

Used to update existing resource:

• Update user information
• Modify article content

Characteristics:

• Complete replacement of resource
• Idempotent: Multiple requests yield same result
• Requires providing complete resource data

Example:

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

{
  "name": "Jane Doe",
  "email": "[email protected]",
  "age": 30
}

Update all information for user with ID 123

PATCH - Partial Update

Used for partial resource update:

• Only modify certain fields

Characteristics:

• Only need to provide fields to modify
• More bandwidth-efficient than PUT

Example:

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

{
  "email": "[email protected]"
}

Only update email field

DELETE - Delete Resource

Used to delete resource:

• Delete user
• Delete article
• Delete order

Characteristics:

• Idempotent: After deletion, deleting again yields same result (resource doesn't exist)
• Usually doesn't need request body

Example:

DELETE /api/users/123

Delete user with ID 123

HEAD - Get Headers

Similar to GET, but only returns response headers, not response body:

• Check if resource exists
• Get resource metadata (size, modification time)
• Check if link is valid

OPTIONS - Get Supported Methods

Query which HTTP methods server supports:

• Used for CORS preflight requests
• Understand API capabilities

HTTP Method Comparison

Method	Purpose	Idempotent	Safe	Cacheable
GET	Query data	✅	✅	✅
POST	Create data	❌	❌	❌
PUT	Full update	✅	❌	❌
PATCH	Partial update	❌	❌	❌
DELETE	Delete data	✅	❌	❌

• Idempotent: Multiple operations yield same result
• Safe: Doesn't modify server data
• Cacheable: Response can be cached

HTTP Response

Response Components

Server's response also contains three parts:

1. Status Line

HTTP/1.1 200 OK

Contains:

• Protocol Version: HTTP/1.1
• Status Code: 200 (request result)
• Status Description: OK (status explanation)

2. Response Headers

Content-Type: text/html; charset=utf-8
Content-Length: 1234
Cache-Control: max-age=3600
Set-Cookie: sessionId=xyz789
Server: nginx/1.18.0

Contains response metadata:

• Content-Type: Response content type
• Content-Length: Content length (bytes)
• Cache-Control: Cache control
• Set-Cookie: Request browser to store cookie
• Server: Server software information

3. Response Body

Actual response content:

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

HTTP Status Codes

Status codes tell client the request result, divided into 5 categories:

1xx - Informational Responses

Temporary response, rarely used:

• 100 Continue: Continue sending remaining part of request
• 101 Switching Protocols: Switch protocol (e.g., upgrade to WebSocket)

2xx - Success

Request successfully processed:

• 200 OK: Most common, request successful
• 201 Created: Resource creation successful (commonly used for POST)
• 204 No Content: Success but no content returned (commonly used for DELETE)
• 206 Partial Content: Partial content (used for resume download)

3xx - Redirection

Further action needed:

• 301 Moved Permanently: Permanent redirect
  • Website changes domain
  • Search engines will update index
• 302 Found: Temporary redirect
  • Temporary page jump
  • Search engines won't update index
• 304 Not Modified: Resource not modified, use cache
  • Save bandwidth
  • Speed up loading
• 307 Temporary Redirect: Temporary redirect (keeps request method unchanged)
• 308 Permanent Redirect: Permanent redirect (keeps request method unchanged)

4xx - Client Errors

Problem with request:

• 400 Bad Request: Request format error
  • Missing parameters
  • JSON format error
• 401 Unauthorized: Not authenticated
  • Need to login
  • Token invalid
• 403 Forbidden: No permission
  • Logged in but insufficient permissions
  • IP banned
• 404 Not Found: Resource doesn't exist
  • Wrong URL
  • Resource deleted
• 405 Method Not Allowed: Method not allowed
  • Using POST on read-only API
• 409 Conflict: Request conflict
  • Duplicate submission
  • Data version conflict
• 429 Too Many Requests: Too many requests
  • Rate limited
  • Exceeded API call limit

5xx - Server Errors

Server processing failed:

• 500 Internal Server Error: Server internal error
  • Code bug
  • Unhandled exception
• 502 Bad Gateway: Gateway error
  • Upstream server error
  • Proxy server cannot connect
• 503 Service Unavailable: Service unavailable
  • Server maintenance
  • Server overloaded
• 504 Gateway Timeout: Gateway timeout
  • Upstream server response too slow

Common Status Code Usage Scenarios

Success scenarios:

Browser: GET /products
Server: 200 OK (returns product list)

Browser: POST /products (create new product)
Server: 201 Created (product created successfully)

Browser: DELETE /products/123
Server: 204 No Content (deletion successful, no content returned)

Redirect scenarios:

Browser: GET /old-page
Server: 301 Moved Permanently
        Location: /new-page
Browser automatically jumps to new page

Error scenarios:

Browser: GET /api/users (not logged in)
Server: 401 Unauthorized (need to login first)

Browser: GET /not-exist
Server: 404 Not Found (page doesn't exist)

Browser: POST /admin/delete (regular user)
Server: 403 Forbidden (no permission)

HTTPS: Secure HTTP

Why HTTPS is Needed?

Regular HTTP transmits in plaintext, like writing on a postcard where anyone can see the content:

HTTP Security Issues:

1. Eavesdropping: Third parties can intercept and view data
2. Tampering: Data may be modified during transmission
3. Impersonation: Cannot confirm server's true identity

HTTPS solves these problems:

• Encryption: Data is encrypted, cannot be directly read
• Integrity: Detects if data has been tampered with
• Authentication: Verify server identity through certificates

How HTTPS Works?

HTTPS = HTTP + SSL/TLS

SSL/TLS (Secure Sockets Layer/Transport Layer Security) provides encrypted channel:

Connection Establishment Process (simplified):

1. Browser requests connection

Browser: Hello, I want to establish secure connection

2. Server sends certificate

Server: Here's my certificate proving my identity
Certificate contains:
  - Website information
  - Public key
  - Certificate authority signature

3. Browser verifies certificate

Browser checks:
  ✓ Is certificate issued by trusted authority?
  ✓ Is certificate within validity period?
  ✓ Does certificate domain match?

4. Negotiate encryption method

Browser and server:
  - Choose encryption algorithm
  - Generate session key

5. Begin encrypted communication

All subsequent communication uses session key encryption

HTTPS Advantages

Security:

• Data transmitted encrypted
• Prevents man-in-the-middle attacks
• Verifies server identity

Trust:

• Browser displays lock icon
• Users trust HTTPS websites more
• Search engines give higher ranking

Feature Support:

• Many modern Web APIs require HTTPS
• PWA (Progressive Web Apps) must use HTTPS
• HTTP/2 protocol requires HTTPS

HTTP vs HTTPS Comparison

Feature	HTTP	HTTPS
Security	Plaintext transmission	Encrypted transmission
Port	80	443
Certificate	Not needed	Requires SSL/TLS certificate
Speed	Slightly faster	Slightly slower (encryption overhead)
SEO	Normal	Search engine priority
Cost	Free	Certificates have free and paid options

Modern web development strongly recommends using HTTPS. Free certificate services (like Let's Encrypt) make HTTPS adoption easy.

HTTP Version Evolution

HTTP/1.0 (1996)

Features:

• Each request requires new TCP connection
• Connection closes immediately after completion

Problems:

• Poor performance: Frequent connection establishment overhead
• Doesn't support persistent connections

HTTP/1.1 (1997)

Improvements:

• Persistent connections: One TCP connection can send multiple requests
• Pipelining: Can send multiple requests simultaneously (but responses still sequential)
• Chunked transfer: Supports streaming
• Cache control: More powerful caching mechanism

Remaining problems:

• Head-of-line blocking: Earlier requests block later requests
• Header redundancy: Sending duplicate header information each request

HTTP/2 (2015)

Major improvements:

• Binary protocol: More efficient parsing
• Multiplexing: Same connection can parallel process multiple requests
• Header compression: Reduce redundant data
• Server push: Server can proactively push resources

Advantages:

• Significantly improved performance
• Reduced latency
• Better resource utilization

HTTP/3 (2022)

Based on QUIC protocol:

• Built on UDP (rather than TCP)
• Faster connection establishment
• Better congestion control
• Improved mobile network experience

Summary

HTTP Protocol Core Points:

1. HTTP is the foundation of Web communication: Defines how browsers and servers exchange information

2. Request-Response Model: Client initiates request, server returns response

3. Multiple Request Methods:

   • GET: Query data
   • POST: Create data
   • PUT/PATCH: Update data
   • DELETE: Delete data

4. Status Codes Convey Results:

   • 2xx: Success
   • 3xx: Redirection
   • 4xx: Client error
   • 5xx: Server error

5. HTTPS Ensures Security: Through SSL/TLS encryption, protects data transmission

6. Protocol Continues to Evolve: From HTTP/1.0 to HTTP/3, performance continuously improves

Practical Recommendations:

• Use browser developer tools Network panel to observe HTTP requests
• Understand meanings of different status codes for easier debugging
• Modern web development prioritizes HTTPS
• Choose appropriate HTTP method based on operation type
• Pay attention to performance improvements from HTTP/2 and HTTP/3

Understanding HTTP protocol is essential knowledge for frontend development. It helps you better collaborate with backend, optimize application performance, and solve practical problems.