On this page
เว็บทำงานอย่างไร
Client/Server, HTTP, HTTP methods และ status code — ภาพรวมการสื่อสารเบื้องหลังทุกเว็บที่คุณใช้
ถึงตอนนี้คุณเขียนโปรแกรมที่ทำงานในเครื่องเดียวได้แล้ว บทสุดท้ายนี้เชื่อมทุกอย่างเข้ากับโลกจริง: เว็บและแอปทำงานอย่างไร โปรแกรมคุยกันผ่าน API อย่างไร และเก็บข้อมูลถาวรอย่างไร นี่คือพื้นฐานก่อนสร้าง Portfolio project ในส่วน roadmap
Client และ Server
เมื่อเปิดเว็บ เครื่องของเรา (client) ส่งคำขอ (request) ไปยังเครื่องที่เก็บเว็บนั้น (server) server ประมวลผลแล้วส่งคำตอบ (response) กลับมา client จึงแสดงผลให้เราเห็น การสนทนานี้ใช้โพรโทคอลกลางชื่อ HTTP
- Client — เครื่องที่ร้องขอ เช่นเบราว์เซอร์หรือแอปมือถือ
- Server — เครื่องที่ให้บริการ เก็บข้อมูลและประมวลผล
- IP address — เลขที่อยู่ของแต่ละเครื่องบนเครือข่าย
- DNS — สมุดที่อยู่ที่แปลงชื่อเว็บ (google.com) เป็น IP
Frontend และ Backend
งานพัฒนาเว็บแบ่งเป็น 2 ฝั่ง Frontend (สิ่งที่ผู้ใช้เห็นและโต้ตอบ ทำงานในเบราว์เซอร์) และ Backend (เบื้องหลังบน server จัดการข้อมูล ตรรกะ ความปลอดภัย) สองฝั่งคุยกันผ่าน API
| ภาษา/ฝั่ง | หน้าที่ | เปรียบเทียบ |
|---|---|---|
| HTML (frontend) | โครงสร้างเนื้อหา (หัวข้อ ปุ่ม รูป) | โครงกระดูก |
| CSS (frontend) | หน้าตาและการจัดวาง (สี ขนาด) | เสื้อผ้า |
| JavaScript (frontend) | การโต้ตอบ (กดปุ่มแล้วเกิดอะไร) | กล้ามเนื้อ |
| Backend (server) | ตรรกะ จัดการข้อมูล ความปลอดภัย | สมองหลังบ้าน |
HTTP Methods — กริยาของคำขอ
ทุก request มี "กริยา" บอกว่าต้องการทำอะไรกับข้อมูล สี่ตัวหลักนี้ตรงกับงาน CRUD (สร้าง อ่าน แก้ ลบ) ที่จะเจอในเรื่องฐานข้อมูล
| Method | ใช้ทำ | ตัวอย่าง |
|---|---|---|
| GET | ขอข้อมูล | ดูรายชื่อสินค้า |
| POST | สร้างข้อมูลใหม่ | สมัครสมาชิก |
| PUT / PATCH | แก้ไขข้อมูล | แก้โปรไฟล์ |
| DELETE | ลบข้อมูล | ลบโพสต์ |
Status Code — รหัสสถานะของคำตอบ
response ทุกครั้งมีรหัสตัวเลขบอกว่าผลเป็นอย่างไร จำเป็นกลุ่ม ๆ ไว้ก็พอ
| กลุ่ม | ความหมาย | ตัวอย่าง |
|---|---|---|
| 2xx | สำเร็จ | 200 OK, 201 Created |
| 3xx | เปลี่ยนเส้นทาง | 301 Moved, 302 Found |
| 4xx | ผิดที่ฝั่งผู้ขอ | 400 Bad Request, 401 Unauthorized, 404 Not Found |
| 5xx | ผิดที่ฝั่ง server | 500 Internal Error, 503 Unavailable |
เลข 404 Not Found ที่เคยเจอตอนเปิดเว็บไม่เจอ ก็คือ HTTP status code นั่นเอง ส่วน 500 คือ server พังภายใน เมื่อเป็นนักพัฒนา คุณจะใช้ code เหล่านี้บอกว่าปัญหาอยู่ฝั่ง client (4xx) หรือ server (5xx)
สรุปหัวข้อนี้
- client ส่ง request, server ตอบ response ผ่านโพรโทคอล HTTP
- Frontend (HTML/CSS/JS ในเบราว์เซอร์) + Backend (ตรรกะบน server)
- HTTP methods: GET (อ่าน), POST (สร้าง), PUT/PATCH (แก้), DELETE (ลบ)
- Status code: 2xx สำเร็จ, 3xx เปลี่ยนเส้นทาง, 4xx ผิดฝั่ง client, 5xx ผิดฝั่ง server
1) เปิด DevTools (กด F12) แท็บ Network แล้วโหลดเว็บ ดู request/response และ status code 2) จับคู่งานเหล่านี้กับ HTTP method: ดูโพสต์ / เขียนโพสต์ใหม่ / แก้โพสต์ / ลบโพสต์ 3) อธิบายว่า 404 ต่างจาก 500 อย่างไร 4) ลองเข้าเว็บที่ไม่มีอยู่จริงแล้วสังเกต status code