เบราว์เซอร์ เซิร์ฟเวอร์ และฐานข้อมูลทำงานร่วมกันอย่างไร

At a glance

How it works

เกิดอะไรขึ้นตั้งแต่พิมพ์ URL จนเห็นหน้าเว็บ

• DNS: เบราว์เซอร์ถามว่า natch-soros.vercel.app อยู่ที่ IP ไหน (เหมือนสมุดโทรศัพท์ของอินเทอร์เน็ต)
• Request: เบราว์เซอร์ส่ง HTTP request ไปที่เซิร์ฟเวอร์: “ขอหน้า /projects หน่อย”
• Server: เซิร์ฟเวอร์ประมวลผล ถ้าต้องใช้ข้อมูลก็ query ฐานข้อมูล
• Response: เซิร์ฟเวอร์ตอบกลับพร้อม status code (เช่น 200 OK) และเนื้อหา HTML หรือ JSON
• Render: เบราว์เซอร์อ่าน HTML สร้างหน้า ใส่ CSS แล้วรัน JavaScript

Browser ──request──▶ Server ──query──▶ Database
Browser ◀─response── Server ◀──rows─── Database

Structure of a URL

URL https://shop.example.com/products/42?color=red#reviews แบ่งเป็นส่วน ๆ แบบนี้

HTTP request และ response

GET /api/products HTTP/1.1
Host: shop.example.com

HTTP/1.1 200 OK
Content-Type: application/json

[{ "id": 1, "name": "Coffee", "price": 60 }]

ลองดูของจริงด้วย DevTools

ไม่ต้องติดตั้งอะไร ทุกเบราว์เซอร์มี DevTools มาให้

1. เปิด DevTools

   กด F12 (Mac: Cmd+Option+I) แล้วไปที่แท็บ Network

2. รีเฟรชหน้า

   จะเห็นทุก request ที่หน้าเว็บส่งออกไป ทั้ง HTML, CSS, รูป และ API

3. คลิกดู request แรก

   ดู Method และ Status code ใน Headers และเนื้อหาที่ได้กลับมาใน Response

ฝึกต่อ

เว็บสำหรับลงมือทำ

วิดีโอเรียนเอง

วิดีโอ · youtube.comComputer Networking in 100 Seconds Fireshipวิดีโอ · youtube.comค้นคลิปภาษาไทย: เว็บทำงานอย่างไร

Next steps

• HTML: สร้างหน้าที่เบราว์เซอร์แสดง
• PERN Stack: สร้างเซิร์ฟเวอร์ของตัวเอง