URL anatomiyasi: scheme, host, port, path, query va fragment

Qisqacha: URL — internetdagi istalgan sahifa, rasm yoki faylning to'liq manzili, masalan https://example.com/menyu?taom=osh#narxlar. U qismlardan iborat: scheme (qanday ulanish), host (qaysi server), port, path (server ichidagi yo'l), query (qo'shimcha parametrlar) va fragment (sahifaning qaysi joyi). Fragment serverga yuborilmaydi, qolgan hammasi yuboriladi.

Bu darsda

• Istalgan URL'ni qismlarga ajrata olasiz va har birining vazifasini aytasiz.
• Query string (?kalit=qiymat&...) qanday tuzilishini bilasiz.
• Fragment (#) nega serverga bormasligini tushunasiz.
• Percent-encoding (%20, %D0%A2) nima ekanini va qachon kerakligini bilasiz.
• Absolyut va nisbiy URL farqini bilasiz.
• Soxta havolalarni host'iga qarab taniysiz.

Oldin bilishingiz kerak: Domen va DNS, Yo'llar (path): absolyut va nisbiy, Matn kodlash: ASCII, Unicode va UTF-8.

1. Nega bu kerak?

Aziz onlayn do'konda telefon qidiryapti. U narxni "arzondan qimmatga" saraladi va 2-sahifaga o'tdi. Keyin manzil satridagi havolani nusxalab, akasiga Telegram'da yubordi. Akasi havolani ochdi va aynan o'sha saralangan 2-sahifani ko'rdi.

Qanday qilib? Axir akasi hech narsani bosmagan edi. Javob: saralash ham, sahifa raqami ham havolaning o'zida yozilgan.

Oldingi darsda domen serverni topishini ko'rdik. Lekin serverda minglab sahifa bor. Qaysi birini, qanday filtr bilan, sahifaning qaysi joyini ko'rsatish kerak — bularning hammasini URL aytadi. Frontend'da ham, backend'da ham URL bilan har kuni ishlaysiz.

2. URL nima?

URL (Uniform Resource Locator — "resursning yagona manzili") — internetdagi biror resursni qayerdan va qanday olish kerakligini ko'rsatadigan matn. Resurs — URL orqali olinadigan har qanday narsa: sahifa, rasm, video, PDF, JSON ma'lumot.

O'xshatish: to'liq pochta manzili. "O'zbekiston, Toshkent, Navoiy ko'chasi, 12-uy, 5-xonadon, Alisherga" — har bir qism qidiruvni biroz toraytiradi. URL ham shunday.

Barcha qismlari bor URL'ni ko'raylik:

https://example.com:8080/kurslar/js?saralash=yangi&sahifa=2#reja

Uni bo'laklarga ajratamiz:

https :// example.com : 8080 /kurslar/js ? saralash=yangi&sahifa=2 # reja
  |          |           |       |                  |                 |
scheme     host        port    path              query          fragment

Kundalik URL'larda hamma qism bo'lavermaydi. https://example.com da faqat scheme va host bor — qolganlari ixtiyoriy.

Maslahat: Hujjatlarda URI so'zi ham uchraydi. U URL'dan kengroq tushuncha, lekin amalda dasturchilar ikkalasini deyarli bir ma'noda ishlatadi. Ko'rsangiz, "URL" deb o'qiyvering.

3. Scheme, host, port va path

3.1 Scheme — qanday ulanamiz

Scheme (sxema) — resursga qanday qoidalar (protokol) bilan murojaat qilishni aytadi. Undan keyin :// keladi.

• https — shifrlangan sayt. Bugun deyarli hamma sayt shunday.
• http — shifrlanmagan sayt. Asosan http://localhost:3000 kabi o'z kompyuteringizda uchraydi.
• mailto:ali@example.com — pochta dasturini ochadi.
• tel:+998900000000 — telefonda qo'ng'iroq oynasini ochadi.
• file:///C:/Users/Aziz/index.html — kompyuterdagi fayl. Bu absolyut yo'l oldiga file:/// qo'shilgani.

mailto: va tel: da // yo'q — ular server manziliga emas, dasturga ishora qiladi.

3.2 Host va port

Host — resurs turgan server: domen (example.com) yoki to'g'ridan-to'g'ri IP manzil (127.0.0.1). Domen bo'lsa, brauzer avval DNS orqali IP'ni topadi. Host'da katta-kichik harf farqi yo'q: EXAMPLE.com va example.com — bir xil.

Port host'dan keyin ikki nuqta bilan yoziladi: example.com:8080. Ko'pincha u umuman ko'rinmaydi. Sababi: har bir scheme'ning "odatiy" porti bor — https uchun 443, http uchun 80. Port odatiy bo'lsa, uni yozmaslik mumkin:

https://example.com      =  https://example.com:443
http://localhost:3000    ←  port 3000 odatiy emas, yozish shart

3.3 Path — server ichidagi yo'l

Path (yo'l) — server ichidagi aniq resursni ko'rsatadi: /kurslar/js, /rasmlar/logo.png. U kompyuterdagi papka yo'liga juda o'xshaydi — yo'llar darsidagi kabi / bilan ajratiladi va / bilan boshlanadi.

Farqi bor: path har doim ham serverdagi haqiqiy papkaga mos kelmaydi. Zamonaviy saytlarda server dasturi /kurslar/js ni o'qiydi va kerakli sahifani o'zi yasab beradi. Path'ni "server uchun buyruq" deb tasavvur qilgan to'g'riroq.

Host'dan farqli o'laroq, path'da katta-kichik harf ko'pincha farq qiladi: /Menyu va /menyu ikki xil sahifa bo'lishi mumkin. Shuning uchun path'larni kichik harf bilan yozish odat.

Tekshirib ko'ring: http://localhost:5173/admin/foydalanuvchilar da host, port va path qaysi?

4. Query string: qo'shimcha parametrlar

4.1 Tuzilishi

Query string (so'rov parametrlari) — path'dan keyin ? bilan boshlanadigan qism. U serverga "qanday qilib" degan qo'shimcha ma'lumotni beradi: nima qidirilyapti, qanday saralansin, nechanchi sahifa.

Qoidalari oddiy:

• ? — query shu yerdan boshlanadi.
• Har bir parametr — kalit=qiymat. Bu JSON darsidagi "kalit — qiymat" juftligining o'zi, faqat boshqacha yozilgan.
• Parametrlar & bilan ajratiladi.

https://example.com/telefonlar?saralash=arzon&sahifa=2&brend=samsung

Bu yerda uchta parametr bor: saralash = arzon, sahifa = 2, brend = samsung. Aziz akasiga yuborgan havola aynan shunday edi — shuning uchun akasi o'sha natijani ko'rdi.

Bitta kalit bir necha marta takrorlanishi mumkin: ?taom=osh&taom=somsa — "osh va somsa". Filtrlarda bu ko'p uchraydi.

4.2 Query serverga boradi

Query URL'ning bir qismi sifatida serverga yuboriladi. Server uni o'qiydi va javobni shunga qarab tayyorlaydi. Buni keyingi darsda HTTP so'rovi ichida o'z ko'zingiz bilan ko'rasiz.

Real misol — Google qidiruvi. Qidiruvga "toshkent ob havo" yozsangiz, manzil satrida shunga o'xshash URL paydo bo'ladi:

https://www.google.com/search?q=toshkent+ob+havo

q (query — "so'rov") kalitining qiymati — siz yozgan matn. Bo'sh joylar o'rnida + turibdi. Nega — percent-encoding bo'limida ko'ramiz.

5. Fragment: sahifaning bir joyi

5.1 # nima qiladi?

Fragment — URL oxirida # bilan boshlanadigan qism. U sahifaning aniq bir joyini ko'rsatadi. Brauzer sahifani ochadi va o'sha joyga o'zi aylantirib (scroll qilib) tushadi.

Masalan, uzun maqolada https://example.com/maqola#xulosa havolasi to'g'ridan-to'g'ri "Xulosa" bo'limini ochadi. Sahifadagi qaysi element "xulosa" ekanini HTML'da belgilaysiz — buni HTML qismida o'rganamiz.

5.2 Fragment serverga yuborilmaydi

Bu URL'ning eng muhim qoidalaridan biri. Brauzer # dan keyingi hamma narsani o'zida qoldiradi. Serverga faqat undan oldingi qism ketadi.

Buni isbotlaymiz. curl -v serverga nima yuborilganini > bilan boshlanadigan qatorlarda ko'rsatadi:

curl.exe -v "https://example.com/?qidiruv=kitob#reja" -o NUL

Haqiqiy chiqishdan ikki qator:

> GET /?qidiruv=kitob HTTP/1.1
> Host: example.com

Query (?qidiruv=kitob) serverga ketdi. #reja esa yo'q. (-o NUL — "sahifa matnini ekranga chiqarma". URL'ni qo'shtirnoqqa oldik, chunki & va # terminal uchun ham maxsus belgilar.)

Tekshirib ko'ring: Backend dasturchi https://example.com/maqola?til=uz#izohlar so'rovidan izohlar so'zini o'qimoqchi. Bu mumkinmi?

6. Percent-encoding: maxsus belgilarni yozish

6.1 Muammo

URL'da faqat cheklangan belgilar to'g'ridan-to'g'ri ishlatiladi: lotin harflari, raqamlar va - . _ ~ kabi bir nechta belgi. Ba'zi belgilarning esa URL'da maxsus vazifasi bor: ? query'ni boshlaydi, & parametrlarni ajratadi, # fragmentni boshlaydi.

Endi Aziz "Toshkent shahri & viloyati" deb qidirdi. Query'ga shunchaki qo'ysak:

?q=Toshkent shahri & viloyati

Server buni ikki parametr deb tushunadi: q = Toshkent shahri , va qiymatsiz viloyati kaliti. & o'z vazifasini bajarib, matnni bo'lib yubordi.

6.2 Yechim: % va ikki belgili kod

Percent-encoding (foizli kodlash) — URL'da ruxsat etilmagan yoki maxsus belgini % va uning bayt kodi bilan almashtirish. Kod o'n oltilik sanoqda yoziladi.

Oxirgi qatorga e'tibor bering. UTF-8 darsidan eslang: lotin bo'lmagan harflar bir necha baytda yoziladi. Har bir bayt alohida %XX bo'ladi. Shuning uchun Тошкент URL'da %D0%A2%D0%BE%D1%88%D0%BA%D0%B5%D0%BD%D1%82 bo'lib ketadi.

Endi "Toshkent shahri & viloyati" to'g'ri kodlangan holda:

?q=Toshkent+shahri+%26+viloyati

& endi %26 — u ajratuvchi emas, oddiy belgi. Server uni qaytadan "Toshkent shahri & viloyati" ga aylantiradi.

6.3 + va %20

Query ichida bo'sh joy ikki xil yoziladi: %20 yoki +. + — HTML formalaridan qolgan eski odat, Google ham shuni ishlatadi. Path'da esa bo'sh joy har doim %20.

Oqibati: query'da haqiqiy + belgisini yubormoqchi bo'lsangiz (masalan, telefon raqamidagi), uni %2B deb kodlash kerak. Aks holda server uni bo'sh joy deb o'qiydi.

Maslahat: Brauzer manzil satrida odatda chiroyli, kodlanmagan ko'rinishni ko'rsatadi. Lekin havolani nusxalasangiz, ko'pincha kodlangan ko'rinish chiqadi. Telegram'ga yuborilgan uzun %D0%... havola — xato emas, o'sha havolaning o'zi.

Tekshirib ko'ring: ?izoh=zo'r query'sida apostrof qanday kodlanadi?

7. Absolyut va nisbiy URL

Yo'llar darsida absolyut va nisbiy yo'lni o'rgangansiz. URL'larda ham xuddi shunday.

• Absolyut URL — to'liq manzil, scheme bilan: https://example.com/kurslar/js. Qayerdan ochilsa ham bir joyga olib boradi.
• Nisbiy URL — to'liq bo'lmagan manzil. U hozir ochiq turgan sahifaga nisbatan hisoblanadi.

Faraz qiling, siz https://example.com/kurslar/js/dars.html sahifasidasiz. Sahifadagi havolalar qayerga olib boradi:

• / bilan boshlansa — sayt ildizidan hisoblanadi.
• / siz boshlansa — joriy "papka"dan hisoblanadi.
• ../ — bir papka yuqoriga, xuddi terminaldagi cd .. kabi.

Saytingiz ichidagi havolalarda odatda nisbiy URL, boshqa saytlarga havolada esa absolyut URL ishlatiladi.

8. JavaScript'da URL bilan ishlash: bir ko'z tashlash

JavaScript'ni 8-qismda o'rganamiz — hozir quyidagi kodni yozish shart emas. Faqat ko'ring: dasturchilar URL'ni qo'lda bo'laklamaydi, tayyor vositadan foydalanadi. Kod ostidagi "Ishga tushir" tugmasini bosib, natijani ko'rishingiz mumkin.

const manzil = new URL(
  "https://example.com:8080/kurslar/js?saralash=yangi#reja"
);

console.log(manzil.hostname); // example.com
console.log(manzil.port); // 8080
console.log(manzil.pathname); // /kurslar/js
console.log(manzil.search); // ?saralash=yangi
console.log(manzil.hash); // #reja

• new URL(...) — matndagi URL'ni qismlarga ajratib beradi.
• console.log(...) — natijani ekranga chiqaradi. // dan keyin nima chiqishi yozilgan.

Query parametrlari uchun alohida yordamchi bor — searchParams. U kodlashni ham o'zi bajaradi:

const qidiruv = new URL("https://example.com/qidiruv");
qidiruv.searchParams.set("q", "Toshkent shahri & viloyati");

console.log(qidiruv.href);
console.log(qidiruv.searchParams.get("q"));

Konsolda:

https://example.com/qidiruv?q=Toshkent+shahri+%26+viloyati
Toshkent shahri & viloyati

set qiymatni qo'shdi va & ni o'zi %26 qildi. get esa teskarisini qildi. Bu vositalarni URL va URLSearchParams darsida to'liq o'rganamiz.

9. Hujumchi nigohi

Firibgarlar URL tuzilishini yaxshi biladi va odamlar uni bilmasligidan foydalanadi. Aziz Telegram'da "bankingiz: bonus oling" degan xabar oldi. Havolalarni ko'raylik.

1-hiyla: @ belgisi.

https://example.com@firibgar.example/kirish

Ko'zga example.com birinchi tashlanadi. Lekin :// dan keyin @ gacha bo'lgan qism — host emas. Bu eski "foydalanuvchi nomi" maydoni, brauzer uni e'tiborsiz qoldiradi. Haqiqiy host — @ dan keyingisi: firibgar.example.

2-hiyla: uzun subdomen.

https://example.com.firibgar.example/kirish

DNS darsini eslang: domen o'ngdan chapga o'qiladi. Oxiridan boshlaymiz: TLD — .example, domen — firibgar.example. example.com esa shunchaki subdomen nomi — uni istalgan odam o'z domeniga yozib qo'ya oladi.

3-hiyla: o'xshash harflar. examp1e.com (l o'rniga 1) yoki exarnple.com (m o'rniga rn). Tez qaralganda farqi sezilmaydi.

Himoya qoidasi: havolada host'ni toping. Buning uchun :// dan keyingi qismni birinchi / gacha oling, @ bo'lsa undan keyingisini qoldiring. Keyin uni o'ngdan chapga o'qing. Bank, to'lov va parol sahifalarini xabardagi havoladan emas, o'zingiz yozib yoki xatcho'pdan oching.

10. Ko'p uchraydigan xatolar

10.1 Query'ni qo'lda yig'ish

"?q=" + matn ko'rinishida yig'ilgan URL matnda &, # yoki bo'sh joy bo'lsa buziladi — yuqoridagi "Toshkent shahri & viloyati" misolidagi kabi. Qiymatni doim kodlang yoki searchParams kabi vositadan foydalaning.

10.2 Fragment'ni serverda kutish

# dan keyingi qism serverga bormaydi. Server ko'rishi kerak bo'lgan ma'lumotni query'ga qo'ying.

10.3 Scheme'siz URL

JavaScript'ga new URL("example.com/menyu") bersangiz, xato chiqadi:

TypeError: Invalid URL

Tarjimasi: "Turi xatosi: yaroqsiz URL". Scheme yo'q — example.com host'mi yoki oddiy papka nomimi, aniq emas. Absolyut URL doim https:// bilan boshlanadi.

10.4 Nisbiy havolada / ni unutish

kontakt va /kontakt — ikki xil manzil. Sahifa /kurslar/js/ ichida bo'lsa, birinchisi /kurslar/js/kontakt ga, ikkinchisi /kontakt ga olib boradi. "Havola ba'zi sahifalarda ishlaydi, ba'zilarida 404" — ko'pincha shu sabab.

11. Mashqlar

1-mashq (oson): Qismlarga ajrating

URL: https://shop.example.com/katalog/telefonlar?brend=samsung&narx=arzon#sharhlar

Scheme, host, port, path, query va fragment'ni yozing.

2-mashq (o'rta): Havolalar qayerga olib boradi?

Siz https://example.com/blog/2026/maqola.html sahifasidasiz. Har bir havola qaysi absolyut URL'ga olib boradi?

1. /blog
2. rasm.png
3. ../index.html
4. https://example.org/

3-mashq (qiyin): Qaysi havola xavfsiz?

Qaysi havolalar haqiqatan example.com saytiga olib boradi? Har biri uchun haqiqiy host'ni yozing.

1. https://example.com.login.example/
2. https://login.example.com/kirish?qaytish=https://boshqa.example
3. https://example.com@boshqa.example/
4. https://www.example.com/?q=%26

Bonus: 4-havoladagi q parametrining qiymati nima?

12. Real ishda

• Filtrlar va sahifalash. Onlayn do'konlarda saralash, filtr va sahifa raqami query'da saqlanadi — havolani ulashsa bo'ladi, "orqaga" tugmasi ham to'g'ri ishlaydi. Frontend dasturchi buni har kuni yozadi.
• Reklama belgilari. ?utm_source=telegram&utm_campaign=kuz kabi parametrlar foydalanuvchi qaysi reklamadan kelganini bildiradi. Marketing bo'limi ularni analitikada ko'radi.
• API manzillari. Backend'da har bir resursning o'z path'i bo'ladi: /api/buyurtmalar/15. Bu tuzilishni REST darsida chuqur o'rganamiz.
• SEO (saytni qidiruv natijalarida yuqoriga chiqarish). Google tushunarli path'larni yaxshi ko'radi: /kurslar/javascript — /page?id=8123 dan yaxshiroq.
• Intervyu savoli: "Query va fragment farqi nima?" — javob: query serverga boradi, fragment bormaydi.

Xulosa

• URL = scheme + host + port + path + query + fragment. Faqat scheme va host majburiy.
• Port odatiy bo'lsa (443, 80), yozilmaydi.
• Query (?a=1&b=2) serverga boradi. Fragment (#...) — faqat brauzerda qoladi.
• Maxsus va lotin bo'lmagan belgilar percent-encoding bilan yoziladi: %20, %26, %D0%A2.
• / bilan boshlangan havola — sayt ildizidan, / siz — joriy papkadan hisoblanadi.
• Soxta havolani tanish uchun host'ni toping va o'ngdan chapga o'qing.

Keyingi dars: Client–server modeli va HTTP xabari — brauzer shu URL bo'yicha serverga qanday xabar yuboradi va server qanday javob qaytaradi.