2. أساسيات برمجة الويب

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

فيما يلي مكونات تطبيق الويب:

الرقم	الدور	أمثلة شائعة
1	نظام تشغيل الخادم	Unix، Linux، Windows
2	خادم الويب	أباتشي (يونكس، لينكس، ويندوز) IIS (ويندوز + منصة .NET) Node.js (Unix، Linux، Windows)
3	كود جانب الخادم. يمكن تنفيذه بواسطة وحدات الخادم أو بواسطة برامج خارجية (CGI).	JAVASCRIPT (Node.js) PHP (Apache، IIS) JAVA (Tomcat، WebSphere، JBoss، WebLogic، ...) C#، VB.NET (IIS)
4	قاعدة البيانات - يمكن أن تكون موجودة على نفس الجهاز الذي يعمل عليه البرنامج الذي يستخدمها، أو على جهاز آخر عبر الإنترنت.	Oracle (Linux، Windows) MySQL (لينكس، ويندوز) Postgres (لينكس، ويندوز) SQL Server (ويندوز)
5	نظام تشغيل العميل	Unix، Linux، Windows
6	متصفح الويب	Chrome، Internet Explorer، Firefox، Opera، Safari، ...
7	نصوص برمجية من جانب العميل يتم تنفيذها داخل المتصفح. لا يمكن لهذه النصوص البرمجية الوصول إلى قرص جهاز العميل.	جافا سكريبت (جميع المتصفحات)

2.1. تبادل البيانات في تطبيق ويب باستخدام نموذج

الرقم	الدور
1	يطلب المتصفح عنوان URL للمرة الأولى (http://machine/url). لا يتم تمرير أي معلمات.
2	يرسل خادم الويب صفحة الويب الخاصة بعنوان URL هذا. قد تكون هذه الصفحة ثابتة أو تم إنشاؤها ديناميكيًا بواسطة برنامج نصي من جانب الخادم (SA) قد يكون استخدم محتوى من قواعد البيانات (SB، SC). هنا، سيكتشف البرنامج النصي أن عنوان URL قد طُلب بدون أي معلمات وسيقوم بإنشاء صفحة الويب الأولية. يتلقى المتصفح الصفحة ويعرضها (CA). قد تكون البرامج النصية من جانب المتصفح (CB) قد عدلت الصفحة الأولية التي أرسلها الخادم. بعد ذلك، من خلال التفاعلات بين المستخدم (CD) والبرامج النصية (CB)، سيتم تعديل صفحة الويب. على وجه الخصوص، سيتم ملء النماذج.
3	يقوم المستخدم بإرسال بيانات النموذج، والتي يجب إرسالها بعد ذلك إلى خادم الويب. يطلب المتصفح عنوان URL الأولي أو عنوانًا آخر، حسب الاقتضاء، ويقوم في الوقت نفسه بنقل قيم النموذج إلى الخادم. ويمكنه استخدام طريقتين لهذا الغرض: GET و POST. عند استلام طلب العميل، يقوم الخادم بتشغيل البرنامج النصي (SA) المرتبط بعنوان URL المطلوب، والذي سيكتشف المعلمات ويعالجها.
4	يقوم الخادم بتسليم صفحة الويب التي تم إنشاؤها بواسطة البرنامج (SA، SB، SC). هذه الخطوة مطابقة للخطوة 2 السابقة. ويستمر الاتصال الآن وفقًا للخطوتين 2 و 3.

2.2. صفحات الويب الثابتة، صفحات الويب الديناميكية

يتم تمثيل الصفحة الثابتة بملف HTML. أما الصفحة الديناميكية فهي صفحة HTML يتم إنشاؤها "على الفور" بواسطة خادم الويب.

2.2.1. صفحة HTML (لغة ترميز النص التشعبي) ثابتة

لنقم بإنشاء أول مشروع ويب لنا باستخدام Visual Studio Express 2012. نستخدم خيار [ملف / مشروع جديد]:

في [1]، حدد أنك تريد إنشاء تطبيق ASP.NET فارغ؛
في [2]، أدخل اسم حل Visual Studio. ستكون جميع الأمثلة في هذا المستند ضمن نفس الحل؛
في [3]، حدد المجلد الأصلي للمشروع المراد إنشاؤه؛
في [4]، اسم المشروع.

انقر فوق "موافق".

يظهر المشروع الناتج في [5]. سنستخدمه لتوضيح المبادئ الأساسية لبرمجة الويب.

لنبدأ بإنشاء صفحة HTML ثابتة:

في [1]، انقر بزر الماوس الأيمن على المشروع واتبع الخيارات؛

في [2]، قم بتسمية الصفحة؛
في [3]، تمت إضافة الصفحة.

محتوى الصفحة التي تم إنشاؤها هو كما يلي:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
 
</body>
</html>

الأسطر 2-10: الكود محاط بعلامة الجذر <html>؛
الأسطر 3-6: تحدد العلامة <head> ما يُسمى برأس الصفحة؛
الأسطر 7-9: تحدد العلامة <body> ما يُسمى نص الصفحة.

دعونا نعدل هذا الكود على النحو التالي:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

السطر 5: يحدد عنوان الصفحة – سيُعرض كعنوان نافذة المتصفح التي تعرض الصفحة؛
السطر 8: نص بخط كبير (<h1>).

دعونا نعرض هذه الصفحة في متصفح:

في [1]، نطلب عرض الصفحة؛
في [2]، عنوان URL للصفحة المعروضة؛
في [3]، عنوان النافذة – المقدم بواسطة علامة <title> الخاصة بالصفحة؛
في [4]، نص الصفحة – المقدم بواسطة علامة <h1>.

لنلقِ نظرة على [1] كود HTML الذي استلمه المتصفح:

في [2]، تلقى المتصفح صفحة HTML التي أنشأناها. وقام بتفسيرها وعرضها في شكل رسومي.

2.2.2. صفحة ASP.NET

الآن دعونا ننشئ صفحة ASP.NET. هذه صفحة HTML يمكن أن تحتوي على كود من جانب الخادم وتقوم بإنشاء أجزاء معينة من الصفحة. نتبع عملية مشابهة لتلك المتبعة في إنشاء صفحة HTML:

في [1]، تُسمى صفحة ASP.NET [نموذج ويب]؛

في [2]، تم تسمية الصفحة الجديدة؛
في [3]، تم إنشاء الصفحة.

فيما يلي كود الصفحة التي تم إنشاؤها:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    </div>
    </form>
</body>
</html>

نرى علامات HTML سبق أن صادفناها من قبل. العلامات التي تحتوي على السمة [runat="server"] هي علامات سيتم معالجتها بواسطة الخادم وتحويلها إلى علامات HTML عادية. لذا فإن ما نراه أعلاه ليس، كما في حالة الصفحة الثابتة السابقة، كود HTML الذي سيتلقاه المتصفح. ويُشار إلى هذا بصفحة ديناميكية: يتم إنشاء دفق HTML المرسل إلى الخادم بواسطة كود يتم تنفيذه على جانب الخادم. دعونا نعدل الصفحة على النحو التالي:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Démo asp.net</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <h1>Il est <% =DateTime.Now.ToString("hh:mm:ss") %></h1>
    </div>
  </form>
</body>
</html>

السطر 8: نضع عنوانًا للصفحة؛
السطر 13: نعرض نصًا تم إنشاؤه بواسطة كود C#. هذا الكود محاط بعلامات <% %>. يعرض كود C# هذا الوقت الحالي بالتنسيق ساعات:دقائق:ثوانٍ.

دعونا [1] نعرض هذه الصفحة في متصفح:

في [1]، نطلب عرض الصفحة؛
في [2]، عنوان URL للصفحة المعروضة؛
في [3]، عنوان النافذة – الذي توفره علامة <title> الخاصة بالصفحة؛
في [4]، نص الصفحة – الذي تم توفيره بواسطة علامة <h1>.

إذا قمنا بتحديث الصفحة (F5)، فسنحصل على عرض مختلف (وقت جديد) على الرغم من أن عنوان URL لم يتغير. هذا هو الجانب الديناميكي للصفحة: يمكن أن يتغير محتواها بمرور الوقت. الآن دعونا نلقي نظرة على كود HTML الذي استلمه المتصفح:

في [1]، نعرض كود مصدر الصفحة؛
في [2]: هذه المرة، كود HTML الذي تم استلامه ليس هو الذي قمنا بإنشائه، بل هو الذي تم إنشاؤه بواسطة خادم الويب من المعلومات الموجودة في صفحتنا ASP.NET.

2.2.3. الخلاصة

من ما سبق، يمكننا أن نرى أن الصفحات الديناميكية والصفحات الثابتة تختلف اختلافًا جوهريًا.

2.3. نصوص برمجية من جانب المتصفح

يمكن أن تحتوي صفحة HTML على نصوص برمجية يتم تنفيذها بواسطة المتصفح. لغة البرمجة النصية الأساسية من جانب المتصفح هي حاليًا (سبتمبر 2013) JavaScript. تم إنشاء مئات المكتبات باستخدام هذه اللغة لتسهيل عمل المطورين.

لنقم بإنشاء صفحة HTML جديدة [1] في المشروع الذي أنشأناه بالفعل:

قم بتحرير الملف [HtmlPage2.html] بالمحتوى التالي:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>exemple Javascript</title>
  <script type="text/javascript">
    function réagir() {
      alert("Vous avez cliqué sur le bouton !");
    }
  </script>
</head>
<body>
  <input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>

السطر 13: يحدد زرًا (سمة type) بالنص "انقر عليّ" (سمة value). عند النقر عليه، يتم تنفيذ دالة JavaScript [react] (سمة onclick)؛
الأسطر 6-10: نص برمجي JavaScript؛
الأسطر 7-9: دالة [react]؛
السطر 8: يعرض مربع حوار يحتوي على الرسالة [You clicked the button].

دعونا نعرض الصفحة في متصفح:

في [1]، الصفحة المعروضة؛
في [2]، مربع الحوار الذي يظهر عند النقر على الزر.

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

مع العدد الهائل من مكتبات JavaScript المتاحة، يمكننا الآن تضمين تطبيقات كاملة مباشرة في المتصفح. وهذا يؤدي إلى البنى التالية:

1-4: خادم HTML هو خادم لصفحات HTML5/CSS/JavaScript الثابتة؛
5-6: تتفاعل صفحات HTML5/CSS/JavaScript التي يتم تسليمها مباشرةً مع خادم البيانات. يقدم هذا الخادم البيانات فقط، بدون ترميز HTML. يقوم JavaScript بإدراج هذه البيانات في صفحات HTML الموجودة بالفعل في المتصفح.

في هذه البنية، قد يصبح كود JavaScript متضخمًا. لذلك نسعى إلى تنظيمه في طبقات، كما نفعل مع الكود من جانب الخادم:

طبقة [UI] هي التي تتفاعل مع المستخدم؛
طبقة [DAO] تتفاعل مع خادم البيانات؛
طبقة [منطق الأعمال] تحتوي على إجراءات الأعمال التي لا تتفاعل مع المستخدم ولا مع خادم البيانات. قد لا تكون هذه الطبقة موجودة.

2.4. التواصل بين العميل والخادم

لنعد إلى الرسم التخطيطي الأولي الذي يوضح مكونات تطبيق الويب:

هنا، نحن مهتمون بالتبادلات بين جهاز العميل وجهاز الخادم. تحدث هذه التبادلات عبر شبكة، ومن الجدير مراجعة الهيكل العام للتبادلات بين جهازين بعيدين.

2.4.1. نموذج OSI

يصف نموذج الشبكة المفتوحة المعروف باسم OSI (نموذج مرجعي لربط الأنظمة المفتوحة)، الذي حددته منظمة ISO (منظمة المعايير الدولية)، شبكة مثالية حيث يمكن تمثيل الاتصال بين الأجهزة بنموذج مكون من سبع طبقات:

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

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

أدوار الطبقات المختلفة هي كما يلي:

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

2.4.2. نموذج TCP/IP

نموذج OSI هو نموذج مثالي. تقترب مجموعة بروتوكولات TCP/IP منه بالطريقة التالية:

تؤدي واجهة الشبكة (بطاقة الشبكة في الكمبيوتر) وظائف الطبقتين 1 و 2 من نموذج OSI
تؤدي طبقة IP (بروتوكول الإنترنت) وظائف الطبقة 3 (الشبكة)
تؤدي طبقة TCP (بروتوكول التحكم في الإرسال) أو UDP (بروتوكول مخطط بيانات المستخدم) وظائف الطبقة 4 (النقل). يضمن بروتوكول TCP وصول حزم البيانات المتبادلة بين الأجهزة إلى وجهتها. وإذا لم تصل، فإنه يعيد إرسال الحزم المفقودة. لا يؤدي بروتوكول UDP هذه المهمة، لذا فإن الأمر متروك لمطور التطبيق للقيام بذلك. ولهذا السبب، على الإنترنت — التي ليست شبكة موثوقة بنسبة 100٪ — يُعد بروتوكول TCP هو الأكثر استخدامًا. ويُشار إلى هذا باسم شبكة TCP-IP.
تغطي طبقة التطبيق وظائف الطبقات من 5 إلى 7 في نموذج OSI.

تقع تطبيقات الويب في طبقة التطبيقات، وبالتالي تعتمد على بروتوكولات TCP/IP. تتبادل طبقات التطبيقات في أجهزة العميل والخادم الرسائل، التي تُعهد بها إلى الطبقات من 1 إلى 4 من النموذج لتوجيهها إلى وجهتها. للتواصل مع بعضها البعض، يجب أن "تتحدث" طبقات التطبيقات في كلا الجهازين نفس اللغة أو البروتوكول. يُسمى البروتوكول الذي تستخدمه تطبيقات الويب HTTP (بروتوكول نقل النص التشعبي). وهو بروتوكول نصي، مما يعني أن الأجهزة تتبادل أسطرًا من النص عبر الشبكة للتواصل. هذه التبادلات موحدة، مما يعني أن العميل لديه مجموعة من الرسائل لإخبار الخادم بالضبط بما يريده، وأن الخادم لديه أيضًا مجموعة من الرسائل لتزويد العميل برده. يتخذ تبادل الرسائل هذا الشكل التالي:

العميل --> الخادم

عندما يرسل العميل طلبًا إلى خادم الويب، فإنه يرسل

أسطر نصية بتنسيق HTTP لتوضيح ما يريده؛
سطر فارغ؛
وثيقة اختيارية.

الخادم --> العميل

عندما يستجيب الخادم للعميل، فإنه يرسل

أسطر نصية بتنسيق HTTP للإشارة إلى ما يرسله؛
سطر فارغ؛
وثيقة اختيارية.

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

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

2.4.3. بروتوكول HTTP

دعونا نستكشف بروتوكول HTTP باستخدام أمثلة. ما الذي يتبادله المتصفح وخادم الويب؟

خدمة الويب أو خدمة HTTP هي خدمة TCP/IP تعمل عادةً على المنفذ 80. وقد تعمل على منفذ مختلف. في هذه الحالة، سيحتاج متصفح العميل إلى تحديد هذا المنفذ في عنوان URL الذي يطلبه. يتخذ عنوان URL عمومًا الشكل التالي:

protocol://host[:port]/path/info

حيث

بروتوكول	http لخدمة الويب. يمكن للمتصفح أيضًا أن يعمل كعميل لخدمات FTP والأخبار وTelnet وغيرها من الخدمات.
الجهاز	اسم الجهاز الذي يستضيف خدمة الويب
المنفذ	منفذ خدمة الويب. إذا كان 80، يمكن حذف رقم المنفذ. هذه هي الحالة الأكثر شيوعًا
المسار	مسار المورد المطلوب
المعلومات	معلومات إضافية مقدمة إلى الخادم لـ تحديد طلب العميل

ماذا يفعل المتصفح عندما يطلب المستخدم تحميل عنوان URL؟

يقوم بإنشاء اتصال TCP/IP مع الجهاز والمنفذ المحددين في جزء machine[:port] من عنوان URL. إن إنشاء اتصال TCP/IP يعني إنشاء "قناة" اتصال بين جهازين. وبمجرد إنشاء هذه القناة، ستمر جميع المعلومات المتبادلة بين الجهازين عبرها. ولا يتضمن إنشاء قناة TCP-IP هذه بروتوكول HTTP الخاص بالويب بعد.
بمجرد إنشاء اتصال TCP-IP، يرسل العميل طلبه إلى خادم الويب عن طريق إرسال أسطر نصية (أوامر) بتنسيق HTTP. يرسل جزء المسار/المعلومات من عنوان URL إلى الخادم
سيستجيب الخادم بنفس الطريقة ومن خلال نفس الاتصال
سيقرر أحد الطرفين إغلاق الاتصال. يعتمد هذا على بروتوكول HTTP المستخدم. مع HTTP 1.0، يغلق الخادم الاتصال بعد كل استجابة من استجاباته. وهذا يجبر العميل الذي يحتاج إلى إجراء طلبات متعددة لاسترداد المستندات المختلفة التي تتكون منها صفحة الويب على فتح اتصال جديد لكل طلب، مما يترتب عليه تكلفة. مع بروتوكول HTTP/1.1، يمكن للعميل أن يطلب من الخادم إبقاء الاتصال مفتوحًا حتى يطلب منه إغلاقه. وبالتالي، يمكنه استرداد جميع مستندات صفحة الويب باستخدام اتصال واحد وإغلاق الاتصال بنفسه بمجرد الحصول على آخر مستند. سيكتشف الخادم هذا الإغلاق ويغلق الاتصال أيضًا.

لفحص التبادلات بين العميل وخادم الويب، سنستخدم ملحق [Advanced Rest Client] لمتصفح Chrome الذي قمنا بتثبيته في القسم 1.3. سنكون في الحالة التالية:

يمكن أن يكون خادم الويب أي خادم. هنا، نهدف إلى فحص التبادلات التي ستحدث بين المتصفح وخادم الويب. في السابق، أنشأنا صفحة HTML ثابتة كما يلي:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

التي نراها في المتصفح:

يمكننا أن نرى أن عنوان URL المطلوب هو: http://localhost:56376/HtmlPage1.html. وبالتالي، فإن جهاز خادم الويب هو localhost (=الجهاز المحلي) والمنفذ 56376. دعونا نستخدم تطبيق [Advanced Rest Client] لطلب نفس عنوان URL:

في [1]، قم بتشغيل التطبيق (في علامة التبويب [Applications] في علامة تبويب Chrome جديدة)؛
في [2]، حدد خيار [Request]؛
في [3]، حدد الخادم المراد الاستعلام عنه: http://localhost:56376؛
في [4]، حدد عنوان URL المطلوب: /HtmlPage1.html؛
في [5]، أضف أي معلمات إلى عنوان URL. لا توجد معلمات هنا؛
في [6]، حدد طريقة HTTP المستخدمة للطلب، وهي في هذه الحالة GET.

ينتج عن ذلك الطلب التالي:

يتم إرسال الطلب الذي تم إعداده بهذه الطريقة [7] إلى الخادم بواسطة [8]. ثم يكون الرد المستلم كما يلي:

ذكرنا سابقًا أن التبادلات بين العميل والخادم تتخذ الشكل التالي:

في [1]، يمكنك رؤية رؤوس HTTP التي أرسلها المتصفح في طلبه. لم يكن لديه مستند لإرساله؛
في [2]، نرى رؤوس HTTP التي أرسلها الخادم في الرد. وفي [3]، نرى المستند الذي أرسله.

في [3]، يمكننا رؤية صفحة HTML الثابتة التي وضعناها على خادم الويب.

دعونا نفحص طلب HTTP للمتصفح:

GET /HtmlPage1.html HTTP/1.1 
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
Content-Type: text/plain; charset=utf-8 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

لم يعرض التطبيق السطر 1؛
السطر 2: يحدد المتصفح هويته باستخدام رأس [User-Agent]؛
السطر 3: يشير المتصفح إلى أنه يرسل مستندًا نصيًا (text/plain) بتنسيق UTF-8 إلى الخادم. في الواقع، هنا، لم يرسل المتصفح أي مستند؛
السطر 4: يشير المتصفح إلى أنه يقبل أي نوع من المستندات في الرد؛
السطر 5: يحدد المتصفح تنسيقات المستندات المقبولة؛
السطر 6: يحدد المتصفح اللغات التي يفضلها حسب ترتيب الأفضلية.

رد الخادم بإرسال رؤوس HTTP التالية:

HTTP/1.1 304 Not Modified 
Accept-Ranges: bytes 
Server: Microsoft-IIS/8.0 
X-SourceFiles: =?UTF-8?B?RDpcZGF0YVxpc3RpYS0xMzE0XGFzcG5ldFxkdnBcRXhlbXBsZXNcRXhlbXBsZS0wMFxIdG1sUGFnZTEuaHRtbA==?=
X-Powered-By: ASP.NET
Date: Wed, 18 Sep 2013 15:33:53 GMT 
Content-Type: text/html 
Content-Encoding: gzip 
Last-Modified: Wed, 18 Sep 2013 13:13:19 GMT 
ETag: "b474e0d770b4ce1:0" 
Vary: Accept-Encoding 
Content-Length: 313

السطر 1: لم يتم عرضه بواسطة التطبيق؛
السطر 3: يحدد الخادم هويته، وهو في هذه الحالة خادم Microsoft IIS؛
السطر 5: يشير إلى التقنية التي أنتجت الاستجابة، وهي في هذه الحالة ASP.NET؛
السطر 6: تاريخ ووقت الاستجابة؛
السطر 7: نوع المستند الذي أرسله الخادم. هنا، مستند HTML؛
السطر 12: حجم مستند HTML المرسل بالبايت.

2.4.4. الخلاصة

لقد استكشفنا بنية طلب عميل الويب واستجابة الخادم له باستخدام بعض الأمثلة. تتم عملية الاتصال عبر بروتوكول HTTP، وهو مجموعة من الأوامر النصية التي يتم تبادلها بين الطرفين. يتشارك طلب العميل واستجابة الخادم في البنية التالية:

الأمران الشائعان لطلب مورد هما GET و POST. لا يصاحب الأمر GET مستند. أما الأمر POST، فيصاحبه مستند يكون في الغالب سلسلة من الأحرف تحتوي على جميع القيم التي تم إدخالها في النموذج. يسمح لك الأمر HEAD بطلب رؤوس HTTP فقط ولا يصاحبه مستند.

استجابة لطلب العميل، يرسل الخادم استجابة بنفس البنية. يتم إرسال المورد المطلوب في قسم [Document] ما لم يكن أمر العميل هو HEAD، وفي هذه الحالة يتم إرسال رؤوس HTTP فقط.

2.5. أساسيات HTML

يمكن لمتصفح الويب عرض مستندات متنوعة، وأكثرها شيوعًا هو مستند HTML (لغة ترميز النص التشعبي). وهو نص منسق باستخدام علامات في شكل <tag>text</tag>. وبالتالي، فإن النص <B>important</B> سيعرض النص "important" بخط عريض. هناك علامات مستقلة مثل علامة <hr/>، التي تعرض خطًا أفقيًا. لن نستعرض جميع العلامات التي يمكن العثور عليها في نص HTML. هناك العديد من برامج WYSIWYG التي تسمح لك بإنشاء صفحة ويب دون كتابة سطر واحد من كود HTML. تقوم هذه الأدوات تلقائيًا بإنشاء كود HTML لتخطيط تم إنشاؤه باستخدام الماوس وعناصر التحكم المحددة مسبقًا. يمكنك بذلك إدراج (باستخدام الماوس) جدولًا في الصفحة ثم عرض كود HTML الذي أنشأه البرنامج لاكتشاف العلامات التي يجب استخدامها لتعريف جدول على صفحة ويب. الأمر بهذه البساطة. علاوة على ذلك، تعد معرفة HTML أمرًا ضروريًا لأن تطبيقات الويب الديناميكية يجب أن تولد كود HTML بنفسها لإرساله إلى عملاء الويب. يتم إنشاء هذا الكود برمجيًا، ويجب عليك بالطبع معرفة ما يجب إنشاؤه حتى يتلقى العميل صفحة الويب التي يريدها.

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

2.5.1. مثال

انظر المثال التالي، الذي يتضمن بعض العناصر الشائعة في مستند الويب، مثل:

جدول؛
صورة؛
رابط.

عادةً ما يكون مستند HTML بالشكل التالي:

<html> <head> <title>عنوان</title> ... </head> <سمات النص> ... </body></html>

يتم تضمين المستند بأكمله بين علامتي <html>...</html>. ويتكون من جزأين:

<head>...</head>: هذا هو الجزء غير القابل للعرض من المستند. يوفر معلومات للمتصفح الذي سيعرض المستند. غالبًا ما يحتوي على علامات <title>...</title>، التي تحدد النص الذي سيظهر في شريط عنوان المتصفح. وقد يحتوي أيضًا على علامات أخرى، لا سيما تلك التي تحدد الكلمات المفتاحية للوثيقة، والتي تستخدمها محركات البحث لاحقًا. قد يحتوي هذا القسم أيضًا على نصوص برمجية، مكتوبة عادةً بلغة JavaScript أو VBScript، والتي سيتم تنفيذها بواسطة المتصفح.

<سمات body>...</body>: هذا هو القسم الذي سيعرضه المتصفح. تخبر علامات HTML الموجودة في هذا القسم المتصفح بالتنسيق المرئي "المطلوب" للمستند. يفسر كل متصفح هذه العلامات بطريقته الخاصة. ونتيجة لذلك، قد يعرض متصفحان نفس مستند الويب بشكل مختلف. وهذا عمومًا أحد التحديات التي يواجهها مصممو الويب.

فيما يلي كود HTML لمستندنا المثال:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>balises</title>
</head>
 
<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Les balises HTML</h1>
  <hr />
 
  <table border="1">
    <thead>
      <tr>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
        <th>Colonne 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>cellule(1,1)</td>
        <td style="width: 150px; text-align: center;">cellule(1,2)</td>
        <td>cellule(1,3)</td>
      </tr>
      <tr>
        <td>cellule(2,1)</td>
        <td>cellule(2,2)</td>
        <td>cellule(2,3</td>
      </tr>
    </tbody>
  </table>
 
  <table border="0">
    <tr>
      <td>Une image</td>
      <td>
        <img border="0" src="/images/cerisier.jpg"/></td>
    </tr>
    <tr>
      <td>le site de l'ISTIA</td>
      <td><a href="http://istia.univ-angers.fr">ici</a></td>
    </tr>
  </table>
</body>
</html>

HTML	علامات HTML وأمثلة
عنوان المستند	<title>العلامات</title> (السطر 5) سيظهر النص "tags" في شريط عنوان المتصفح عند عرض المستند
شريط أفقي	<hr/>: يعرض خطًا أفقيًا (السطر 10)
الجدول	<سمات الجدول>....</table>: لتعريف الجدول (السطران 12 و32) <thead>...</thead>: لتعريف عناوين الأعمدة (السطران 13 و19) <tbody>...</tbody>: لتعريف محتوى الجدول (السطران 20 و31) <tr attributes>...</tr>: لتعريف صف (السطران 21 و25) <سمات td>...</td>: لتعريف خلية (السطر 22) أمثلة: <table border="1">...</table>: تحدد السمة border سماكة حدود الجدول <td style="width: 150px; text-align: center;">cell(1,2)</td>: تحدد خلية سيكون محتواها cell(1,2). سيتم توسيط هذا المحتوى أفقيًا (text-align: center). سيكون عرض الخلية 150 بكسل (width: 150px)
صورة	<img border="0" src="/images/cherrytree.jpg"/> (السطر 38): تحدد صورة بدون حدود (border="0") وملفها المصدر هو /images/cherrytree.jpg على خادم الويب (src="/images/cherrytree.jpg"). يوجد هذا الرابط في مستند ويب يمكن الوصول إليه عبر عنوان URL http://localhost:port/html/balises.htm. لذلك، سيطلب المتصفح عنوان URL http://localhost:port/images/cerisier.jpg لاسترداد الصورة المشار إليها هنا.
رابط	<a href="http://istia.univ-angers.fr">here</a> (السطر 42): يجعل النص "here" بمثابة رابط إلى عنوان URL http://istia.univ-angers.fr.
خلفية الصفحة	<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (السطر 8): يحدد أن الصورة التي سيتم استخدامها كخلفية للصفحة موجودة على عنوان URL /images/standard.jpg على خادم الويب. في سياق مثالنا، سيطلب المتصفح عنوان URL http://localhost:port/images/standard.jpg لاسترداد صورة الخلفية هذه. بالإضافة إلى ذلك، سيتم عرض نص المستند داخل مستطيل يبلغ ارتفاعه 400 بكسل وعرضه 400 بكسل.

يوضح هذا المثال البسيط أنه لعرض المستند بأكمله، يجب على المتصفح إرسال ثلاثة طلبات إلى الخادم:

http://localhost:port/html/balises.htm لاسترداد مصدر HTML للمستند
http://localhost:port/images/cerisier.jpg لاسترداد الصورة cerisier.jpg
http://localhost:port/images/standard.jpg لاسترداد صورة الخلفية standard.jpg

2.5.2. نموذج HTML

يوضح المثال التالي نموذجًا:

فيما يلي كود HTML الذي ينتج هذا العرض:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>formulaire</title>
  <script type="text/javascript">
    function effacer() {
      alert("Vous avez cliqué sur le bouton Effacer");
    }
  </script>
</head>
 
<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Formulaire HTML</h1>
  <form method="post" action="FormulairePost.aspx">
    <table border="0">
      <tr>
        <td>Etes-vous marié(e)</td>
        <td>
          <input type="radio" value="Oui" name="R1" />Oui
          <input type="radio" name="R1" value="non" checked="checked" />Non
        </td>
      </tr>
      <tr>
        <td>Cases à cocher</td>
        <td>
          <input type="checkbox" name="C1" value="un" />1
          <input type="checkbox" name="C2" value="deux" checked="checked" />2
          <input type="checkbox" name="C3" value="trois" />3
        </td>
      </tr>
      <tr>
        <td>Champ de saisie</td>
        <td>
          <input type="text" name="txtSaisie" size="20" value="qqs mots" />
        </td>
      </tr>
      <tr>
        <td>Mot de passe</td>
        <td>
          <input type="password" name="txtMdp" size="20" value="unMotDePasse" />
        </td>
      </tr>
      <tr>
        <td>Boîte de saisie</td>
        <td>
          <textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
        </td>
      </tr>
      <tr>
        <td>combo</td>
        <td>
          <select size="1" name="cmbValeurs">
            <option value="1">choix1</option>
            <option selected="selected" value="2">choix2</option>
            <option value="3">choix3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix simple</td>
        <td>
          <select size="3" name="lst1">
            <option selected="selected" value="1">liste1</option>
            <option value="2">liste2</option>
            <option value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix multiple</td>
        <td>
          <select size="3" name="lst2" multiple="multiple">
            <option value="1" selected="selected">liste1</option>
            <option value="2">liste2</option>
            <option selected="selected" value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>bouton</td>
        <td>
          <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" />
        </td>
      </tr>
      <tr>
        <td>envoyer</td>
        <td>
          <input type="submit" value="Envoyer" name="cmdRenvoyer" />
        </td>
      </tr>
      <tr>
        <td>rétablir</td>
        <td>
          <input type="reset" value="Rétablir" name="cmdRétablir" />
        </td>
      </tr>
    </table>
    <input type="hidden" name="secret" value="uneValeur" />
  </form>
</body>
</html>

الارتباط البصري بين <--> وعلامة HTML هو كما يلي:

مرئي	علامة HTML
نموذج	<form method="post" action="...">
حقل الإدخال	<input type="text" name="txtInput" size="20" value="بضع كلمات" />
حقل إدخال مخفي	<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
حقل إدخال متعدد الأسطر	<textarea rows="2" name="inputArea" cols="20"> السطر 1 السطر 2 السطر 3 </textarea>
أزرار الاختيار	<input type="radio" value="Yes" name="R1" />نعم <input type="radio" name="R1" value="No" checked="checked" />لا
مربعات الاختيار	<input type="checkbox" name="C1" value="one" />1 <input type="checkbox" name="C2" value="two" checked="checked" />2 <input type="checkbox" name="C3" value="three" />3
قائمة منسدلة	<select size="1" name="cmbValues"> <option value="1">الخيار 1</option> <option selected="selected" value="2">الخيار 2</option> <option value="3">الخيار 3</option> </select>
قائمة اختيار واحد	<select size="3" name="lst1"> <option selected="selected" value="1">القائمة 1</option> <option value="2">القائمة 2</option> <option value="3">القائمة 3</option> <option value="4">القائمة 4</option> <option value="5">القائمة 5</option> </select>
قائمة متعددة الاختيارات	<select size="3" name="lst2" multiple="multiple"> <option value="1">القائمة 1</option> <option value="2">القائمة 2</option> <option selected="selected" value="3">القائمة 3</option> <option value="4">القائمة 4</option> <option value="5">list5</option> </select>
زر الإرسال	<input type="submit" value="إرسال" name="cmdSubmit" />
زر إعادة الضبط	<input type="reset" value="إعادة تعيين" name="cmdReset" />
زر	<input type="button" value="مسح" name="cmdClear" onclick="clear()" />

دعونا نستعرض هذه العلامات المختلفة:

2.5.2.1. النموذج

form


<form method="post" action="FormulairePost.aspx">

علامة HTML

<form name="..." method="..." action="...">...</form>

السمات

name="frmexample": اسم النموذج

method="..." : الطريقة التي يستخدمها المتصفح لإرسال القيم التي تم جمعها في النموذج إلى خادم الويب

action="..." : عنوان URL الذي سيتم إرسال القيم التي تم جمعها في النموذج إليه.

يتم تضمين نموذج الويب بين العلامتين <form>...</form>. يمكن أن يكون للنموذج اسم (name="xx"). وينطبق هذا على جميع عناصر التحكم الموجودة داخل النموذج. الغرض من النموذج هو جمع المعلومات التي يدخلها المستخدم عبر لوحة المفاتيح أو الماوس وإرسالها إلى عنوان URL لخادم الويب. أي عنوان؟ العنوان المشار إليه في السمة action="URL". إذا كانت هذه السمة مفقودة، فسيتم إرسال المعلومات إلى عنوان URL للوثيقة التي يوجد بها النموذج. يمكن لعميل الويب استخدام طريقتين مختلفتين تسميان POST و GET لإرسال البيانات إلى خادم الويب. تحدد السمة method="method"، حيث يتم تعيين method إلى GET أو POST، في العلامة <form> للمتصفح الطريقة التي يجب استخدامها لإرسال المعلومات التي تم جمعها في النموذج إلى عنوان URL المحدد بواسطة السمة action="URL". عندما لا يتم تحديد السمة method، يتم استخدام طريقة GET بشكل افتراضي.

2.5.2.2. حقول إدخال النص

حقل الإدخال

<input type="text" name="txtInput" size="20" value="some words" />

<input type="password" name="txtPassword" size="20" value="aPassword" />

علامة HTML

<input type="..." name="..." size=".." value=".."/>

توجد علامة الإدخال لمختلف عناصر التحكم. وهي السمة type التي تميز عناصر التحكم المختلفة هذه عن بعضها البعض.

السمات

type="text": تحدد أن هذا حقل إدخال نصي

type="password": يتم استبدال الأحرف الموجودة في حقل الإدخال بعلامات نجمية (*). هذا هو الاختلاف الوحيد عن حقل الإدخال العادي. هذا النوع من عناصر التحكم مناسب لإدخال كلمات المرور.

size="20": عدد الأحرف المرئية في الحقل — لا يمنع إدخال المزيد من الأحرف

name="txtInput": اسم عنصر التحكم

value="بعض الكلمات": النص الذي سيتم عرضه في حقل الإدخال.

2.5.2.3. حقول الإدخال متعددة الأسطر

حقل إدخال متعدد الأسطر

<textarea rows="2" name="areaSaisie" cols="20">

السطر 1

السطر 2

السطر 3

</textarea>

علامة HTML	<textarea ...>text</textarea> تعرض حقل إدخال نص متعدد الأسطر مع وجود نص بداخله بالفعل
السمات	rows="2": عدد الصفوف cols="'20" : عدد الأعمدة name="areaSaisie": اسم عنصر التحكم

2.5.2.4. أزرار الاختيار

أزرار الاختيار

<input type="radio" value="Yes" name="R1" />نعم

<input type="radio" name="R1" value="No" checked="checked" />لا

علامة HTML

<input type="radio" attribute2="value2" ..../>text

تعرض زر اختيار مع نص بجانبه.

السمات

name="radio": اسم عنصر التحكم. تشكل أزرار الاختيار التي تحمل الاسم نفسه مجموعة من الأزرار المتنافية: لا يمكن تحديد سوى زر واحد منها.

value="value": القيمة المخصصة لزر الاختيار. لا تخلط بين هذه القيمة والنص المعروض بجانب زر الاختيار. النص مخصص للعرض فقط.

checked="checked": إذا كانت هذه السمة موجودة، يكون زر الاختيار محددًا؛ وإلا، فإنه غير محدد.

2.5.2.5. مربعات الاختيار

مربعات الاختيار

<input type="checkbox" name="C1" value="واحد" />1

<input type="checkbox" name="C2" value="two" checked="checked" />2

<input type="checkbox" name="C3" value="three" />3

علامة HTML

<input type="checkbox" attribute2="value2" ....>text

تعرض مربع اختيار مع نص بجانبه.

السمات

name="C1": اسم عنصر التحكم. قد تحمل مربعات الاختيار نفس الاسم أو لا. تشكل مربعات الاختيار التي تحمل نفس الاسم مجموعة من مربعات الاختيار المرتبطة.

value="value": القيمة المخصصة لمربع الاختيار. لا تخلط بين هذه القيمة والنص المعروض بجانب زر الاختيار. النص مخصص للعرض فقط.

checked="checked": إذا كانت هذه السمة موجودة، فإن مربع الاختيار محدد؛ وإلا، فإنه غير محدد.

2.5.2.6.

مجموعة

<option value="1">choice1</option>

<option selected="selected" value="2">الخيار 2</option>

<option value="3">الخيار 3</option>

</select>

علامة HTML

<select size=".." name="..">

<option [selected="selected"] value=”v”>...</option>

...

</select>

تعرض النص الموجود بين علامتي <option>...</option> في قائمة

السمات

name="cmbValeurs": اسم عنصر التحكم.

size="1": عدد عناصر القائمة المرئية. تجعل قيمة size="1" القائمة مكافئة لمربع القائمة المنسدلة.

selected="selected": إذا كانت هذه الكلمة الرئيسية موجودة لعنصر في القائمة، يظهر هذا العنصر محددًا في القائمة. في المثال أعلاه، يظهر عنصر القائمة choice2 كعنصر محدد في مربع القائمة المنسدلة عند عرضه لأول مرة.

value=”v”: إذا تم تحديد العنصر من قبل المستخدم، يتم إرسال هذه القيمة [v] إلى الخادم. إذا كانت هذه السمة غائبة، يتم إرسال النص المعروض والمحدد إلى الخادم.

2.5.2.7. قائمة الاختيار الفردي

قائمة الاختيار الفردي

<select size="3" name="lst1">

<option value="3">القائمة 3</option>

<option value="4">القائمة 4</option>

<option value="5">القائمة 5</option>

</select>

علامة HTML	<select size=".." name=".."> <خيار [محدد="محدد"]>...</option> ... </select> تعرض النص الموجود بين علامتي <option>...</option> في قائمة
السمات	نفس سمات القائمة المنسدلة التي تعرض عنصرًا واحدًا فقط. يختلف عنصر التحكم هذا عن القائمة المنسدلة السابقة فقط في سمة size>1.

2.5.2.8. قائمة التحديد المتعدد

قائمة الاختيار الفردي

<option selected="selected" value="3">القائمة 3</option>

<option value="4">القائمة 4</option>

<option value="5">القائمة 5</option>

</select>

علامة HTML	<select size=".." name=".." multiple="multiple"> <خيار [محدد="محدد"]>...</option> ... </select> تعرض النص الموجود بين علامتي <option>...</option> في قائمة
السمات	multiple: تسمح بتحديد عناصر متعددة من القائمة. في المثال أعلاه، تم تحديد العنصرين list1 و list3.

2.5.2.9. زر

زر	<input type="button" value="Clear" name="cmdClear" onclick="clear()" />

علامة HTML

<input type="button" value="..." name="..." onclick="clear()" ..../>

السمات

type="button": تحدد عنصر تحكم زر. هناك نوعان آخران من الأزرار: submit و reset.

value="Clear": النص المعروض على الزر

onclick="function()": يسمح لك بتعريف دالة ليتم تنفيذها عندما ينقر المستخدم على الزر. هذه الدالة هي جزء من البرامج النصية المحددة في مستند الويب المعروض. الصيغة أعلاه هي صيغة JavaScript. إذا كانت البرامج النصية مكتوبة بلغة VBScript، فستكتب onclick="function" بدون الأقواس. تظل صيغة الكتابة كما هي إذا كان من الضروري تمرير معلمات إلى الدالة: onclick="function(val1, val2,...)"

في مثالنا، يؤدي النقر على زر "مسح" إلى استدعاء دالة المسح التالية في JavaScript:

function clear() {

alert("لقد نقرت على زر "Clear"")

}

</script>

تعرض الدالة clear رسالة:

2.5.2.10. زر الإرسال

زر الإرسال

<input type="submit" value="إرسال" name="cmdSend" />

علامة HTML

السمات

type="submit": تحدد الزر كزر لإرسال بيانات النموذج إلى خادم الويب. عندما ينقر المستخدم على هذا الزر، سيرسل المتصفح بيانات النموذج إلى عنوان URL المحدد في سمة action لعلامة <form>، باستخدام الطريقة المحددة بواسطة سمة method لتلك العلامة نفسها.

value="Submit": النص المعروض على الزر

2.5.2.11. زر إعادة الضبط

زر إعادة الضبط

<input type="reset" value="Reset" name="cmdReset" />

علامة HTML	<input type="reset" value="إعادة تعيين" name="cmdReset"/>
السمات	type="reset": تحدد الزر كزر إعادة تعيين النموذج. عندما ينقر المستخدم على هذا الزر، سيقوم المتصفح بإعادة النموذج إلى الحالة التي تم استلامه بها. value="Reset": النص المعروض على الزر

2.5.2.12. الحقل المخفي

حقل مخفي

<input type="hidden" name="secret" value="aValue" />

علامة HTML

<input type="hidden" name="..." value="..."/>

السمات

type="hidden": تحدد أن هذا حقل مخفي. الحقل المخفي هو جزء من النموذج ولكنه لا يظهر للمستخدم. ومع ذلك، إذا طلب المستخدم من متصفحه عرض شفرة المصدر، فسيرى وجود علامة <input type="hidden" value="..."> وبالتالي قيمة الحقل المخفي.

value="aValue": قيمة الحقل المخفي.

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

2.5.3. إرسال قيم النموذج إلى خادم الويب بواسطة عميل الويب

ذكرنا في الدرس السابق أن عميل الويب لديه طريقتان لإرسال قيم النموذج الذي عرضه إلى خادم الويب: طريقتا GET و POST. لنلقِ نظرة على مثال لنرى الفرق بين الطريقتين.

2.5.3.1. طريقة GET

دعونا نجري اختبارًا أوليًا، حيث يتم تعريف علامة <form> في كود HTML للمستند على النحو التالي:


<form method="get" action="FormulaireGet.aspx">

عندما ينقر المستخدم على الزر [1]، سيتم إرسال القيم التي تم إدخالها في النموذج إلى صفحة ASP.NET [2]. لا تقوم هذه الصفحة بأي شيء بهذه المعلمات وتُرجع صفحة فارغة. نريد فقط أن نرى كيف ينقل المتصفح القيم التي تم إدخالها إلى خادم الويب. للقيام بذلك، سنستخدم أداة تصحيح الأخطاء المتوفرة في Chrome. نقوم بتنشيطها بالضغط على CTRL-I (بالأحرف الكبيرة) [3]:

نظرًا لأننا مهتمون بحركة مرور الشبكة بين المتصفح وخادم الويب، نختار علامة التبويب [الشبكة] أعلاه ثم نضغط على زر [إرسال] في النموذج. هذا زر [إرسال] داخل علامة [نموذج]. يستجيب المتصفح للنقر بطلب عنوان URL [FormulaireGet.aspx] المحدد في سمة [action] لعلامة [form]، باستخدام طريقة GET المحددة في سمة [method]. ثم نحصل على المعلومات التالية:

تُظهر لقطة الشاشة أعلاه عنوان URL الذي طلبه المتصفح بعد النقر على زر [إرسال]. وهو يطلب بالفعل عنوان URL المتوقع [FormulaireGet.aspx]، ولكنه يضيف معلومات إضافية — وهي القيم التي تم إدخالها في النموذج. للحصول على مزيد من المعلومات، انقر على الرابط أعلاه:

أعلاه [1، 2]، نرى رؤوس HTTP المرسلة من المتصفح. وقد تمت تنسيقها هنا. لعرض النص الخام لهذه الرؤوس، نتبع رابط [عرض المصدر] [3، 4]. النص الكامل هو كما يلي:

GET /FormulaireGet.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

نرى عناصر سبق أن صادفناها من قبل. وتظهر عناصر أخرى للمرة الأولى:

Connection: keep-alive	يطلب العميل من الخادم عدم إغلاق الاتصال بعد استجابته. سيسمح ذلك للعميل باستخدام نفس الاتصال لطلب لاحق. لا يبقى الاتصال مفتوحًا إلى أجل غير مسمى. سيقوم الخادم بإغلاقه بعد فترة طويلة من عدم النشاط.
المُحيل	عنوان URL الذي تم عرضه في المتصفح عند إجراء الطلب الجديد.

العنصر الجديد هو السطر 1 في المعلومات التي تلي عنوان URL. يمكننا أن نرى أن الخيارات التي تم تحديدها في النموذج تنعكس في عنوان URL. تم تمرير القيم التي أدخلها المستخدم في النموذج في طلب GET URL?param1=value1&param2=value2&... HTTP/1.1، حيث المعلمات هي أسماء (سمة name) عناصر التحكم في نموذج الويب والقيم هي القيم المرتبطة بها. فيما يلي جدول من ثلاثة أعمدة:

العمود 1: يعرض تعريف عنصر تحكم HTML من المثال؛
العمود 2: يوضح كيف يظهر عنصر التحكم هذا في المتصفح؛
العمود 3: يعرض القيمة التي يرسلها المتصفح إلى الخادم للعنصر الموجود في العمود 1 بالشكل الذي يتخذه في طلب GET من المثال.

عنصر تحكم HTML	القيمة	القيمة (القيم) المُرجعة
<input type="radio" value="Yes" name="R1"/>نعم <input type="radio" name="R1" value="No" checked="checked"/>لا		R1=نعم - قيمة سمة value الخاصة بزر الاختيار الذي حدده المستخدم.
<input type="checkbox" name="C1" value="one"/>1 <input type="checkbox" name="C2" value="two" checked="checked"/>2 <input type="checkbox" name="C3" value="three"/>3		C1=واحد C2=اثنان - قيم سمات القيمة لمربعات الاختيار التي حددها المستخدم
<input type="text" name="txtInput" size="20" value="بعض الكلمات "/>		txtInput=برمجة+الويب - النص الذي كتبه المستخدم في حقل الإدخال. تم استبدال المسافات بعلامة +
<input type="password" name="txtMdp" size="20" value="aPassword"/>		txtPassword=thisIsSecret - النص الذي يكتبه المستخدم في حقل الإدخال
<textarea rows="2" name="inputArea" cols="20"> السطر 1 السطر 2 السطر 3 </textarea>		حقل_الإدخال=أساسيات_الويب%0D%0A برمجة+الويب - نص كتبته المستخدم في حقل الإدخال. %OD%OA هي علامة نهاية السطر. تم استبدال المسافات بعلامة +
<select size="1" name="cmbValues"> <option value='1'>choice1</option> <option selected="selected" value='2'>الخيار 2</option> <option value='3'>choice3</option> </select>		cmbValues=3 - سمة [value] للعنصر الذي اختاره المستخدم
<select size="3" name="lst1"> <option selected="selected" value='1'>list1</option> <option value='2'>list2</option> <option value='3'>list3</option> <option value='4'>list4</option> <option value='5'>القائمة 5</option> </select>		lst1=3 - سمة [value] للعنصر الذي اختاره المستخدم
<select size="3" name="lst2" multiple="multiple"> <option selected="selected" value='1'>list1</option> <option value='2'>list2</option> <option selected="selected" value='3'>list3</option> <option value='4'>list4</option> <option value='5'>list5</option> </select>		lst2=1 lst2=3 - سمات [value] للعناصر التي اختارها المستخدم
<input type="submit" value="إرسال" name="cmdSubmit"/>		cmdRenvoyer=إرسال - سمة الاسم والقيمة للزر المستخدم لإرسال بيانات النموذج إلى الخادم
<input type="hidden" name="secret" value="aValue"/>		secret=aValue - سمة القيمة للحقل المخفي

2.5.3.2. طريقة POST

نقوم بتعديل مستند HTML بحيث يستخدم المتصفح الآن طريقة POST لإرسال قيم النموذج إلى خادم الويب:


  <form method="post" action="FormulairePost.aspx">

نملأ النموذج كما فعلنا مع طريقة GET ونرسل المعلمات إلى الخادم باستخدام الزر [Submit]. كما هو موضح في القسم السابق في الصفحة 32، يمكننا عرض رؤوس HTTP للطلب المرسل من المتصفح في Chrome:

POST /FormulairePost.aspx HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Content-Length: 195
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:56376
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=unMotDePasse&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur

تظهر عناصر جديدة في طلب HTTP الخاص بالعميل:

POST HTTP/1.1	تم استبدال طلب GET بطلب POST. لم تعد المعلمات موجودة في السطر الأول من الطلب. يمكننا أن نرى أنها موضوعة الآن (السطر 14) بعد طلب HTTP، بعد سطر فارغ. ترميزها مطابق للترميز الموجود في طلب GET.
Content-Length	عدد الأحرف "المنشورة"، أي عدد الأحرف التي يجب على خادم الويب قراءتها بعد استلام رؤوس HTTP لاسترداد المستند المرسل من قبل العميل. المستند المقصود هنا هو قائمة قيم النموذج.
Content-type	يحدد نوع المستند الذي سيرسله العميل بعد رؤوس HTTP. يشير النوع [application/x-www-form-urlencoded] إلى أنه مستند يحتوي على قيم النموذج.

هناك طريقتان لنقل البيانات إلى خادم الويب: GET و POST. هل إحدى الطريقتين أفضل من الأخرى؟ لقد رأينا أنه إذا تم إرسال قيم النموذج بواسطة المتصفح باستخدام طريقة GET، فسيعرض المتصفح عنوان URL المطلوب في شريط العناوين الخاص به بالشكل URL?param1=val1&param2=val2&.... ويمكن اعتبار ذلك ميزة أو عيبًا:

ميزة إذا كنت تريد السماح للمستخدم بحفظ عنوان URL المعلم هذا في إشاراته المرجعية؛
عيب إذا كنت لا تريد أن يتمكن المستخدم من الوصول إلى معلومات معينة في النموذج، مثل الحقول المخفية.

من الآن فصاعدًا، سنستخدم طريقة POST بشكل حصري تقريبًا في نماذجنا.

2.6. الخلاصة

قدم هذا الفصل مفاهيم أساسية متنوعة لتطوير الويب:

الاتصال بين العميل والخادم عبر بروتوكول HTTP؛
تصميم مستند باستخدام HTML؛
تصميم نماذج الإدخال.

لقد رأينا مثالاً على كيفية إرسال العميل للمعلومات إلى خادم الويب. ولم نتطرق إلى كيفية قيام الخادم

استرجاع هذه المعلومات؛
معالجتها؛
إرسال استجابة ديناميكية إلى العميل بناءً على نتيجة المعالجة.

هذا هو مجال برمجة الويب، وهو موضوع سنغطيه في الفصل التالي مع مقدمة لتقنية ASP.NET MVC.