DNS & HTTP
Request / Response Cycle
เข้าใจวงจร HTTP Request/Response ตั้งแต่ต้นจนจบ — headers, methods, body และขั้นตอนการสื่อสารระหว่าง client กับ server
1. Core Idea: Request-Response Cycle คืออะไร
HTTP ทำงานแบบ request-response — client ส่ง request ไปหา server และ server ตอบกลับด้วย response เสมอ ทุก interaction บนเว็บ ทุก API call ล้วนเป็น cycle นี้ Request ประกอบด้วย: method (GET, POST ฯลฯ) + URL + headers + body Response ประกอบด้วย: status code + headers + body
- HTTP เป็น stateless — แต่ละ request ไม่รู้เรื่องของ request ก่อนหน้า
- Server จะตอบทุก request ด้วย status code บอกผล (200, 404, 500 ฯลฯ)
- Headers ส่งข้อมูล metadata เช่น content type, auth token, cache control
- Body ใช้ส่งข้อมูลจริง เช่น JSON, form data, file
2. Mental Model: สั่งอาหารในร้าน
ลองเปรียบ HTTP request-response กับการสั่งอาหาร: Request = การสั่งอาหาร (คุณเลือก method ว่าจะทำอะไร เช่น GET = ขอดูเมนู, POST = สั่ง) URL = โต๊ะที่นั่ง + รายการที่ต้องการ (ชี้เป้าว่าต้องการอะไรจากไหน) Headers = รายละเอียดเพิ่มเติม เช่น "ไม่ใส่ผัก", "มี allergy" (metadata) Response = อาหารที่เสิร์ฟมาพร้อม status (200 = ได้อาหาร, 404 = ไม่มีเมนูนี้)
HTTP Request-Response Cycle — client เริ่มเสมอ server ตอบเสมอ
3. HTTP Methods
| Method | ความหมาย | Body? | ใช้กับ | Idempotent? |
|---|---|---|---|---|
| GET | ขอดูข้อมูล | ไม่มี | โหลดหน้า, ดึง resource | ใช่ |
| POST | สร้าง resource ใหม่ | มี | สมัครสมาชิก, ส่งฟอร์ม | ไม่ใช่ |
| PUT | แทนที่ resource ทั้งหมด | มี | อัปเดต user profile ทั้งชุด | ใช่ |
| PATCH | แก้ไขบางส่วน | มี | เปลี่ยนแค่ชื่อ/email | ไม่แน่นอน |
| DELETE | ลบ resource | ไม่มี (หรือมีน้อย) | ลบ record | ใช่ |
| HEAD | ขอแค่ headers ไม่เอา body | ไม่มี | ตรวจว่าไฟล์มีอยู่ไหม | ใช่ |
| OPTIONS | ถามว่า endpoint รองรับ method อะไร | ไม่มี | CORS preflight | ใช่ |
Idempotent = ส่ง request ซ้ำกี่ครั้งก็ได้ผลเหมือนกัน (GET /user/1 ได้ข้อมูลเดิมเสมอ) Non-idempotent = ส่งซ้ำมีผลต่างกัน (POST /order สร้าง order ใหม่ทุกครั้ง)
4. HTTP Headers สำคัญ
5. Worked Example: เปิดเว็บตั้งแต่ต้นจนจบ
- 1) พิมพ์ https://example.com → DNS lookup หา IP → TCP + TLS handshake
- 2) Browser ส่ง GET / HTTP/1.1 พร้อม headers (Host, User-Agent, Accept ฯลฯ)
- 3) Server ตรวจสอบ request → เตรียม HTML response
- 4) Server ตอบ 200 OK พร้อม Content-Type: text/html และ HTML body
- 5) Browser รับ HTML → parse → พบ <img>, <script>, <link> → ส่ง request เพิ่มเติม
- 6) Browser ส่ง GET /style.css, GET /main.js, GET /logo.png แบบ parallel
- 7) เมื่อโหลดครบ → render หน้าเว็บ → user เห็นผล
- 8) ถ้า user คลิกปุ่ม submit ฟอร์ม → POST /api/submit พร้อม body → รอ response
6. Stateless และวิธีจัดการ State
HTTP เป็น stateless — server ไม่จำว่าคุณเป็นใครระหว่าง request ทุก request เป็น 'คนแปลกหน้า' สำหรับ server เสมอ วิธีจัดการ state จึงต้องทำที่ application layer:
| วิธี | ทำงานอย่างไร | ข้อดี | ข้อเสีย |
|---|---|---|---|
| Cookie | Browser เก็บ + ส่ง cookie กับทุก request | ง่าย, auto-send | ถูกขโมยได้ถ้าไม่ HttpOnly |
| Session Token | เก็บ session ID ใน cookie, state อยู่ใน server | ปลอดภัยกว่า | server ต้องเก็บ state |
| JWT | token เข้ารหัสมี payload ใน token เอง | stateless, scale ได้ | revoke ยาก |
| Query Param | ส่ง state ใน URL ?token=xxx | ง่าย | ปรากฏใน log, URL |
7. Practical Notes: จุดสับสนของมือใหม่
- GET ไม่ควรเปลี่ยน state — ไม่ delete/update ข้อมูล เพราะ idempotent
- POST vs PUT — POST สร้างใหม่ PUT แทนที่ทั้งหมด ถ้าแก้บางส่วนใช้ PATCH
- 401 vs 403 — 401 ยังไม่ login (Unauthorized), 403 login แล้วแต่ไม่มีสิทธิ์ (Forbidden)
- CORS error เกิดเมื่อ browser ไม่อนุญาตให้ origin หนึ่ง request ไปอีก origin — แก้ที่ server
- browser devtools → Network tab เห็น request/response headers และ body ทั้งหมด
8. Recap + เชื่อมไปบทถัดไป
- HTTP Request = method + URL + headers + body · Response = status + headers + body
- Methods: GET (ดู), POST (สร้าง), PUT (แทนที่), PATCH (แก้บางส่วน), DELETE (ลบ)
- HTTP เป็น stateless — ใช้ cookie, session, JWT จัดการ state แทน
- Headers ส่ง metadata เช่น auth, content type, cache control
- บทถัดไปจะอธิบาย HTTP Status Codes ทั้งหมด — รหัสที่ server ใช้บอกผลของ request