Mission 2: HTTP, Request และ Response

เป้าหมายของ Mission นี้: อ่าน HTTP Request และ Response ออก รู้ว่าแต่ละส่วนคืออะไร

1. Learning Objective

จบ Mission นี้คุณจะ

• บอกส่วนประกอบของ Request ได้ครบ (Method, URL, Headers, Body)
• บอกส่วนประกอบของ Response ได้ครบ (Status, Headers, Body)
• เปิด DevTools → Network แล้วอ่านออกว่าเว็บกำลังคุยอะไรกับเซิร์ฟเวอร์

2. Theory — HTTP คือ "ภาษากลาง"

HTTP (HyperText Transfer Protocol) คือ ข้อตกลง ว่า Client กับ Server จะคุยกันด้วยรูปแบบไหน เหมือนแบบฟอร์มราชการ — ไม่ว่าใครกรอก ก็ต้องกรอกช่องเดียวกัน คนอ่านถึงจะเข้าใจ

กฎเหล็กของ HTTP มี 2 ข้อ

1. Client เป็นฝ่ายเริ่มเสมอ Server พูดขึ้นมาเองไม่ได้ ต้องรอให้ถามก่อน
2. 1 Request = 1 Response ถามหนึ่งครั้ง ตอบหนึ่งครั้ง จบ แล้วลืมกันไป (เรียกว่า stateless)

Stateless แปลว่าอะไร? แปลว่า Server จำไม่ได้ ว่าเมื่อกี้คุณเป็นใคร ทุก Request คือคนแปลกหน้า เสมอ — นี่คือเหตุผลที่ Backend Explorer 2 Chapter 4-5 ต้องมี Token ติดไปกับทุก Request เพื่อบอกว่า "นี่ฉันเองนะ"

3. Diagram — วงจร Request/Response

sequenceDiagram
    participant B as Browser
    participant S as Express Server
    participant D as Database
    B->>S: GET /books
    Note over S: หา route ที่ตรงกัน
    S->>D: SELECT * FROM books
    D-->>S: rows
    Note over S: แปลงเป็น JSON
    S-->>B: 200 OK + [{...}, {...}]
    Note over B: เอาไป render บนหน้าจอ

4. หน้าตาจริงของ Request

Request คือ ข้อความล้วนๆ ที่ส่งข้ามเน็ตไป หน้าตาประมาณนี้

POST /books HTTP/1.1                <-- (1) Method + (2) Path
Host: localhost:3000                <-- (3) Headers
Content-Type: application/json
Authorization: Bearer eyJhbGciOi...

{ "title": "แฮร์รี่ พอตเตอร์", "year": 1997 }   <-- (4) Body

GET ไม่มี Body — ถ้าต้องส่งข้อมูลไปกับ GET ให้ใช้ Query String ท้าย URL แทน เช่น /books?year=1997 (จะเรียนใน Chapter 4)

5. หน้าตาจริงของ Response

HTTP/1.1 201 Created                <-- (1) Status Code + ข้อความ
Content-Type: application/json      <-- (2) Headers
                                    <-- (บรรทัดว่าง 1 บรรทัด)
{ "id": 4, "title": "แฮร์รี่ พอตเตอร์", "year": 1997 }   <-- (3) Body

ASCII สรุปโครงสร้างทั้งคู่

      REQUEST                            RESPONSE
+-----------------------+          +-----------------------+
| METHOD  PATH  HTTP/1.1|          | HTTP/1.1  STATUS      |
+-----------------------+          +-----------------------+
| Header: value         |          | Header: value         |
| Header: value         |          | Header: value         |
+-----------------------+          +-----------------------+
|                       |          |                       |
|   Body (JSON)         |          |   Body (JSON)         |
|   *GET ไม่มี*          |          |                       |
+-----------------------+          +-----------------------+

6. Workshop เล็ก — อ่าน Request จริงใน DevTools

ทำตามนี้เลย ใช้เวลา 3 นาที

1. เปิดเว็บอะไรก็ได้ที่มีการโหลดข้อมูล (ลองใช้ https://jsonplaceholder.typicode.com/posts)
2. กด F12 → แท็บ Network → กด Ctrl/Cmd + R เพื่อ refresh
3. คลิกที่รายการแรกในลิสต์ แล้วดู 4 อย่างนี้ให้เจอ
   • Request Method อยู่ตรงไหน?
   • Status Code เป็นเลขอะไร?
   • ใน Response Headers มี content-type เขียนว่าอะไร?
   • แท็บ Response หรือ Preview แสดงข้อมูลหน้าตาแบบไหน?

7. Common Mistakes

8. Summary

• HTTP = ภาษากลางระหว่าง Client กับ Server
• Request = Method + Path + Headers + Body (GET ไม่มี Body)
• Response = Status Code + Headers + Body
• HTTP เป็น stateless — Server ไม่จำใครทั้งนั้น ต้องบอกตัวตนใหม่ทุกครั้ง
• Mission ถัดไป: วิธีตั้งชื่อ URL ให้เป็นระบบ — REST API