Веб систем хэрхэн ажилладаг вэ?

Энэ хичээлээр

Browser, domain, DNS, server-ийн үүргийг ялгах
Хүсэлтээс хариулт, browser rendering хүртэлх урсгалыг тайлбарлах
HTML болон static asset яагаад тусдаа хүсэлт үүсгэж болохыг ойлгох

Яагаад энэ ойлголт хэрэгтэй вэ?

Веб хуудас удаан нээгдэхэд “frontend муу байна” гэж таах, эсвэл domain ажиллахгүй байхад server-ийн кодоо засах нь асуудлын зөв хэсгийг онохгүй. Browser дээр харагдсан нэг хуудасны цаана нэрийг хаяг болгох DNS, хүсэлт хүлээх server, HTML болон бусад файл, browser-ийн дүрслэх ажил дараалан явдаг.

Энэ урсгалыг мэддэг бол алдаа хаана гарсныг эхлээд ялгаж чадна. Мөн дараагийн хичээлүүдэд frontend, backend, API яагаад тусдаа үүрэгтэйг ойлгох суурь болно.

Энгийн mental model

text

Хэрэглэгч
→ Browser
→ DNS
→ Server
→ Response
→ Browser rendering

Энэ бол бодит интернетийн бүх нарийн давхаргыг харуулсан зураг биш. Харин эхлэгч хүн нэг хуудасны үндсэн аяллыг алдахгүй дагах сэтгэх загвар юм.

Гол оролцогчид

Browser

Browser буюу веб хөтөч нь хэрэглэгчийн өмнөөс ажилладаг client программ. Chrome, Safari, Firefox зэрэг browser URL хүлээн авч, server рүү хүсэлт илгээн, ирсэн HTML-ийг уншиж дэлгэцийн бүтэц болгоно. Дараа нь CSS, зураг, font, JavaScript зэрэг нэмэлт нөөцийг авч хуудас бүрдүүлж болно.

Domain ба DNS

Domain нь хүн тогтооход хялбар нэр. Server-үүд сүлжээнд IP address-аар хаяглагддаг тул Domain Name System (DNS) нь academy.khansoft.studio шиг нэрийг тухайн үйлчилгээнд хүрэх хаягтай холбож өгнө.

DNS-ийг “интернетийн бүх хүсэлтийг дамжуулдаг шуудан” гэж ойлгож болохгүй. Үндсэн үүрэг нь нэрийн мэдээллийг шийдвэрлэх. Browser өмнө нь хадгалсан DNS мэдээлэл ашиглаж болох тул lookup бүр шинэ сүлжээний аялал байх албагүй.

Server

Server гэдэг нь хүсэлт хүлээн авч хариулт буцаадаг программын үүрэг. Нэг физик компьютер гэсэн үг заавал биш. Static HTML файл буцааж болно, эсвэл өгөгдөл уншиж байгаад тухайн агшинд хариулт үүсгэж болно.

Хүсэлт ба хариулт

Browser-оос server рүү явж буй мессежийг хүсэлт (request) гэнэ. Server-ээс буцаж буй мессежийг хариулт (response) гэнэ. Хариултад амжилттай эсэх status, агуулгын төрөл, HTML эсвэл JSON зэрэг body байж болно.

URL оруулснаас хуудас харагдах хүртэл

Browser URL-ийг задлана
https://academy.khansoft.studio/lessons доторх https нь холбооны scheme, academy.khansoft.studio нь host, /lessons нь resource-ийн path.
Domain-ийн хаягийг олно
Browser болон operating system cache-аа эхэлж шалгаад шаардлагатай бол DNS resolver-оос host-ийн хаягийг асууна.
Server-тэй аюулгүй холболт үүсгэнэ
HTTPS хэрэглэж байвал browser server-ийн certificate-ийг шалгаж, encrypted connection үүсгэнэ. Энэ хичээлд TLS-ийн нарийн handshake-ийг задлахгүй.
HTML хүснэ
Browser /lessons resource-ийг авах HTTP хүсэлт илгээнэ. Server хүсэлтийг боловсруулж status, headers, body бүхий хариулт буцаана.
Browser HTML-ийг уншина
HTML-ээс page structure үүсгэнэ. CSS, JavaScript, зураг зэрэг холбоотой static asset илэрвэл тэдгээрт нэмэлт хүсэлт илгээж болно.
Хуудсыг дүрслээд interaction ажиллуулна
Browser layout, өнгө, текстийг зурна. JavaScript байгаа бол event handler ажиллаж, товч дарах зэрэг client-side interaction-ийг хариуцаж болно.

HTML, static asset, interaction

HTML нь хуудасны утга ба бүтцийг тодорхойлно. CSS, image, font, JavaScript bundle зэрэг нь ихэвчлэн static asset — server-ээс бэлэн файл хэлбэрээр өгч болох нөөц. HTML дотор тэдгээрийн URL байвал browser тус бүрийг хүснэ.

JavaScript ажилласнаар browser server-ээс бүтэн шинэ HTML авахгүйгээр Task Manager-ийн жагсаалтад task нэмэх мэт өөрчлөлт хийж чадна. Гэхдээ өгөгдлийг найдвартай хадгалах шаардлагатай бол зөвхөн browser-ийн дэлгэцийг өөрчлөх хангалтгүй. Backend болон database-ийн үүргийг дараагийн хичээлээр үзнэ.

Техникийн урсгалыг унших нь

text

GET /lessons HTTP/1.1
Host: academy.khansoft.studio
Accept: text/html

← HTTP/1.1 200 OK
← Content-Type: text/html; charset=utf-8
← <html>...</html>

Энэ нь HTTP/1.1 зарчмыг уншихад хялбаршуулсан дүрслэл. Орчин үеийн HTTP/2, HTTP/3 сүлжээгээр яг ийм plain text мөрөөр дамжихгүй байж болох ч method, path, headers, status, body гэсэн утга хэвээр.

Практик дасгал

Хүсэлтийн урсгалыг зөв дараалуулах

Дараах алхмыг цаасан дээр зөв дарааллаар дугаарла:

Server HTML хариулт буцаана.
Browser CSS болон JavaScript asset хүснэ.
Хэрэглэгч URL оруулна.
DNS domain-ийн хаягийг шийдвэрлэнэ.
Browser HTML хүсэлт илгээнэ.
Browser хуудас дүрслэнэ.

Дараа нь “Би URL оруулахад...” гэж эхлээд урсгалыг өөрийн үгээр тайлбарла.

Хүлээгдэж буй үр дүн

Зургаан алхмыг зөв дараалалд оруулсан жагсаалт болон урсгалыг өөрийн 3–5 өгүүлбэрээр тайлбарласан текст.

Дуусгах шалгах хуудас

DNS-ийн үүргийг server-ийн үүргээс салгасанRequest ба response-ийн чиглэлийг зөв тайлбарласанHTML-ийн дараа static asset хүсэж болохыг дурдсанУрсгалыг өөрийн үгээр тайлбарласан

Сонголттой зөвлөмж

Эхний алхам нь browser URL хүлээн авах; хамгийн сүүлийн алхам нь browser ирсэн нөөцийг дүрслэх.

Түгээмэл андуурал

Domain өөрөө server биш. Domain нь нэр; DNS түүнийг үйлчилгээний хаягтай холбоно.
Нэг page нэг request гэсэн үг биш. HTML, CSS, зураг, JavaScript тусдаа хүсэлт үүсгэж болно.
Browser database руу шууд итгэмжлэгдсэн байдлаар бичих ёсгүй. Нууц болон business rule-ийг browser-д даатгаж болохгүй.
200 status ирлээ гээд бүх interaction зөв гэсэн үг биш. HTML амжилттай ирсэн ч JavaScript эсвэл дараагийн API хүсэлт алдаж болно.

Мэдлэгээ шалгах

Дүгнэлт

URL оруулахад browser domain-ийн хаягийг DNS-ээр шийдвэрлэж, server рүү хүсэлт илгээнэ. Server HTML эсвэл бусад resource бүхий хариулт өгнө. Browser HTML-ийг уншиж, static asset-уудыг авч, хуудас дүрслээд client-side interaction ажиллуулна. Одоо энэ урсгалын server талд frontend, backend, database ямар хэсгийг хариуцахыг салгаж үзэхэд бэлэн боллоо.

Албан эх сурвалж

How the web works
MDN Web Docs · documentation
Overview of HTTP
MDN Web Docs · documentation
What is a URL?
MDN Web Docs · documentation