پث‌وایز

اینترنت چطور کار می‌کنه (How the Internet Works) · درس ۷ از ۱۲ · ۱۲ دقیقه

HTTP: چطور یه صفحه رو می‌خوای و جواب می‌گیری

ببین گوشیت دقیقاً چه پیام متنی‌ای می‌فرسته وقتی یه صفحه می‌خواد، و یاد بگیر جواب سرور رو طوری بخونی که بدونی یه صفحه‌ی خراب تقصیر خودته یا تقصیر سایت.

درخواست

درخواست یه پیام متنی کوچیکه

هر بار که مرورگرت یه چیزی می‌خواد، یه درخواست (Request) می‌فرسته: متن خالی، چیزی قایم نیست. یه method می‌گه این درخواست چه‌جوریه — GET یعنی یه چیزی رو که از قبل هست بگیر، POST یعنی یه داده بفرست، مثلاً یه فرم پرشده. یه path دقیقاً می‌گه کدوم چیز، مثلاً /menu. چندتا هدر (Header) هم جزئیات اضافه می‌کنن: Host می‌گه از بین سایت‌های روی این سرور منظورت کدومه، Accept می‌گه چه فرمتی رو می‌تونی بخونی.

GET /menu، Host: example.com، Accept: text/html یعنی به زبون خودمون: «صفحه‌ی منو رو از example.com بده، خودمم می‌تونم HTML بخونم.»

خودت رو امتحان کن

رضا اول example.com/menu رو باز می‌کنه که پیشنهادهای امروز رو ببینه، بعد یه فرم رو پر می‌کنه و سفارش ناهارشو می‌فرسته. به ترتیب، گوشیش از کدوم دوتا method استفاده می‌کنه؟

  1. GET، بعد GET
  2. GET، بعد POST
  3. POST، بعد GET
  4. POST، بعد POST
جواب رو ببین

GET، بعد POST

درسته. دیدن منو یعنی گرفتن چیزی که از قبل هست — همون GET. فرستادن سفارش یعنی فرستادن یه داده‌ی جدید به سرور — همون POST.

جواب

جواب هم یه شکل مشخص داره

جواب سرور هم متنه، با همون سه‌جور تیکه ولی برعکس. یه کد وضعیت (Status Code) می‌گه چی شده؛ مثلاً 200 یعنی «بیا، اینم چیزی که خواستی». هدرها هم جزئیات اضافه می‌کنن — Content-Type می‌گه بعدش چه‌جور چیزیه، مثلاً text/html یا image/png. بعدش نوبت body‌ست: خود صفحه، عکس، یا داده‌ای که درخواستت خواسته بود.

200 OK، Content-Type: text/html، بعدش خط‌های خود HTML صفحه. مرورگرت اول این دوتا رو می‌خونه که بفهمه با تیکه‌ی سوم چیکار کنه.

خودت رو امتحان کن

گوشیِ مرضیه با هدر «Accept: text/html» به سرور می‌گه چه فرمتی رو می‌تونه بخونه؛ بعد جواب سرور با هدر «Content-Type: text/html» می‌گه واقعاً چه فرمتی داره می‌فرسته.

جواب رو ببین

درست

درسته. Accept تو درخواسته و می‌گه گوشی چی رو می‌تونه بخونه. Content-Type تو جوابه و می‌گه سرور واقعاً چی فرستاده. یکی خواسته‌ست، اون یکی واقعیت.

خوندن جواب

کدها یعنی چی، و تقصیر کیه

چهارتا کد تقریباً همه‌چیزی که می‌بینی رو پوشش می‌ده. 200 یعنی کار کرد، همین، تقصیر هیچ‌کس نیست چون هیچی خراب نشده. 301 یعنی صفحه جای دیگه‌ای رفته، و سرور دقیقاً به مرورگرت می‌گه کجا؛ یعنی سایت داره خودشو مرتب می‌کنه، نه یه مشکل. 404 یعنی هیچی سر اون آدرس نیست، که ممکنه تقصیر خودت باشه (یه غلط تایپی، یه بوکمارک قدیمی) یا تقصیر سایت (صفحه رو پاک کرده و یادش رفته ریدایرکت بذاره). 500 یعنی سرور وسط جواب دادن خراب شده — این یکی همیشه تقصیر سرورـه، نه تو.

اگه 500 دیدی، رفرش کردن معمولاً کمکی نمی‌کنه: کد یا دیتابیس خود سایت خراب شده. اگه 404 دیدی اول آدرس رو چک کن؛ اگه درست بود، یعنی صفحه واقعاً دیگه نیست.

خودت رو امتحان کن

هر لحظه رو بذار تو گروهی که واقعاً «تقصیرشه»

  • صفحه درست باز می‌شه، 200
  • دنبال ریدایرکت خود سایت به آدرس جدیدش می‌ری، 301
  • آدرس رو غلط تایپ می‌کنی و 404 می‌گیری
  • یه لینک قدیمی که سال‌ها پیش ذخیره کردی یه غلط تایپی داره که هیچ‌وقت متوجهش نشدی، 404
  • رو یه لینک واقعی می‌زنی، ولی سایت اون صفحه رو بدون ریدایرکت پاک کرده، 404
  • سرور سایت وسط ساختن صفحه کرش می‌کنه، 500
جواب رو ببین

هیچی خراب نشده: صفحه درست باز می‌شه، 200, دنبال ریدایرکت خود سایت به آدرس جدیدش می‌ری، 301

یه چیزی طرف توئه: آدرس رو غلط تایپ می‌کنی و 404 می‌گیری, یه لینک قدیمی که سال‌ها پیش ذخیره کردی یه غلط تایپی داره که هیچ‌وقت متوجهش نشدی، 404

یه چیزی طرف سایته: رو یه لینک واقعی می‌زنی، ولی سایت اون صفحه رو بدون ریدایرکت پاک کرده، 404, سرور سایت وسط ساختن صفحه کرش می‌کنه، 500

قدم‌به‌قدم ببین

  1. کارت درخواست، پر شده و آماده

    کارت درخواست سمت چپ آماده‌ست: method و path یعنی GET /menu، بعدش هم هدرهای Host و Accept زیرش. کارت جواب سمت راست هنوز خالی و کم‌رنگه، چون هنوز چیزی فرستاده نشده. سرور هم که کوچیک پایین کشیده شده، هنوز از کسی خبری نگرفته.

  2. درخواست تا سرور پایین می‌ره

    یه پیکان آبی درخواست رو دقیقاً تا سرور پایین می‌بره: گوشی همون چیزی که تو کارت بالاست رو می‌فرسته، نه بیشتر نه کمتر. کارت جواب سمت راست هنوز خالی و منتظره.

  3. سرور جواب می‌ده: 200 OK

    سرور جواب می‌ده: یه پیکان نارنجی جوابشو تا کارت جواب بالا می‌بره، و اون کارت پر می‌شه — 200 OK، بعد Content-Type: text/html، بعد سه‌تا نوار خاکستری که جای خود محتوای صفحه، یعنی body، نشستن.

  4. چهار جور جوابی که یه سرور می‌تونه بده

    زیر کارت جواب، چهارتا چیپ بقیه‌ی جواب‌هایی که همین سرور می‌تونست بده رو نشون می‌دن: 200 یعنی خوبه، 301 یعنی جابه‌جا شده، 404 یعنی پیدا نشد، 500 یعنی خود سرور خراب شده. این بار اتفاقاً 200 جواب داد.

خودت رو امتحان کن

کیان یه صفحه رو درخواست می‌ده، ولی کارت جواب به‌جای «200 OK» می‌نویسه «500». طبق چیزی که اون چهارتا چیپ نشون می‌دن، احتمالاً چی شده؟

  1. صفحه به یه آدرس جدید منتقل شده
  2. این آدرس روی این سرور اصلاً وجود نداره
  3. خود سرور وسط جواب دادن خراب شده
  4. همه‌چی دقیقاً طبق انتظار پیش رفته
جواب رو ببین

خود سرور وسط جواب دادن خراب شده

درسته. 500 یعنی خود سرور وسط ساختن جواب به مشکل خورده — کد یا دیتابیس خودش خراب شده، ربطی به چیزی که کیان خواسته بود نداره.

پشت صحنه

یه صفحه هیچ‌وقت فقط یه درخواست نیست

اون HTMLـی که تو جواب اول برمی‌گرده در واقع فقط یه لیست خریده. مرورگرت اون رو می‌خونه و بلافاصله یه عالمه درخواست دیگه می‌فرسته — یکی برای هر عکس، هر فونت، هر اسکریپت و استایلی که صفحه لازم داره. یه صفحه‌ی به‌ظاهر ساده راحت می‌تونه ده‌ها GET جدا باشه، هر کدوم با جواب خودش، که همه باید تموم بشن تا بگی صفحه لود شد.

تب network مرورگرتو تقریباً روی هر سایت خبری باز کن، پنجاه، هشتاد، بعضی وقتا صدها درخواست برای یه صفحه می‌بینی — بیشترشونم عکس و اسکریپتی‌ان که اصلاً بهشون فکر نمی‌کنی.

خودت رو امتحان کن

هر کد وضعیت رو به معنی واقعیش وصل کن

جواب رو ببین
  • 200 → کار کرد — تقصیر هیچ‌کس نیست، هیچی خراب نشده
  • 301 → صفحه جابه‌جا شده، و سرور دقیقاً می‌گه کجا
  • 404 → هیچی سر این آدرس نیست — یا تقصیر غلط تایپی خودته یا سایت ریدایرکت نذاشته
  • 500 → سرور وسط جواب دادن خراب شده — همیشه تقصیر خود سرورـه

مرور درس

  • یه درخواست HTTP فقط متنه: یه method (GET یا POST)، یه path، و هدرهایی مثل Host و Accept.
  • جواب هم با یه کد وضعیت، هدرهایی مثل Content-Type، و یه body برمی‌گرده.
  • 200 یعنی خوبه، 301 یعنی جابه‌جا شده، 404 یعنی پیدا نشد (می‌تونه تقصیر هر دو طرف باشه)، 500 همیشه تقصیر خود سرورـه.
  • یه صفحه‌ی تنها معمولاً ده‌ها درخواسته — یکی برای HTML، بعد یکی برای هر عکس، فونت و اسکریپتی که لازم داره.

فقط نخونش، نگهش دار

پث‌وایز هر ایده رو درست قبل از اینکه فراموشش کنی با یه سؤال کوتاه برمی‌گردونه. رایگان روی اندروید و وب، به فارسی و انگلیسی.

Cafe Bazaar Myket باز کردن نسخه‌ی وب

همه‌ی درس‌های این دوره

  1. وقتی یه سایت رو باز می‌کنی چه اتفاقی می‌افته
  2. آدرس‌ها: یه دستگاه چطوری پیدا می‌شه
  3. بسته‌ها: پیام رو تیکه‌تیکه کردن
  4. DNS: دفترچه تلفن اینترنت
  5. روترها: یه راه پیدا می‌کنن، بعد یه راه دیگه
  6. TCP: مطمئن شدن از رسیدن همه‌چی
  7. HTTP: چطور یه صفحه رو می‌خوای و جواب می‌گیری
  8. HTTPS: قفل کنار آدرس دقیقاً چی رو محافظت می‌کنه
  9. کش و CDN: چرا بار دومی که یه سایت رو باز می‌کنی سریع‌تره
  10. وایفای، کابل و کف دریا
  11. چرا کند حس می‌شه: تأخیر و پهنای باند
  12. امن موندن: سایت‌های شبیه‌سازی‌شده و قدم دوم