เว็บทำงานยังไง

บทที่ 3 จาก 11 · อ่านราว 10 นาที · อัปเดต 9 ตุลาคม 2569 · ระดับเริ่มต้น

สรุปใน 3 บรรทัด

เปิดเว็บหนึ่งหน้า คือเบราว์เซอร์ส่งคำขอ (request) ไปที่เซิร์ฟเวอร์ แล้วได้คำตอบ (response) กลับมา
หน้าเว็บประกอบด้วย HTML ที่เป็นโครง CSS ที่เป็นหน้าตา และ JavaScript ที่ทำให้กดแล้วมีอะไรเกิดขึ้น
สิ่งที่ต้องเชื่อถือได้ เช่น ราคา สิทธิ์ และข้อมูลบัญชี ต้องตรวจและเก็บไว้ฝั่งเซิร์ฟเวอร์

ควรอ่านก่อน

บทที่ 2: โค้ดคืออะไร

อ่านจบแล้วคุณจะ

เล่าได้ว่าเกิดอะไรขึ้นตั้งแต่พิมพ์ชื่อเว็บจนเห็นหน้าเว็บ
แยกได้ว่าอะไรทำงานในเบราว์เซอร์ และอะไรทำงานบนเซิร์ฟเวอร์
เปิดดูคำขอที่เกิดขึ้นจริงด้วยเครื่องมือในเบราว์เซอร์

เว็บคือร้านอาหาร

ภาพที่ช่วยให้เข้าใจง่ายที่สุดคือร้านอาหาร

ในร้านอาหาร	ในโลกของเว็บ	ทำหน้าที่อะไร
ลูกค้าที่โต๊ะ	เบราว์เซอร์	สั่งของ และแสดงสิ่งที่ได้รับ
ใบสั่งอาหาร	request	บอกว่าต้องการอะไร
ห้องครัว	เซิร์ฟเวอร์	เตรียมคำตอบตามที่สั่ง
ห้องเก็บวัตถุดิบ	ฐานข้อมูล	เก็บข้อมูลไว้ถาวร
จานอาหารที่เสิร์ฟ	response	สิ่งที่ส่งกลับไปให้ลูกค้า

ลูกค้าไม่ได้เดินเข้าไปหยิบของในครัวเอง ทุกอย่างผ่านการสั่งและการเสิร์ฟ เว็บก็เป็นแบบนั้น

จากพิมพ์ชื่อเว็บจนเห็นหน้าเว็บ

ลองดูว่าเกิดอะไรขึ้นเมื่อพิมพ์ milerdev.com แล้วกด Enter

เบราว์เซอร์ถามระบบ DNS ว่าชื่อนี้อยู่ที่เครื่องไหน DNS เหมือนสมุดรายชื่อที่แปลงชื่อเว็บเป็นที่อยู่ของเครื่อง (IP address)
เบราว์เซอร์ส่ง request ไปที่เครื่องนั้น ผ่าน HTTPS ซึ่งเข้ารหัสไว้ ระหว่างทางไม่มีใครอ่านได้
เซิร์ฟเวอร์เตรียมคำตอบ บางครั้งต้องไปดึงข้อมูลจากฐานข้อมูล เช่น รายชื่อคอร์ส
เซิร์ฟเวอร์ส่ง response กลับมาเป็นไฟล์ HTML
เบราว์เซอร์อ่าน HTML แล้วพบว่าต้องใช้ไฟล์อื่นด้วย เช่น CSS JavaScript และรูปภาพ จึงส่ง request ตามไปขออีกหลายรอบ
เมื่อได้ครบ เบราว์เซอร์วาดหน้าเว็บให้เราเห็น

ทั้งหมดนี้มักเกิดขึ้นในเวลาไม่ถึงหนึ่งวินาที

HTML, CSS และ JavaScript

ส่วน	หน้าที่	เปรียบเหมือน
HTML	โครงและเนื้อหา เช่น หัวข้อ ย่อหน้า ปุ่ม	โครงบ้าน
CSS	หน้าตา เช่น สี ขนาด ตำแหน่ง	สีทาบ้านและการตกแต่ง
JavaScript	การทำงาน เช่น กดปุ่มแล้วเกิดอะไรขึ้น	ระบบไฟและประตูอัตโนมัติ

ตัวอย่าง HTML สั้น ๆ ที่สร้างหัวข้อหนึ่งอันและปุ่มหนึ่งปุ่ม

<h1>รายการที่ต้องทำ</h1>
<button>เพิ่มรายการ</button>

เบราว์เซอร์กับเซิร์ฟเวอร์ ทำอะไรต่างกัน

นี่คือเรื่องที่สำคัญที่สุดในบทนี้ โค้ดที่ทำงานในเบราว์เซอร์อยู่ในเครื่องของผู้ใช้ ผู้ใช้เปิดดูและแก้ไขได้ เหมือนลูกค้าแก้ราคาบนใบสั่งอาหารที่อยู่บนโต๊ะได้ แต่แก้ราคาในครัวไม่ได้

ที่ไหน	เหมาะกับงานอะไร	ห้ามใช้ทำอะไร
เบราว์เซอร์	แสดงผล ตอบสนองเมื่อกด ตรวจรูปแบบข้อมูลเบื้องต้นให้ผู้ใช้เห็นเร็ว ๆ	ตัดสินเรื่องเงินหรือสิทธิ์ เก็บรหัสลับ
เซิร์ฟเวอร์	ตรวจสิทธิ์ คิดราคา บันทึกคำสั่งซื้อ	ส่งรหัสลับหรือข้อมูลของคนอื่นกลับไปให้เบราว์เซอร์
ฐานข้อมูล	เก็บข้อมูลถาวร เช่น บัญชีและการชำระเงิน	ไม่ควรเปิดให้เบราว์เซอร์คุยด้วยตรง ๆ

เคสจริงจาก MilerDev

ตอนกดซื้อคอร์สบนเว็บนี้ ราคาที่ใช้คิดเงินไม่ได้มาจากหน้าเว็บ เซิร์ฟเวอร์ดึงราคาจริงจากฐานข้อมูลทุกครั้ง และสำหรับคอร์สที่ต้องจ่ายเงิน สิทธิ์เข้าเรียนจะเกิดขึ้นหลังจากระบบยืนยันการชำระเงินแล้วเท่านั้น ถ้าใครแก้ราคาในหน้าเว็บของตัวเอง ก็ไม่มีผลกับราคาที่ต้องจ่ายจริง

ลองเปิดดู request จริง

เบราว์เซอร์มีแท็บชื่อ Network ที่แสดงทุก request ที่เกิดขึ้น ลองเปิดเว็บไหนก็ได้ กด F12 เลือกแท็บ Network แล้วกดรีเฟรชหน้า

ตรวจผลยังไง

รายการแรก ๆ คือหน้า HTML มีสถานะ (Status) เป็น 200 แปลว่าสำเร็จ
มีรายการตามมาอีกหลายรายการ เป็นไฟล์ CSS JavaScript และรูปภาพ
ลองเปิดที่อยู่ที่ไม่มีอยู่จริง เช่น เติม /abc ต่อท้ายชื่อเว็บ แล้วเห็นสถานะ 404

ตัวเลขสถานะที่เจอบ่อย

สถานะ	ความหมาย
200	สำเร็จ
301, 302	ย้ายไปที่อยู่อื่น เบราว์เซอร์จะตามไปเอง
404	ไม่พบสิ่งที่ขอ
500	เซิร์ฟเวอร์มีปัญหา

ถ้าเห็นอะไรในแท็บ Network แล้วไม่เข้าใจ ลองให้ AI ช่วยอธิบาย

ลองถาม AI แบบนี้

ฉันเปิดแท็บ Network ใน Chrome แล้วเห็นรายการ
ชื่อ: [ชื่อรายการ]
สถานะ: [ตัวเลขสถานะ]
ประเภท: [Type ที่เห็น]

ช่วยอธิบายว่ารายการนี้คืออะไร และเบราว์เซอร์ขอมันไปทำอะไร สำหรับคนที่ไม่เคยเขียนโค้ด

ข้อผิดพลาดที่พบบ่อย

ซ่อนปุ่มแล้วคิดว่าปลอดภัย คนที่เปิดเครื่องมือในเบราว์เซอร์ส่ง request เองได้ การป้องกันจริงต้องอยู่ที่เซิร์ฟเวอร์
ใส่รหัสลับไว้ในโค้ดฝั่งเบราว์เซอร์ ทุกคนที่เปิดเว็บอ่านได้
คิดว่าเว็บช้าเพราะอินเทอร์เน็ตเสมอ บางครั้งช้าเพราะเซิร์ฟเวอร์หรือฐานข้อมูล แท็บ Network ช่วยบอกได้ว่ารอที่ไหนนาน

เช็กความเข้าใจ

1. ใครควรเป็นคนตรวจว่าผู้ใช้มีสิทธิ์ดูบทเรียนที่ต้องจ่ายเงินหรือไม่

2. สถานะ 404 หมายถึงอะไร