كيف يعمل الويب: مقدمة للوافدين الجدد لتطوير الويب (أو أي شخص ، حقًا)

إذا كنت تدخل في تطوير الويب ، فمن المحتمل أنك تعتقد أنك تعرف كيفية عمل الويب - على الأقل على المستوى الأساسي.

... ولكن بعد ذلك تحاول شرح كيفية عمل موقع ويب أساسي ورسم فراغ. ماذا يعني عنوان IP مرة أخرى؟ كيف يعمل نموذج "العميل - الخادم" بالضبط؟

أطر التنمية قوية هذه الأيام. قوي جدًا ، في الواقع ، أنه من السهل علينا نحن الوافدين الجدد أن نفقد أساسيات كيفية عمل الويب ، كما تعلمون. *

أعلم أنني فعلت. لا عيب في الاعتراف بذلك: الويب معقد ، ولا تدرك مدى أهمية هذه الأساسيات إلا عندما تبدأ الهندسة في الواجهة الخلفية. (إذا كنت تريد إنشاء تطبيقات ويب تعمل بالفعل ، على أي حال).

لذلك أخذت على عاتقي كتابة دليل ميداني من أربعة أجزاء حول الأساسيات المخيفة التي يجب على الجميع التعامل معها ، سواء كنت تغوص في مهنة تطوير الويب أو كنت مهتمًا فقط بالتعلم:

الجزء 1: كيف يعمل الويب

الجزء 2: هيكل تطبيق الويب

الجزء 3: HTTP و REST

الجزء 4: أمثلة التعليمات البرمجية لتفاعلات العميل مع الخادم

بحث ويب أساسي

لنبدأ من مكان ما كنا جميعًا من قبل: اكتب “www.github.com” في شريط عنوان المتصفح الخاص بك وشاهد تحميل الصفحة.

قد تبدو هذه الصفقة بسيطة ، فهناك الكثير من السحر الذي يحدث تحت الغطاء. دعنا نتعمق فيه.

تحديد أجزاء من الويب

يعد فهم الويب أمرًا مخيفًا نظرًا لوجود الكثير من المصطلحات. لسوء الحظ ، فإن بعض هذه المصطلحات أمر بالغ الأهمية لفهم بقية هذا المنشور.

فيما يلي أهم المصطلحات التي يجب فهمها إذا كنت ترغب في التعرّف على أسرار شبكة الويب العالمية:

العميل: تطبيق ، مثل Chrome أو Firefox ، يتم تشغيله على جهاز كمبيوتر ومتصل بالإنترنت. يتمثل دورها الأساسي في أخذ تفاعلات المستخدم وترجمتها إلى طلبات إلى كمبيوتر آخر يسمى خادم الويب. على الرغم من أننا عادة ما نستخدم متصفحًا للوصول إلى الويب ، إلا أنه يمكنك التفكير في جهاز الكمبيوتر الخاص بك بالكامل على أنه جزء "عميل" من نموذج خادم العميل. لكل كمبيوتر عميل عنوان فريد يسمى عنوان IP يمكن لأجهزة الكمبيوتر الأخرى استخدامه للتعرف عليه.

الخادم: جهاز متصل بالإنترنت وله أيضًا عنوان IP. ينتظر الخادم الطلبات من الأجهزة الأخرى (مثل العميل) ويستجيب لها. على عكس جهاز الكمبيوتر الخاص بك (أي العميل) الذي يحتوي أيضًا على عنوان IP ، يحتوي الخادم على برنامج خادم خاص مثبت وتشغيل يخبره بكيفية الاستجابة للطلبات الواردة من متصفحك. تتمثل الوظيفة الأساسية لخادم الويب في تخزين صفحات الويب ومعالجتها وتسليمها للعملاء. هناك العديد من أنواع الخوادم ، بما في ذلك خوادم الويب وخوادم قواعد البيانات وخوادم الملفات وخوادم التطبيقات والمزيد. (في هذا المنشور ، نتحدث عن خوادم الويب.)

عنوان IP: عنوان بروتوكول الإنترنت. معرّف رقمي لجهاز (كمبيوتر ، خادم ، طابعة ، موجه ، إلخ) على شبكة TCP / IP. لكل كمبيوتر على الإنترنت عنوان IP يستخدمه للتعرف والتواصل مع أجهزة الكمبيوتر الأخرى. تحتوي عناوين IP على أربع مجموعات من الأرقام مفصولة بنقاط عشرية (مثل 244.155.65.2). هذا يسمى "العنوان المنطقي". من أجل تحديد موقع جهاز في الشبكة ، يتم تحويل عنوان IP المنطقي إلى عنوان مادي بواسطة برنامج بروتوكول TCP / IP. تم تضمين هذا العنوان الفعلي (أي عنوان MAC) في جهازك.

ISP: مزود خدمة الإنترنت. ISP هو الوسيط بين العميل والخوادم. بالنسبة لمالك المنزل العادي ، عادةً ما يكون مزود خدمة الإنترنت "شركة كابل". عندما يتلقى متصفحك طلبًا منك للانتقال إلى www.github.com ، فإنه لا يعرف مكان البحث عن www.github.com. لذا فإن مهمة ISP هي إجراء بحث DNS (نظام اسم المجال) للسؤال عن عنوان IP الذي تم تكوين الموقع الذي تحاول زيارته إليه.

DNS: نظام اسم المجال. قاعدة بيانات موزعة تتعقب أسماء مجالات الكمبيوتر وعناوين IP المقابلة لها على الإنترنت. لا تقلق بشأن كيفية عمل "قاعدة البيانات الموزعة" في الوقت الحالي: فقط اعلم أن DNS موجود حتى يتمكن المستخدمون من إدخال www.github.com بدلاً من عنوان IP.

اسم المجال: يستخدم لتحديد عنوان IP واحد أو أكثر. يستخدم المستخدمون اسم المجال (مثل www.github.com) للوصول إلى موقع ويب على الإنترنت. عندما تكتب اسم المجال في متصفحك ، يستخدمه DNS للبحث عن عنوان IP المقابل لموقع الويب المحدد.

TCP / IP: بروتوكول التحكم في الإرسال / بروتوكول الإنترنت. بروتوكول الاتصالات الأكثر استخدامًا. "البروتوكول" هو ببساطة مجموعة قياسية من القواعد لعمل شيء ما. يستخدم بروتوكول TCP / IP كمعيار لنقل البيانات عبر الشبكات.

رقم المنفذ: عدد صحيح 16 بت يحدد منفذًا معينًا على الخادم ويرتبط دائمًا بعنوان IP. إنه بمثابة وسيلة لتحديد عملية معينة على الخادم يمكن إعادة توجيه طلبات الشبكة إليه.

المضيف: جهاز كمبيوتر متصل بشبكة - يمكن أن يكون عميلاً أو خادمًا أو أي نوع آخر من الأجهزة. كل مضيف لديه عنوان IP فريد. بالنسبة إلى موقع ويب مثل www.google.com ، يمكن أن يكون المضيف هو خادم الويب الذي يخدم صفحات موقع الويب. غالبًا ما يكون هناك بعض الاختلاط بين المضيف والخادم ولكن لاحظ أنهما شيئان مختلفان. الخوادم هي نوع من المضيفين - إنها آلة محددة. من ناحية أخرى ، يمكن أن يشير المضيف إلى مؤسسة بأكملها توفر خدمة استضافة للحفاظ على خوادم ويب متعددة. يمكنك تشغيل خادم من مضيف بهذا المعنى.

HTTP: بروتوكول نقل النص التشعبي. البروتوكول الذي تستخدمه متصفحات الويب وخوادم الويب للتواصل مع بعضها البعض عبر الإنترنت.

URL: محددات مواقع الويب . تحدد عناوين URL مورد ويب معين. مثال بسيط هو //github.com/someone. يحدد عنوان URL البروتوكول ("https") واسم المضيف (github.com) واسم الملف (صفحة الملف الشخصي لشخص ما). يمكن للمستخدم الحصول على مورد الويب المحدد بواسطة عنوان URL هذا عبر HTTP من مضيف شبكة اسم مجاله github.com (اللسان الإعصار كثيرا ؟!)

الرحلة من الكود إلى صفحة الويب

حسنًا ، بعد أن أصبح لدينا التعريفات الأساسية بعيدًا ، دعنا نتصفح بحث Github لنرى كيف ننتقل من عنوان URL مكتوب في شريط العنوان إلى صفحة ويب قيد التشغيل:

1) تكتب عنوان URL في متصفحك

2) يقوم المتصفح بتحليل المعلومات الواردة في عنوان URL. يتضمن ذلك البروتوكول ("https") واسم المجال ("github.com") والمورد ("/"). في هذه الحالة ، لا يوجد أي شيء بعد ".com" للإشارة إلى مورد معين ، لذلك يعرف المتصفح استرداد الصفحة الرئيسية (الفهرس) فقط

3) يتصل المتصفح بمزود خدمة الإنترنت لديك لإجراء بحث DNS عن عنوان IP لخادم الويب الذي يستضيف www.github.com. ستتصل خدمة DNS أولاً بخادم اسم الجذر ، الذي يبحث في //www.github.com ويرد بعنوان IP لخادم الأسماء لنطاق المستوى الأعلى ".com". يتم إرسال هذا العنوان مرة أخرى إلى خدمة DNS الخاصة بك. تقوم خدمة DNS بوصول آخر إلى خادم الاسم ".com" وتطلب منه عنوان //www.github.com.

المصدر: //technet.microsoft.com/en-us/library/bb962069.aspx

4) بمجرد أن يتلقى مزود خدمة الإنترنت عنوان IP للخادم الوجهة ، فإنه يرسله إلى متصفح الويب الخاص بك

5) يأخذ متصفحك عنوان IP ورقم المنفذ المحدد من عنوان URL (بروتوكول HTTP افتراضيًا هو المنفذ 80 ويتم تعيين HTTPS افتراضيًا على المنفذ 443) ويفتح اتصال TCP socket. في هذه المرحلة ، يتم توصيل متصفح الويب الخاص بك وخادم الويب أخيرًا.

6) يرسل متصفح الويب الخاص بك طلب HTTP إلى خادم الويب لصفحة الويب HTML الرئيسية www.github.com.

7) يتلقى خادم الويب الطلب ويبحث عن صفحة HTML هذه. إذا كانت الصفحة موجودة ، يقوم خادم الويب بإعداد الاستجابة وإرسالها مرة أخرى إلى متصفحك. إذا لم يتمكن الخادم من العثور على الصفحة المطلوبة ، فسيرسل رسالة خطأ HTTP 404 ، والتي تعني "لم يتم العثور على الصفحة".

8) يأخذ متصفح الويب الخاص بك صفحة HTML التي يتلقاها ثم يوزعها من خلالها لإجراء مسح كامل من الرأس إلى أخمص القدمين بحثًا عن الأصول الأخرى المدرجة ، مثل الصور وملفات CSS وملفات JavaScript وما إلى ذلك.

9) لكل أصل مدرج ، يكرر المتصفح العملية بأكملها أعلاه ، مما يجعل طلبات HTTP إضافية للخادم لكل مورد.

10) بمجرد انتهاء المتصفح من تحميل جميع الأصول الأخرى المدرجة في صفحة HTML ، سيتم أخيرًا تحميل الصفحة في نافذة المتصفح وسيتم إغلاق الاتصال

عبور هوة الإنترنت

هناك شيء واحد جدير بالملاحظة وهو كيفية نقل المعلومات عند تقديم طلب للحصول على معلومات. عند تقديم طلب ، يتم تقسيم هذه المعلومات إلى العديد من القطع الصغيرة تسمى الحزم. يتم تمييز كل حزمة برأس TCP ، والذي يتضمن أرقام المنفذ المصدر والوجهة ، ورأس IP الذي يتضمن عناوين IP المصدر والوجهة لمنحها هويتها. يتم بعد ذلك إرسال الحزمة عبر شبكة إيثرنت أو شبكة WiFi أو شبكة خلوية ويُسمح لها بالسفر على أي طريق واتخاذ أكبر عدد ممكن من القفزات للوصول إلى الوجهة النهائية.

(نحن في الواقع لا نهتم بكيفية وصول الحزم إلى هناك - كل ما يهم هو أنها تصل إلى الوجهة بأمان وسليمة!) بمجرد وصول الحزم إلى الوجهة ، يتم إعادة تجميعها مرة أخرى وتسليمها كقطعة واحدة.

إذن كيف تعرف جميع الحزم كيفية الوصول إلى وجهتها دون أن تضيع؟

الجواب هو TCP / IP.

TCP / IP هو نظام من جزأين ، يعمل بمثابة "نظام التحكم" الأساسي للإنترنت. IP تعني بروتوكول الإنترنت ؛ وتتمثل مهمتها في إرسال الحزم وتوجيهها إلى أجهزة الكمبيوتر الأخرى باستخدام رؤوس IP (أي عناوين IP) على كل حزمة. الجزء الثاني ، بروتوكول التحكم في الإرسال (TCP) ، مسؤول عن تقسيم الرسالة أو الملف إلى حزم أصغر ، وتوجيه الحزم إلى التطبيق الصحيح على الكمبيوتر الوجهة باستخدام رؤوس TCP ، وإعادة إرسال الحزم إذا ضاعت في الطريق ، و إعادة تجميع الحزم بالترتيب الصحيح بمجرد وصولها إلى الطرف الآخر.

رسم الصورة النهائية

لكن انتظر - لم تنته المهمة بعد! الآن بعد أن أصبح متصفحك يحتوي على الموارد التي تتكون من موقع الويب (HTML ، CSS ، JavaScript ، الصور ، إلخ) ، يجب أن يمر بعدة خطوات لتقديم الموارد لك كصفحة ويب يمكن للبشر قراءتها.

يحتوي متصفحك على محرك عرض مسؤول عن عرض المحتوى. يستقبل محرك التقديم محتوى الموارد في أجزاء صغيرة. ثم هناك خوارزمية تحليل HTML تخبر المتصفح بكيفية تحليل الموارد.

بمجرد تحليله ، فإنه يولد بنية شجرية لعناصر DOM. يرمز DOM إلى نموذج كائن المستند وهو اصطلاح لكيفية تمثيل الكائنات الموجودة في مستند HTML. يمكن معالجة هذه الكائنات - أو "العقد" - لكل مستند باستخدام لغات البرمجة النصية مثل JavaScript.

بمجرد بناء شجرة DOM ، يتم تحليل أوراق الأنماط لفهم كيفية تصميم كل عقدة. باستخدام هذه المعلومات ، يتخطى المتصفح عُقد DOM ويحسب نمط CSS وموضعه وإحداثياته ​​وما إلى ذلك لكل عقدة.

بمجرد أن يحتوي المتصفح على عُقد DOM وأنماطها ، يكون جاهزًا * أخيرًا * لرسم الصفحة على شاشتك وفقًا لذلك. النتيجة: كل ما شاهدته على الإنترنت.

الويب معقد ، لكنك انتهيت للتو من الجزء الصعب

إذن هذا هو الويب باختصار. ضائع؟ نحن جميعًا ، ولكن إذا قرأت هذا حتى الآن ، فقد انتهيت بالفعل من الجزء الصعب. من الواضح أنني تخطيت بعض التفاصيل من أجل إظهار الصورة الكبيرة لك هنا ؛ ولكن إذا كان بإمكانك أن تلتف حول التسلسل الأساسي للأحداث الموضحة أعلاه ، فإن ملء التفاصيل سيكون بمثابة قطعة من الكعكة.

تحقق من الجزء 2 ، حيث سنتعامل مع بنية تطبيق الويب الأساسي. :)