เว็บทำงานอย่างไร

เว็บทำงานอย่างไร

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

ลงรายละเอียดการทำงานของเว็บไซต์กัน

ก่อนหน้าที่จะเริ่มกันแนะนำว่าให้อ่านบทความนี้ http://hellomyweb.com/blog/basic_web_site_wording/ ก่อนที่จะเริ่มกันนะครับ เพื่อเป็นการปูพื้นฐานก่อน เราจะได้เข้าใจไปในทางเดียวกันนะครับ ถ้าอ่านมาแล้วก็มาเริ่มกันเลยครับ

1. ก่อนอื่นเรามาดูโครงสร้างของ Domain Name กันก่อนนะครับเพื่อที่จะเข้าใจหัวข้อต่อไปได้ง่ายขึ้น

อ้างอิงจาก: http://www.networksplusco.com/the-anatomy-of-runni...

โครงสร้างของ Domain Name เป็นตามรูปด้านบนนะครับ อย่างเช่น http://www.hellomyweb.com จะแบ่งเป็นส่วนสำคัญได้เป็น 3 ส่วนคือ

1. www เราเรียกว่า sub domain
2. hellomyweb เราเรียกว่า domain
3. com เราเรียกว่า top level domain

สิ่งที่ต่อท้ายหลังจาก URL นี่ทั้งหมดเราจะเรียกว่า Resource ครับซึ่งถ้าเราไม่ใส่มันจะดึงค่ามาตราฐานที่ตั้งไว้มาใช้ ตามปรกติมันจะดึง Resource ที่ชื่อว่า index.html ครับ ฉะนั้นจริงๆแล้ว URL เต็มๆคือ http://hellomyweb.com/index.html ครับ

2. เราพิมพ์ URL ใน Browser เรียบร้อยแล้วกด Enter จะมีการทำงานตามลำดับนี้ไปเรื่อยๆนะครับ อย่างที่บอกไปตามบทความก่อนหน้านี้ว่าคอมพิวเตอร์จะติดต่อกันด้วย IP address ซึ่งเป็นสิ่งที่คนจะจำได้ยากครับ ดังนั้นเราจึงต้องมีชื่อให้มันแทน ซึ่งการจะมีชื่อได้เราก็ต้องมีฐานข้อมูลที่เก็บชื่อหรือ Domain Name ที่เข้าคู่กันกับ IP address ไว้ครับ ซึ่งฐานข้อมูลนั้นเราเรียกว่า DNS ครับ

ดังนั้นหลังจากที่เรากด Enter ไปแล้วสิ่งที่ Browser จะทำเป็นอย่างแรกคือจะถาม DNS server ก่อนว่า domain name นี้มี IP address เป็นอะไร ซึ่งการทำงานของ DNS จะมีลำดับตามนี้ครับ ตามตัวอย่าง Domain เราคือ example.com นะครับ

1. Browser ถามไปยัง DNS server ว่า Domain นี้มี IP address เป็นอะไร
2. DNS server จะถามไปยัง Root server ว่า ใครเป็นคนเก็บรายชื่อของ Top level เป็น .com เอาไว้
3. Root name server จะส่ง IP ของเรื่องที่เก็บ Top level มาให้ครับ
4. DNS server ก็จะไปถามต่อครับว่า example.com นั้นมี IP address เป็นอะไร
5. ได้รับ IP ของเครื่อง example.com กลับมาครับ
6. DNS server ไปถามยังเครื่องปลายทางครับว่ามีการเก็บข้อมูลของ example.com ไว้หรือเปล่า
7. เครื่อง server ที่เราเก็บไฟล์ของ example.com ตอบกลับมาว่ามีจ๊ะ
8. DNS server ส่ง IP กลับไปให้ Browser ครับ

จะเห็นว่าขั้นตอนเยอะมากมี server หลายตัวที่ต้องเก็บข้อมูลพวกนี้ สาเหตุที่ต้องใช้หลายตัวเพราะว่าข้อมูลมีปริมาณเยอะมากครับถ้าเราเก็บไว้ที่หลายๆเครื่องจะทำให้มันทำงานได้เร็วกว่าครับ

อ้างอิงจาก: https://technet.microsoft.com/en-us/library/bb9620...

3. จบการทำงานของ DNS server หลังจากนี้ browser ก็จะติดต่อกับ server ของ example.com โดยตรงแล้วล่ะครับ ซึ่งอย่างที่บอกไปว่าถ้าเราพิมพ์ไปแค่ example.com ทาง server ก็จะส่งไฟล์ index.html กลับมาให้หรือไฟล์ที่เป็น index กลับมาให้ครับ

สมมุติใหม่ครับในกรณีที่เราพิมพ์ http://hellomyweb.com ลงไปใน Browser สิ่งที่ DNS server จะส่งมาให้คือ IP 128.199.117.62 ครับ หลังจากนั้น Browser ก็จะติดต่อเครื่องปลายทางด้วยรูปแบบนี้ครับ

HTTP://128.199.117.62:80

ตามที่บอกไปครับว่าตามมาตราฐาน HTTP จะมีการติดต่อกันผ่าน port 80 ครับ

มาเรียงลำดับกันอีกครั้งนะครับหลังจากที่เราได้ IP จาก DNS server เรียบร้อยแล้วเราจะติดโดยตรงไปยัง hellomyweb.com ซึ่งมี IP 128.199.117.62 หลังจากนั้นจะมีลำดับการทำงานดังนี้ครับ

1. เรียกขอไฟล์ไปยัง hellomyweb.com ด้วย IP 128.199.117.62 ถ้าเราไม่ได้ระบุไปว่าต้องการอะไร server จะเข้าใจว่าเราต้องการไฟล์ index ซึ่งในที่นี้คือ index.html
2. server ส่งไฟล์ index.html กลับมาให้ หลังจากที่เราได้ไฟล์มาแล้ว client จะเปิดดูว่ามีอะไรบ้างที่ต้องโหลดเพิ่ม ในกรณีนี้มีไฟล์ style.css ที่จะต้องโหลดเพิ่มมา
3. ขอไฟล์ style.css ไปยัง server อีกครั้ง
4. server ส่งไฟล์กลับมาให้ จากนั้น client ก็แสดงหน้าเว็บไซต์ที่ผู้ใช้ต้องการ

ลำดับขั้นตอนจะเป็นตามนี้นะครับ ถ้าในไฟล์ index.html มีอย่างอื่นที่ต้องโหลดเพิ่มเช่น ไฟล์ภาพ, ไฟล์ javascript ตัว browser ก็จะขอจาก server เพิ่มไปจนกว่าจะได้ครบครับ

ตัวอย่างไฟล์ index ที่ server ส่งกลับมาให้เป็นตามภาพด้านล่างครับ

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

ภาพด้านบนเป็นตัวอย่างไฟล์ที่จะมีการขอเพิ่มจาก server หลังจากที่เราได้ไฟล์ index มาแล้วนะครับมีจำนวนเยอะมาก

จบบทความนี้ครับเป็นตัวอย่างการทำงานของเว็บไซต์แบบเบื้องลึกมากกกกกครับ


เลื่อนขึ้นด้านบน