Principles of HTTP Protocol: Frontend-Backend CommunicationPrinciples of HTTP Protocol: Frontend-Backend Communication

------

0. The Essence of HTTP0. The Essence of HTTP

HTTP (HyperText Transfer Protocol) is the foundational protocol for frontend-backend communication.HTTP (HyperText Transfer Protocol) is the foundational protocol for frontend-backend communication.

0.1 Communication Analogy0.1 Communication Analogy

------

1. HTTP's Evolution1. HTTP's Evolution

HTTP has undergone several major upgrades since its creation in 1991.HTTP has undergone several major upgrades since its creation in 1991.

1.1 Version Comparison1.1 Version Comparison

------

2. Structure of an HTTP Request2. Structure of an HTTP Request

2.1 Request Line2.1 Request Line

GET /api/users/123 HTTP/1.1

Contains three parts:Contains three parts:

• Method: GET, POST, PUT, DELETE, etc.Method: GET, POST, PUT, DELETE, etc.
• URL: The resource path being requestedURL: The resource path being requested
• Version: HTTP/1.1 or HTTP/2Version: HTTP/1.1 or HTTP/2

2.2 Request Headers2.2 Request Headers

Host: api.example.com User-Agent: Mozilla/5.0 Accept: application/json Authorization: Bearer xxx Content-Type: application/json Content-Length: 45

Common request headers:Common request headers:

2.3 Request Body2.3 Request Body

{ "name": "Zhang San", "email": "zhangsan@example.com" }

Only POST, PUT, PATCH, and similar methods have a request body.Only POST, PUT, PATCH, and similar methods have a request body.

------

3. Structure of an HTTP Response3. Structure of an HTTP Response

3.1 Status Line3.1 Status Line

HTTP/1.1 200 OK

Contains three parts:Contains three parts:

• Version: HTTP/1.1Version: HTTP/1.1
• Status code: 200, 404, 500, etc.Status code: 200, 404, 500, etc.
• Status text: OK, Not Found, etc.Status text: OK, Not Found, etc.

3.2 Response Headers3.2 Response Headers

Content-Type: application/json Content-Length: 156 Cache-Control: max-age=3600 Set-Cookie: session=xxx; HttpOnly

Common response headers:Common response headers:

3.3 Response Body3.3 Response Body

{ "code": 0, "data": { "id": 123, "name": "Zhang San" } }

------

4. HTTP Methods in Detail4. HTTP Methods in Detail

4.1 GET vs POST4.1 GET vs POST

------

5. HTTP Status Codes5. HTTP Status Codes

5.1 Status Code Categories5.1 Status Code Categories

5.2 Common Status Codes5.2 Common Status Codes

------

6. HTTPS: Secure HTTP6. HTTPS: Secure HTTP

6.1 HTTP vs HTTPS6.1 HTTP vs HTTPS

6.2 How HTTPS Works6.2 How HTTPS Works

1. Client Hello: Client sends supported cipher suitesClient Hello: Client sends supported cipher suites
2. Server Hello: Server returns certificate and selected cipher suiteServer Hello: Server returns certificate and selected cipher suite
3. Certificate verification: Client verifies the server certificate's validityCertificate verification: Client verifies the server certificate's validity
4. Key exchange: Use asymmetric encryption to exchange a session keyKey exchange: Use asymmetric encryption to exchange a session key
5. Encrypted communication: Use the session key for symmetric encryptionEncrypted communication: Use the session key for symmetric encryption
💡 Tips Praktis💡 Pro Tip

- Anti-eavesdropping: Data is encrypted; third parties cannot read it - Anti-tampering: Data integrity verification - Anti-impersonation: SSL certificates verify server identity- Anti-eavesdropping: Data is encrypted; third parties cannot read it - Anti-tampering: Data integrity verification - Anti-impersonation: SSL certificates verify server identity

------

7. HTTP Caching Mechanism7. HTTP Caching Mechanism

7.1 Cache Headers7.1 Cache Headers

Header	Description	Example
Cache-Control	Cache policy	max-age=3600
ETag	Resource version identifier	"33a64df551425fcc"
Last-Modified	Last modified time	Wed, 21 Oct 2015 07:28:00 GMT

7.2 Caching Strategies7.2 Caching Strategies

Strong caching:Strong caching:

http 📋 Salin📋 Copy

Cache-Control: max-age=3600

Within 3600 seconds, the browser uses the cache directly without sending a request.Within 3600 seconds, the browser uses the cache directly without sending a request.

Negotiated caching:Negotiated caching:

http 📋 Salin📋 Copy

ETag: "33a64df551425fcc"

The browser sends If-None-Match; the server returns 304 (not modified) or 200 (modified).The browser sends If-None-Match; the server returns 304 (not modified) or 200 (modified).

------

8. Common Questions8. Common Questions

8.1 The Real Difference Between GET and POST8.1 The Real Difference Between GET and POST

Misconception: The only difference between GET and POST is where parameters are placed.Misconception: The only difference between GET and POST is where parameters are placed.

The truth:The truth:

• GET is idempotent; multiple requests produce the same resultGET is idempotent; multiple requests produce the same result
• POST is non-idempotent; multiple requests may create multiple resourcesPOST is non-idempotent; multiple requests may create multiple resources
• GET can be cached; POST is not cached by defaultGET can be cached; POST is not cached by default
• GET can be bookmarked; POST cannotGET can be bookmarked; POST cannot

8.2 HTTP/1.1 Head-of-Line Blocking8.2 HTTP/1.1 Head-of-Line Blocking

The problem: Although HTTP/1.1 supports persistent connections, requests must be sent sequentially. If a previous request's response is slow, all subsequent requests must wait.The problem: Although HTTP/1.1 supports persistent connections, requests must be sent sequentially. If a previous request's response is slow, all subsequent requests must wait.

Solutions:Solutions:

• HTTP/2 multiplexingHTTP/2 multiplexing
• Domain sharding (multiple domains for multiple connections)Domain sharding (multiple domains for multiple connections)
• Connection pooling (limiting concurrency)Connection pooling (limiting concurrency)

8.3 HTTP/2 Advantages8.3 HTTP/2 Advantages

Feature	HTTP/1.1	HTTP/2
Transmission format	Text	Binary frames
Multiplexing	Not supported	Supported
Header compression	None	HPACK algorithm
Server push	Not supported	Supported

------

GlossaryGlossary

Term	Full Name	Description
HTTP	HyperText Transfer Protocol	The foundational web communication protocol
HTTPS	HTTP Secure	HTTP + SSL/TLS
TCP	Transmission Control Protocol	Reliable transport protocol
SSL/TLS	Secure Sockets Layer	Security protocol layer
Idempotent	-	Multiple requests produce the same result
Keep-Alive	-	Sending multiple requests over one TCP connection
Multiplexing	-	Sending multiple requests simultaneously
Head-of-Line Blocking	-	Earlier requests blocking later ones

← SebelumnyaPrevious4-server-and-backend/file-storage4-server-and-backend/file-storage SelanjutnyaNext →4-server-and-backend/message-queues4-server-and-backend/message-queues