2. مبانی

در این فصل، مبانی برنامه‌نویسی وب را معرفی می‌کنیم. هدف اصلی آن، آشنا کردن شما با اصول کلیدی برنامه‌نویسی وب پیش از به کار بستن آن‌ها با استفاده از یک زبان و محیط خاص است. این فصل شامل مثال‌های متعددی است که توصیه می‌شود آن‌ها را امتحان کنید تا به تدریج با فلسفه توسعه وب آشنا شوید.

2.1. اجزای یک برنامه وب

شماره	نقش	مثال‌های رایج
`1`	OS سرور	لینوکس، ویندوز
`2`	سرور وب	اپاچی (لینوکس، ویندوز) IIS (NT), PWS (Win9x)
`3`	اسکریپت‌های سمت سرور. این‌ها می‌توانند توسط ماژول‌های سرور اجرا شوند یا توسط برنامه‌های خارجی سرور (CGI).	PERL (Apache, IIS, PWS) VBSCRIPT (IIS, PWS) JAVASCRIPT (IIS, PWS) PHP (Apache, IIS, PWS) JAVA (Apache, IIS, PWS) C#, VB.NET (IIS)
`4`	پایگاه داده – این ممکن است روی همان دستگاهی باشد که برنامه‌ای که از آن استفاده می‌کند یا روی یک دستگاه دیگر از طریق اینترنت.	Oracle (Linux، Windows) MySQL (لینوکس، ویندوز) Access (ویندوز) SQL Server (ویندوز)
`5`	OS کلاینت	لینوکس، ویندوز
`6`	مرورگر وب	نت‌اسکیپ، اینترنت اکسپلورر
`7`	اسکریپت‌هایی که در سمت کلاینت و درون مرورگر اجرا می‌شوند. این اسکریپت‌ها به هارد دیسک‌های ماشین مشتری دسترسی ندارند.	VBscript (IE) جاوااسکریپت (IE, نت‌اسکیپ) اسکریپت پرل (IE) اپلت‌ها JAVA

2.2. تبادل داده‌ها در یک برنامه وب با استفاده از فرم

ماشین کلاینت ماشین سرور

شماره	نقش
`1`	مرورگر برای اولین بار یک URL را درخواست می‌کند: (http://machine/url). هیچ پارامتری ارسال نمی‌شود.
`2`	سرور وب صفحه وب مربوط به این URL را برای آن ارسال می‌کند. این صفحه ممکن است ایستا باشد یا به‌صورت پویا توسط یک اسکریپت سمت سرور (SA) تولید شده باشد که ممکن است از محتوای پایگاه‌های داده (SB, SC) استفاده کرده باشد. در اینجا، اسکریپت تشخیص می‌دهد که URL بدون هیچ پارامتری درخواست شده است و صفحه اولیه WEB را تولید می‌کند. مرورگر صفحه را دریافت کرده و آن را نمایش می‌دهد (CA). اسکریپت‌های سمت مرورگر (CB) ممکن است صفحهٔ اولیهٔ ارسال‌شده توسط سرور را تغییر داده باشند. در ادامه، از طریق تعاملات بین کاربر (CD) و اسکریپت‌ها (CB)، صفحه وب اصلاح خواهد شد. به ویژه، فرم‌ها پر خواهند شد.
`3`	کاربر داده‌های فرم را ارسال می‌کند که سپس باید به سرور وب ارسال شود. مرورگر درخواست مجدد URL یا در صورت لزوم درخواست دیگری را ارسال می‌کند و همزمان مقادیر فرم را به سرور منتقل می‌نماید. برای این کار می‌تواند از دو روش به نام‌های GET و POST استفاده کند. پس از دریافت درخواست کلاینت، سرور اسکریپت (SA) مرتبط با URL درخواستی را اجرا می‌کند که پارامترها را تشخیص داده و آنها را پردازش می‌کند.
`4`	سرور صفحه WEB تولید شده توسط برنامه (SA, SB, SC) را تحویل می‌دهد. این مرحله با مرحله ۲ قبلی یکسان است. ارتباط اکنون مطابق مراحل ۲ و ۳ ادامه می‌یابد.

2.3. برخی منابع

در زیر فهرستی از منابع برای کمک به شما در نصب و استفاده از برخی ابزارهای توسعه وب آمده است. راهنمایی‌های نصب این ابزارها را می‌توانید در ضمیمه بیابید.

`Serveur Apache`	http://www.apache.org - آپاچی: نصب و پیاده‌سازی، اوریلی
`Serveur IIS, PWS`	http://www.microsoft.com
`PERL`	http://www.activestate.com - برنامه‌نویسی به پرل، لری وال، اوریلی - کاربردها در پرل: CGI، اثر نیوس و ورومنس، اوریلی - مستندات HTML ارائه‌شده همراه با Active Perl
`PHP`	http://www.php.net - برنامه‌نویسی وب با PHP، Lacroix، Eyrolles - راهنمای کاربر PHP، موجود در وب‌سایت PHP
`VBSCRIPT, ASP`	http://msdn.microsoft.com/scripting/vbscript/download/vbsdoc.exe http://msdn.microsoft.com/scripting/default.htm?/scripting/vbscript - رابط بین WEB و پایگاه داده تحت WinNT، الکس هومر، ای‌رولس
`JAVASCRIPT`	http://msdn.microsoft.com/scripting/jscript/download/jsdoc.exe http://developer.netscape.com/docs/manuals/index.html
`HTML`	http://developer.netscape.com/docs/manuals/index.html
`JAVA`	http://www.sun.com - JAVA سرولت‌ها، جیسون هانتر، اوریلی - برنامه‌نویسی شبکه با جاوا، الیوت راستی هارولد، اوریلی - JDBC و جاوا، جورج ریس، اوریلی
`Base de données`	http://www.mysql.com http://www.oracle.com - راهنمای MySQL در وب‌سایت MySQL موجود است - Oracle 8i روی لینوکس، ژیل بریار، ایرویل - Oracle 8i بر روی NT، ژیل بریار، ای‌رول

2.4. نشانه‌ها

در ادامه فرض می‌کنیم که تعدادی ابزار نصب شده‌اند و از قرارداد زیر استفاده خواهیم کرد:

نشانه‌گذاری	به معنای
`<apache>`	ریشهٔ درخت دایرکتوری سرور آپاچی
`<apache-DocumentRoot>`	دایرکتوری ریشه صفحات وب ارائه‌شده توسط آپاچی. صفحات وب باید در این دایرکتوری ریشه قرار گیرند. بنابراین، URL URL http://localhost/page1.htm با فایل <apache-DocumentRoot>\page1.htm مطابقت دارد.
`<apache-cgi-bin>`	ریشه درخت دایرکتوری مرتبط با نام مستعار cgi-bin، جایی که اسکریپت‌های CGI برای آپاچی می‌توانند قرار داده شوند. بنابراین، URL http://localhost/cgi-bin/test1.pl معادل فایل <apache-cgi-bin>\test1.pl است.
`<pws-DocumentRoot>`	دایرکتوری ریشه صفحات وب ارائه‌شده توسط PWS. صفحات وب باید در زیر این دایرکتوری ریشه قرار گیرند. بنابراین، URL URL http://localhost/page1.htm با فایل <pws-DocumentRoot>\page1.htm مطابقت دارد.
`<perl>`	ریشهٔ درخت دایرکتوری Perl. فایل اجرایی perl.exe معمولاً در <perl>\bin. قرار دارد.
`<php>`	ریشه درخت زبان PHP. فایل اجرایی php.exe معمولاً در <php>. یافت می‌شود.
`<java>`	ریشهٔ درخت دایرکتوری جاوا. فایل‌های اجرایی مرتبط با جاوا در <java>\bin. قرار دارند.
`<tomcat>`	ریشهٔ سرور Tomcat. نمونه‌هایی از servletها را می‌توان در <tomcat>\webapps\examples\servlets و نمونه‌هایی از صفحات را در JSP و <tomcat>\webbapps\examples\jsp یافت.

برای هر یک از این ابزارها، لطفاً به ضمیمه مراجعه کنید که راهنمایی‌هایی برای نصب آن‌ها ارائه می‌دهد.

2.5. صفحات وب ایستا، صفحات وب پویا

یک صفحهٔ ایستا توسط یک فایل HTML نمایش داده می‌شود. از سوی دیگر، یک صفحهٔ پویا به‌صورت «آن‌لاین» توسط وب‌سرور تولید می‌شود. در این بخش، ما تست‌های مختلفی را با استفاده از وب‌سرورهای گوناگون و زبان‌های برنامه‌نویسی مختلف ارائه می‌دهیم تا جهان‌شمولی مفهوم وب را نشان دهیم.

2.5.1. صفحهٔ ایستا HTML (زبان نشانه‌گذاری HyperText)

بیایید کد زیر HTML را در نظر بگیریم:

<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>

که صفحه وب زیر را تولید می‌کند:

تست‌ها

سرور آپاچی را راه‌اندازی کنید
اسکریپت essai1.html را در <apache-DocumentRoot> قرار دهید
صفحهٔ URL http://localhost/essai1.html را در یک مرورگر مشاهده کنید
متوقف کردن سرور آپاچی
سرور PWS را راه‌اندازی کنید
اسکریپت essai1.html را در <pws-DocumentRoot> قرار دهید
صفحه URL http://localhost/essai1.html را با استفاده از یک مرورگر وب مشاهده کنید

2.5.2. یک صفحه ASP (Active Server Pages)

اسکریپت essai2.asp:

<html>
  <head>
    <title>essai 1 : une page asp</title>
   </head>
   <body>
     <center>
     <h1>Une page asp générée dynamiquement par le serveur PWS</h1>
     <h2>Il est <% =time %></h2>
     <br>
     A chaque fois que vous rafraîchissez la page, l'heure change.
   </body>
</html>

صفحه وب زیر را تولید می‌کند:

آزمایش

سرور PWS را راه‌اندازی کنید
اسکریپت essai2.asp را در <pws-DocumentRoot> قرار دهید
با استفاده از یک مرورگر وب به http://localhost/essai2.asp URL دسترسی پیدا کنید

2.5.3. یک اسکریپت PERL (زبان عملی استخراج و گزارش‌گیری)

اسکریپت essai3.pl:

#!d:\perl\bin\perl.exe

($secondes,$minutes,$heure)=localtime(time);

print <<HTML
Content-type: text/html

<html>
  <head>
    <title>essai 1 : un script Perl</title>
   </head>
   <body>
     <center>
     <h1>Une page générée dynamiquement par un script Perl</h1>
     <h2>Il est $heure:$minutes:$secondes</h2>
     <br>
     A chaque fois que vous rafraîchissez la page, l'heure change.
   </body>
</html>

HTML
;

خط اول مسیر فایل اجرایی perl.exe است. در صورت لزوم باید تنظیم شود. پس از اجرا توسط وب‌سرور، اسکریپت صفحه زیر را تولید می‌کند:

آزمایش

سرور وب: آپاچی
برای کسب اطلاعات، فایل پیکربندی srm.conf یا httpd.conf را بسته به نسخه آپاچی خود در <apache>\ مشاهده کنید.فایل‌های config را بررسی کرده و خط مربوط به cgi-bin را برای یافتن دایرکتوری <apache-cgi-bin> جستجو کنید تا فایل essai3.pl را در آن قرار دهید.
اسکریپت essai3.pl را در <apache-cgi-bin> قرار دهید
آدرس http://localhost/cgi-bin/essai3.pl را درخواست کنید

توجه داشته باشید که بارگذاری صفحه perl بیشتر از صفحه asp طول می‌کشد. این به این دلیل است که اسکریپت پرل توسط یک تفسیرگر پرل اجرا می‌شود که باید قبل از اجرای اسکریپت بارگذاری شود. این تفسیرگر به طور دائم در حافظه باقی نمی‌ماند.

2.5.4. یک اسکریپت PHP (صفحه اصلی شخصی)

اسکریپت essai4.php

<html>
  <head>
    <title>essai 4 : une page php</title>
   </head>
   <body>
     <center>
     <h1>Une page PHP générée dynamiquement</h1>
     <h2>
<?
          $maintenant=time();
          echo date("j/m/y, h:i:s",$maintenant);
?>
     </h2>
     <br>
     A chaque fois que vous rafraîchissez la page, l'heure change.
   </body>
</html>

اسکریپت بالا صفحه وب زیر را تولید می‌کند:

آزمایش

فایل پیکربندی آپاچی srm.conf یا httpd.conf را در <Apache>\confs مشاهده کنید
برای کسب اطلاعات، خطوط پیکربندی را در php بررسی کنید
سرور آپاچی را راه‌اندازی کنید
essai4.php را در <apache-DocumentRoot> قرار دهید
درخواست URL http://localhost/essai4.php
سرور PWS را راه‌اندازی کنید
برای کسب اطلاعات، پیکربندی PWS را در مورد PHP بررسی کنید
essai4.php را در <pws-DocumentRoot>\php قرار دهید
http://localhost/essai4.php را درخواست کنید URL

2.5.5. یک اسکریپت JSP (صفحات سرور جاوا)

اسکریپت heure.jsp

<%  //برنامهٔ جاوا نمایش‌دهندهٔ زمان %>

<%@ page import="java.util.*" %>

<% 
     // JAVA کد برای محاسبه زمان
  Calendar calendrier=Calendar.getInstance();
  int heures=calendrier.get(Calendar.HOUR_OF_DAY);
  int minutes=calendrier.get(Calendar.MINUTE);
  int secondes=calendrier.get(Calendar.SECOND);
   // ساعت، دقیقه و ثانیه متغیرهای سراسری هستند
   // که می‌تواند در کد HTML استفاده شود
%>

<% // کد HTML %>
<html>
  <head>
     <title>Page JSP affichant l'heure</title>
  </head>
  <body>
     <center>
     <h1>Une page JSP générée dynamiquement</h1>
     <h2>Il est <%=heures%>:<%=minutes%>:<%=secondes%></h2>
     <br>
     <h3>A chaque fois que vous rechargez la page, l'heure change</h3>
  </body>
</html>

پس از اجرا توسط سرور وب، این اسکریپت صفحه زیر را تولید می‌کند:

آزمایش

اسکریپت heure.jsp را در <tomcat>\jakarta-tomcat\webapps\examples\jsp (Tomcat 3.x) یا در <tomcat>\webapps\examples\jsp (Tomcat 4.x) قرار دهید
سرور Tomcat را راه‌اندازی کنید
به صفحه URL در http://localhost:8080/examples/jsp/heure.jsp دسترسی پیدا کنید

2.5.6. نتیجه‌گیری

مثال‌های قبلی نشان داده‌اند که:

یک صفحه HTML می‌تواند به‌صورت پویا توسط یک برنامه تولید شود. این جوهر برنامه‌نویسی وب است.
زبان‌ها و سرورهای وب مورد استفاده می‌توانند متفاوت باشند. در حال حاضر، روندهای اصلی زیر قابل مشاهده هستند:
- ترکیب‌های Apache/PHP (ویندوز، لینوکس) و IIS/PHP (ویندوز)
- فناوری ASP.NET بر روی پلتفرم‌های ویندوز، که سرور IIS را با یک زبان .NET (C#، VB.NET و غیره) ترکیب می‌کند
- فناوری سروِلِت جاوا و صفحات JSP که روی سرورهای مختلف (Tomcat، Apache، IIS) و روی پلتفرم‌های مختلف (Windows، Linux) اجرا می‌شوند. این فناوری اخیر است که در این سند به تفصیل مورد بحث قرار خواهد گرفت.

2.6. اسکریپت‌های سمت مرورگر

یک صفحه HTML ممکن است شامل اسکریپت‌هایی باشد که توسط مرورگر اجرا می‌شوند. زبان‌های اسکریپت‌نویسی سمت مرورگر متعددی وجود دارند. در اینجا چند نمونه از آن‌ها آورده شده است:

زبان	مرورگرهای پشتیبانی‌شده
وی‌بی‌اسکریپت	IE
جاوااسکریپت	IE, نت‌اسکیپ
PerlScript	IE
جاوا	IE, Netscape

بیایید چند مثال را بررسی کنیم.

2.6.1. یک صفحه وب با یک اسکریپت VBScript، در سمت مرورگر

صفحه vbs1.html

<html>
  <head>
    <title>essai : une page web avec un script vb</title>
    <script language="vbscript">
      function reagir
        alert "Vous avez cliqué sur le bouton OK"
      end function
    </script>
   </head>

   <body>
<center>
     <h1>Une page Web avec un script VB</h1>
     <table>
       <tr>
         <td>Cliquez sur le bouton</td>
         <td><input type="button" value="OK" name="cmdOK" onclick="reagir"></td>
       </tr>
      </table>
   </body>
</html>

صفحهٔ HTML بالا صرفاً حاوی کد HTML نیست، بلکه شامل برنامه‌ای است که قرار است توسط مرورگری که این صفحه را بارگذاری می‌کند، اجرا شود. کد به شرح زیر است:

    <script language="vbscript">
      function reagir
        alert "Vous avez cliqué sur le bouton OK"
      end function
    </script>

برچسب‌های <script></script> برای جدا کردن اسکریپت‌ها در صفحه HTML استفاده می‌شوند. این اسکریپت‌ها می‌توانند به زبان‌های مختلف نوشته شوند و گزینه language درون تگ <script> است که زبان مورد استفاده را مشخص می‌کند. در این مورد، VBScript است. ما وارد جزئیات این زبان نمی‌شویم. اسکریپت بالا تابعی به نام réagir را تعریف می‌کند که پیامی را نمایش می‌دهد. این تابع چه زمانی فراخوانی می‌شود؟ خط کد زیر، HTML، به ما می‌گوید:

         <input type="button" value="OK" name="cmdOK" onclick="reagir">

ویژگی onclick نام تابع را مشخص می‌کند که هنگام کلیک کاربر روی دکمه OK فراخوانی شود. پس از بارگذاری این صفحه توسط مرورگر و کلیک کاربر روی دکمه OK، صفحه زیر نمایش داده خواهد شد:

آزمایش

فقط مرورگر IE قادر به اجرای اسکریپت‌های VBScript است. نت‌اسکیپ برای این کار به افزونه‌ها نیاز دارد. تست‌های زیر را می‌توان انجام داد:

سرور آپاچی
اسکریپت vbs1.html در <apache-DocumentRoot>
درخواست URL http://localhost/vbs1.html را با استفاده از مرورگر IE انجام دهید
سرور PWS
اسکریپت vbs1.html در <pws-DocumentRoot>
درخواست URL http://localhost/vbs1.html با استفاده از مرورگر IE

2.6.2. یک صفحه وب با یک اسکریپت جاوااسکریپت که در مرورگر در حال اجرا است

صفحه: js1.html

<html>
  <head>
    <title>essai 4 : une page web avec un script Javascript</title>
    <script language="javascript">
      function reagir(){
        alert ("Vous avez cliqué sur le bouton OK");
      }
    </script>
   </head>

   <body>
     <center>
     <h1>Une page Web avec un script Javascript</h1>
     <table>
       <tr>
         <td>Cliquez sur le bouton</td>
         <td><input type="button" value="OK" name="cmdOK" onclick="reagir()"></td>
       </tr>
    </table>
   </body>
</html>

این صفحه با صفحه قبلی یکسان است، با این تفاوت که کد VBScript با جاوااسکریپت جایگزین شده است. جاوااسکریپت این مزیت را دارد که هم توسط IE و هم توسط نت‌اسکیپ پشتیبانی می‌شود. اجرای آن نتایج یکسانی را به همراه دارد:

آزمایش‌ها

سرور آپاچی
اسکریپت js1.html در <apache-DocumentRoot>
با استفاده از مرورگر IE یا Netscape، URL http://localhost/js1.html را درخواست کنید
سرور PWS
اسکریپت js1.html در <pws-DocumentRoot>
با استفاده از مرورگر IE یا Netscape، URL http://localhost/js1.html را درخواست کنید

2.7. تعاملات کلاینت-سرور

بیایید به نمودار اولیه خود که مؤلفه‌های یک برنامه وب را نشان می‌دهد بازگردیم:

در اینجا، ما بر تبادل‌های بین ماشین کلاینت و ماشین سرور تمرکز می‌کنیم. این تبادل‌ها از طریق یک شبکه انجام می‌شوند و شایسته است ساختار کلی تبادل‌ها بین دو ماشین راه دور را به یاد آوریم.

2.7.1. مدل OSI

مدل شبکه باز معروف به OSI (مدل مرجع اتصال سیستم‌های باز)، که توسط ISO (سازمان بین‌المللی استانداردها) تعریف شده است، شبکه‌ای ایده‌آل را توصیف می‌کند که در آن ارتباط بین ماشین‌ها را می‌توان با مدلی هفت‌لایه نشان داد:

هر لایه خدماتی را از لایه زیرین دریافت می‌کند و خدمات خود را به لایه بالایی ارائه می‌دهد. فرض کنید دو برنامه کاربردی مستقر بر روی ماشین‌های مختلف، A و B، مایل به برقراری ارتباط هستند: آنها این کار را در لایه Application انجام می‌دهند. آنها نیازی به دانستن تمام جزئیات نحوه عملکرد شبکه ندارند: هر برنامه اطلاعات مورد نظر خود را برای ارسال به لایه زیرین - لایه Présentation - منتقل می‌کند. بنابراین، برنامه تنها باید قوانین رابط با لایه Présentation را بشناسد. هنگامی که اطلاعات به لایه Présentation رسید، طبق قواعد دیگر به لایه Session منتقل می‌شود و این روند تا زمانی ادامه می‌یابد که اطلاعات به رسانه فیزیکی برسد و به صورت فیزیکی به ماشین مقصد ارسال شود. در آنجا، این داده‌ها تحت فرآیند معکوس آنچه در ماشین فرستنده انجام شده بود، قرار می‌گیرند.

در هر لایه، فرآیند فرستنده مسئول ارسال اطلاعات، آن را برای یک فرآیند گیرنده در ماشین دیگر که به همان لایه تعلق دارد، ارسال می‌کند. این کار بر اساس قواعدی معین که به پروتکل لایه معروف است، انجام می‌شود. بنابراین، نمودار نهایی ارتباطات به شرح زیر است:

نقش لایه‌های مختلف به شرح زیر است:

`Physique`	انتقال بیت‌ها را از طریق یک رسانه فیزیکی تضمین می‌کند. این لایه شامل تجهیزات پایانی پردازش داده (E.T.T.D)، مانند ترمینال‌ها یا کامپیوترها، و همچنین تجهیزات پایان‌دهنده مدار داده (E.T.C.D)، مانند مودولاتورها/دمودولاتورها، چندراهی‌ها و متمرکزکننده‌ها است. نکات کلیدی در این سطح عبارتند از: . انتخاب روش رمزگذاری اطلاعات (آنالوگ یا دیجیتال) . انتخاب حالت انتقال (هم‌زمان یا ناهمزمان).
`Liaison de données`	ویژگی‌های فیزیکی لایه فیزیکی را پنهان می‌کند. خطاهای انتقال را تشخیص داده و اصلاح می‌کند.
`Réseau`	مسیر داده‌هایی را که از طریق شبکه ارسال می‌شوند مدیریت می‌کند. این به عنوان routage شناخته می‌شود: تعیین مسیری که داده‌ها باید برای رسیدن به مقصد خود طی کنند.
`Transport`	ارتباط بین دو برنامه را ممکن می‌سازد، در حالی که لایه‌های قبلی تنها ارتباط بین ماشین‌ها را مجاز می‌دانستند. یکی از خدمات ارائه شده توسط این لایه، چندراهی‌سازی (multiplexing) است: لایه حمل‌ونقل می‌تواند از یک اتصال شبکه واحد (از ماشینی به ماشین دیگر) برای انتقال داده‌های متعلق به چندین برنامه استفاده کند.
`Session`	این لایه خدماتی را فراهم می‌کند که به یک برنامه امکان می‌دهد یک جلسه کاری را روی یک ماشین راه دور باز و حفظ کند.
`Présentation`	هدف آن استانداردسازی نحوه نمایش داده‌ها در دستگاه‌های مختلف است. بنابراین، داده‌های منشاء‌گرفته از دستگاه A توسط لایه Présentation آن دستگاه بر اساس یک فرمت استاندارد «قالب‌بندی» می‌شوند، پیش از آنکه از طریق شبکه ارسال شوند. پس از رسیدن به لایه Présentation در ماشین گیرنده B، که به لطف فرمت استاندارد آن‌ها را شناسایی می‌کند، داده‌ها به شکلی متفاوت قالب‌بندی می‌شوند تا برنامه در ماشین B بتواند آن‌ها را تشخیص دهد.
`Application`	در این سطح، برنامه‌هایی را می‌یابیم که عموماً به کاربر نزدیک هستند، مانند ایمیل یا انتقال فایل.

2.7.2. مدل TCP/IP

مدل OSI یک مدل ایده‌آل است. مجموعه پروتکل‌های TCP/IP به شکل زیر به آن نزدیک می‌شود:

رابط شبکه (کارت شبکه کامپیوتر) وظایف لایه‌های ۱ و ۲ مدل OSI را انجام می‌دهد
لایه IP (پروتکل اینترنت) وظایف لایه ۳ (شبکه) را انجام می‌دهد
لایه TCP (پروتکل کنترل انتقال) یا لایه UDP (پروتکل دیتاگرام کاربر) وظایف لایه ۴ (انتقال) را انجام می‌دهد. پروتکل TCP تضمین می‌کند که بسته‌های داده‌ای که بین دستگاه‌ها مبادله می‌شوند، با موفقیت به مقصد برسند. اگر این اتفاق نیفتد، هر بسته‌ای را که گم شده است، مجدداً ارسال می‌کند. پروتکل UDP این وظیفه را انجام نمی‌دهد و بنابراین این امر بر عهده توسعه‌دهنده برنامه است. به همین دلیل است که در اینترنت – که شبکه‌ای ۱۰۰٪ قابل اعتماد نیست – پروتکل TCP بیشترین کاربرد را دارد. به این شبکه، شبکه TCP-IP گفته می‌شود.
لایهٔ کاربردی، عملکردهای لایه‌های ۵ تا ۷ مدل OSI را پوشش می‌دهد.

برنامه‌های وب در لایه Application قرار دارند و بنابراین به پروتکل‌های TCP-IP متکی هستند. لایه‌های Application در ماشین‌های کلاینت و سرور پیام‌ها را مبادله می‌کنند که سپس برای مسیریابی به مقصدشان به لایه‌های ۱ تا ۴ مدل تحویل داده می‌شوند. برای برقراری ارتباط، لایه‌های کاربردی در هر دو ماشین باید به یک زبان یا پروتکل واحد «صحبت» کنند. پروتکلی که توسط برنامه‌های وب استفاده می‌شود، HTTP (پروتکل انتقال HyperText) نامیده می‌شود. این یک پروتکل مبتنی بر متن، c.a.d است که در آن ماشین‌ها برای برقراری ارتباط با یکدیگر، خطوطی از متن را از طریق شبکه مبادله می‌کنند. این مبادلات استاندارد شده‌اند، به این معنی که کلاینت مجموعه‌ای از پیام‌ها را برای مشخص کردن دقیق آنچه از سرور می‌خواهد در اختیار دارد، و سرور نیز مجموعه‌ای از پیام‌ها را برای ارائه پاسخ خود به کلاینت دارد. این تبادل پیام‌ها به شکل زیر است:

کلاینت --> سرور

وقتی کلاینت درخواستی به وب سرور ارسال می‌کند، ارسال می‌کند

خطوط متنی را در قالب HTTP ارسال می‌کند تا آنچه را می‌خواهد مشخص کند
یک خط خالی
اختیاری یک سند

سرور --> کلاینت

وقتی سرور پاسخ خود را به کلاینت ارسال می‌کند، ارسال می‌کند

خطوط متنی در قالب HTTP برای نشان دادن اینکه چه چیزی ارسال می‌کند
یک خط خالی
اختیاری یک سند

بنابراین ارتباطات در هر دو جهت از همان قالب پیروی می‌کنند. در هر دو حالت ممکن است یک سند ارسال شود، هرچند ارسال سند توسط کلاینت به سرور نادر است. با این حال، پروتکل HTTP این امکان را فراهم می‌کند. این همان چیزی است که برای مثال، مشترکین یک ارائه‌دهنده خدمات اینترنتی را قادر می‌سازد تا اسناد مختلف را در وب‌سایت شخصی خود که توسط همان ارائه‌دهنده میزبانی می‌شود، بارگذاری کنند. اسناد مبادله شده می‌توانند از هر نوعی باشند. بیایید مرورگری را در نظر بگیریم که یک صفحه وب حاوی تصاویر را درخواست می‌کند:

مرورگر به وب‌سرور متصل می‌شود و صفحه‌ای را که می‌خواهد درخواست می‌کند. منابع درخواستی به طور منحصربه‌فرد توسط URL (Uniform Resource Locator) شناسایی می‌شوند. مرورگر فقط سربرگ‌های HTTP را ارسال می‌کند و هیچ سندی را ارسال نمی‌کند.
سرور پاسخ می‌دهد. ابتدا سربرگ‌های HTTP را ارسال می‌کند که نوع پاسخی را که می‌فرستد، مشخص می‌کند. اگر صفحه درخواست‌شده وجود نداشته باشد، این ممکن است یک خطا باشد. اگر صفحه وجود داشته باشد، سرور در هدرهای HTTP پاسخ خود اعلام می‌کند که پس از این هدرها، یک سند HTML (زبان نشانه‌گذاری HyperText) ارسال خواهد کرد. این سند شامل مجموعه‌ای از خطوط متن در قالب HTML است. یک متن HTML حاوی تگ‌ها (نشانگرها) است که به مرورگر دستورالعمل‌هایی در مورد نحوه نمایش متن ارائه می‌دهند.
کلاینت از هدرهای HTTP سرور می‌داند که قرار است یک سند HTML دریافت کند. این سند را تجزیه و تحلیل می‌کند و ممکن است متوجه شود که حاوی ارجاعات به تصاویر است. این تصاویر در سند HTML گنجانده نشده‌اند. بنابراین، برای درخواست اولین تصویری که نیاز دارد، یک درخواست جدید به همان وب‌سرور ارسال می‌کند. این درخواست با درخواست انجام‌شده در مرحله ۱ یکسان است، با این تفاوت که منبع درخواستی متفاوت است. سرور این درخواست را با ارسال تصویر مورد نظر به کلاینت پردازش می‌کند. این بار، در پاسخ آن، هدرهای مربوط به HTTP مشخص خواهند کرد که سند ارسالی یک تصویر است و نه یک سند HTML.
کلاینت تصویر ارسال‌شده را دریافت می‌کند. مراحل ۳ و ۴ تا زمانی که کلاینت (معمولاً یک مرورگر وب) تمام اسناد مورد نیاز برای نمایش کل صفحه را داشته باشد، تکرار خواهند شد.

2.7.3. پروتکل HTTP

بیایید پروتکل HTTP را با استفاده از مثال‌ها بررسی کنیم. مرورگر و وب‌سرور چه چیزی را با هم مبادله می‌کنند؟

2.7.3.1. پاسخ یک سرور HTTP

در اینجا بررسی می‌کنیم که یک سرور وب چگونه به درخواست‌های کلاینت‌های خود پاسخ می‌دهد. سرویس وب، یا سرویس HTTP، یک سرویس TCP-IP است که معمولاً روی پورت ۸۰ کار می‌کند. با این حال، ممکن است روی پورت متفاوتی کار کند. در این صورت، مرورگر کلاینت باید آن پورت را در URL که ارسال می‌کند مشخص کند. یک URL معمولاً شکل زیر را دارد:

پروتکل://[:port] machine/path/info

که در آن

پروتکل	http برای سرویس وب. یک مرورگر همچنین می‌تواند به‌عنوان کلاینت برای FTP، اخبار، Telnet و سایر سرویس‌ها عمل کند.
ماشین	نام ماشینی که سرویس وب روی آن اجرا می‌شود
پورت. اگر ۸۰ باشد، می‌توان شماره پورت را حذف کرد. این رایج‌ترین سناریو است.	پورت سرویس وب. اگر عدد ۸۰ باشد، می‌توان شماره پورت را حذف کرد. این رایج‌ترین حالت است.
مسیر	مسیر مشخص‌کنندهٔ منبع درخواستی
اطلاعات	اطلاعات اضافی که برای روشن‌تر کردن درخواست کلاینت به سرور ارائه می‌شود

یک مرورگر وقتی کاربر درخواست بارگذاری یک URL را می‌دهد، چه کاری انجام می‌دهد؟

یک اتصال TCP-IP با ماشین و پورت مشخص‌شده در بخش machine[:port] از URL برقرار می‌کند. ایجاد یک اتصال TCP-IP به معنای ایجاد یک «لوله» ارتباطی بین دو ماشین است. پس از ایجاد این لوله، تمام اطلاعات مبادله شده بین دو ماشین از طریق آن عبور خواهد کرد. ایجاد این لوله TCP-IP هنوز شامل پروتکل وب HTTP نمی‌شود.
پس از ایجاد کانال TCP-IP، کلاینت درخواست خود را با ارسال خطوط متن (دستورات) در قالب HTTP به وب سرور ارسال می‌کند. این بخش path/info از URL را به سرور ارسال خواهد کرد
سرور به همان شیوه و از طریق همان لوله پاسخ خواهد داد
یکی از دو طرف تصمیم به قطع اتصال خواهد گرفت. این موضوع به پروتکل HTTP مورد استفاده بستگی دارد. با پروتکل HTTP 1.0، سرور پس از هر پاسخ خود، اتصال را قطع می‌کند. این بدان معناست که یک کلاینت که برای دریافت اسناد مختلف تشکیل‌دهنده یک صفحه وب به چندین درخواست نیاز دارد، باید برای هر درخواست یک اتصال جدید باز کند که این کار با هزینه همراه است. با پروتکل HTTP/1.1، کلاینت می‌تواند به سرور دستور دهد که اتصال را باز نگه دارد تا زمانی که خود کلاینت دستور بستن آن را بدهد. بنابراین، کلاینت می‌تواند تمام اسناد یک صفحه وب را با استفاده از یک اتصال واحد دریافت کند و پس از دریافت آخرین سند، خود اتصال را ببندد. سرور این بسته شدن را تشخیص داده و اتصال را نیز می‌بندد.

برای بررسی مبادلات بین یک کلاینت و یک وب سرور، از یک کلاینت عمومی TCP استفاده خواهیم کرد. این یک برنامه است که می‌تواند به عنوان کلاینت برای هر سرویسی که از پروتکل ارتباطی مبتنی بر متن، مانند پروتکل HTTP استفاده می‌کند، عمل کند. این خطوط متنی توسط کاربر از طریق صفحه‌کلید تایپ می‌شوند. این امر مستلزم آن است که کاربر با پروتکل ارتباطی سرویسی که قصد دسترسی به آن را دارد، آشنا باشد. سپس پاسخ سرور بر روی صفحه نمایش داده می‌شود. این برنامه به زبان جاوا نوشته شده و می‌توان آن را در ضمیمه یافت. در اینجا، ما آن را در یک پنجره DOS تحت ویندوز استفاده می‌کنیم و به شرح زیر آن را فراخوانی می‌کنیم:

java clientTCPgenerique machine port

با

ماشین	نام ماشینی که سرویس مورد نظر روی آن در حال اجرا است
پورت که سرویس در آن ارائه می‌شود	پورت ارائه‌دهنده سرویس

با این دو اطلاعات، برنامه یک اتصال به نام TCP-IP به ماشین و پورت مشخص‌شده باز خواهد کرد. این اتصال برای تبادل خطوط متن بین کلاینت و وب‌سرور استفاده خواهد شد. خطوط ورودی کلاینت توسط کاربر روی صفحه‌کلید تایپ شده و به سرور ارسال می‌شوند. خطوط متنی که در پاسخ توسط سرور بازگردانده می‌شوند، روی صفحه نمایش داده می‌شوند. بنابراین می‌توان گفتگوی مستقیمی بین کاربر روی صفحه‌کلید و وب‌سرور برقرار کرد. بیایید با استفاده از مثال‌های ارائه‌شده این موضوع را امتحان کنیم. ما صفحه ایستا زیر را ایجاد کرده بودیم: HTML:

<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>

که آن را در یک مرورگر مشاهده می‌کنیم:

می‌توانیم ببینیم که URL درخواستی عبارت است از: http://localhost:81/essais/essai1.html. بنابراین سرور سرویس وب localhost (معادل ماشین محلی) روی پورت ۸۱ است. اگر متن این صفحه وب را مشاهده کنیم (View/Source)، متنی را می‌یابیم که در اصل با HTML ایجاد شده است:

اکنون بیایید از کلاینت عمومی خود TCP برای درخواست همان URL استفاده کنیم:


Dos>java clientTCPgenerique localhost 81

Commandes :
GET /essais/essai1.html HTTP/1.0

<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 08:07:46 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Connection: close
<-- Content-Type: text/html
<--
<-- <html>
<--   <head>
<--     <title>essai 1 : une page statique</title>
<--    </head>
<--    <body>
<--      <center>
<--      <h1>Une page statique...</h1>
<--    </body>
<-- </html>

وقتی کلاینت با استفاده از دستور java clientTCPgenerique localhost 81 اجرا می‌شود، یک اتصال بین برنامه و وب‌سروری که روی همان ماشین (localhost) در پورت 81 در حال اجرا است برقرار می‌گردد. تبادل‌های کلاینت-سرور در قالب HTTP اکنون می‌توانند آغاز شوند. شایان ذکر است که این‌ها از سه مؤلفه تشکیل شده‌اند:

سربرگ‌های HTTP
خط خالی
داده‌های اختیاری

در مثال ما، کلاینت تنها یک درخواست ارسال می‌کند:

GET /tests/essai1.html HTTP/1.0

این خط سه مؤلفه دارد:

`GET`	دستور HTTP برای درخواست یک منبع. موارد دیگری نیز وجود دارد: HEAD یک منبع را درخواست می‌کند اما خود را به سربرگ‌های HTTP در پاسخ سرور محدود می‌کند. خودِ منبع ارسال نمی‌شود. PUT به کلاینت اجازه می‌دهد یک سند را به سرور ارسال کند
`/essais/essai1.html`	منبع درخواست شده
`HTTP/1.0`	نسخه پروتکل HTTP استفاده شده است. در این مورد، 1.0. این بدان معناست که سرور به محض ارسال پاسخ خود، اتصال را قطع خواهد کرد.

سربرگ‌های HTTP همیشه باید با یک خط خالی دنبال شوند. این کاری است که کلاینت در اینجا انجام داده است. اینگونه است که کلاینت یا سرور می‌داند که بخش HTTP تبادل کامل شده است. در این نقطه، بخش مربوط به کلاینت به پایان می‌رسد. این کلاینت هیچ سندی برای ارسال ندارد. سپس پاسخ سرور آغاز می‌شود؛ در مثال ما، این شامل تمام خطوطی است که با نماد <-- شروع می‌شوند. سرور ابتدا مجموعه‌ای از سرآیندهای HTTP را ارسال می‌کند و پس از آن یک خط خالی می‌آید:

<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 08:07:46 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Connection: close
<-- Content-Type: text/html
<--

`HTTP/1.1 200 OK`	سرور اعلام می‌کند که از پروتکل HTTP نسخه ۱.۱ پشتیبانی می‌کند که دارای منبع درخواستی است (کد وضعیت 200، پیام OK)
`Date: ...`	تاریخ و زمان پاسخ
`Server:`	سرور خود را شناسایی می‌کند. در این مورد، یک سرور آپاچی است
`Last-Modified:`	تاریخ آخرین تغییر منبع درخواست‌شده توسط کلاینت
`ETag:`	...
`Accept-Ranges: bytes`	واحد اندازه‌گیری برای داده‌های ارسال‌شده. در این مورد، بایت
`Content-Length: 161`	تعداد بایت‌های سند پس از سربرگ‌ها HTTP. این عدد در واقع اندازه فایل essai1.html به بایت است: `E:\data\serge\web\essais>dir essai1.html 08/07/2002 10:00 161 essai1.html`
`Connection: close`	سرور می‌گوید پس از ارسال سند، اتصال را قطع خواهد کرد
`Content-type: text/html`	سرور اعلام می‌کند که متنی را در قالب HTML (html) ارسال خواهد کرد.

کلاینت این سربرگ‌ها را دریافت می‌کند HTTP و اکنون می‌داند که ۱۶۱ بایت نمایانگر یک سند HTML را دریافت خواهد کرد. سرور این ۱۶۱ بایت را بلافاصله پس از خط خالی که پایان سربرگ‌ها را نشان می‌داد HTTP ارسال می‌کند:

<-- <html>
<--   <head>
<--     <title>essai 1 : une page statique</title>
<--    </head>
<--    <body>
<--      <center>
<--      <h1>Une page statique...</h1>
<--    </body>
<-- </html>

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

بیایید یک بار دیگر از کلاینت عمومی TCP خود برای درخواست همان منبع استفاده کنیم، اما این بار با فرمان HEAD که فقط سربرگ‌های پاسخ را درخواست می‌کند:


Dos>java.bat clientTCPgenerique localhost 81
Commandes :
HEAD /essais/essai1.html HTTP/1.1
Host: localhost:81

<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 09:07:25 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Content-Type: text/html
<--

ما همان نتیجه قبلی را بدون سند HTML به دست می‌آوریم. توجه داشته باشید که در درخواست HEAD، کلاینت اشاره کرده بود که از پروتکل HTTP نسخه 1.1 استفاده می‌کند. این امر مستلزم ارسال یک هدر دوم HTTP است که جفت machine:port را که کلاینت مایل به پرس‌وجو آن است، مشخص می‌کند: Host: localhost:81.

حال بیایید با استفاده از یک مرورگر وب و کلاینت عمومی TCP یک تصویر را درخواست کنیم. ابتدا با استفاده از مرورگر وب:

فایل univ01.gif دارای حجم ۳۱۶۷ بایت است:

E:\data\serge\web\images>dir univ01.gif
14/04/2000  13:37                3 167 univ01.gif

اکنون بیایید از کلاینت عمومی TCP استفاده کنیم:


E:\data\serge\JAVA\SOCKETS\client générique>java clientTCPgenerique localhost 81
Commandes :
HEAD /images/univ01.gif HTTP/1.1
host: localhost:81

<-- HTTP/1.1 200 OK
<-- Date: Tue, 09 Jul 2002 13:53:24 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Fri, 14 Apr 2000 11:37:42 GMT
<-- ETag: "0-c5f-38f70306"
<-- Accept-Ranges: bytes
<-- Content-Length: 3167
<-- Content-Type: image/gif
<--

لطفاً نکات زیر را در پاسخ سرور توجه کنید:

`HEAD`	ما فقط هدرهای HTTP را برای منبع درخواست می‌کنیم. این به این دلیل است که یک تصویر یک فایل باینری است، نه یک فایل متنی، و نمایش آن روی صفحه به صورت متن هیچ چیز خوانایی ایجاد نمی‌کند.
`Content-Length: 3167`	این اندازه فایل است univ01.gif
`Content-Type: image/gif`	سرور به کلاینت خود اطلاع می‌دهد که قصد دارد یک سند از نوع image/gif، c.a.d، یک تصویر در فرمت GIF ارسال کند. اگر تصویر در قالب JPEG بود، نوع سند image/jpeg می‌شد. انواع سند استاندارد شده و به نام انواع MIME (توسعه پست چندمنظوره اینترنت) شناخته می‌شوند.

2.7.3.2. درخواستی از یک کلاینت HTTP

اکنون، بیایید این سؤال را از خود بپرسیم: اگر بخواهیم برنامه‌ای بنویسیم که با یک سرور وب «ارتباط» برقرار کند، برای به دست آوردن یک منبع مشخص، باید چه دستوراتی را به سرور وب ارسال کند؟ ما در مثال‌های قبلی، پاسخ به این سؤال را آغاز کرده‌ایم. ما با سه دستور مواجه شده‌ایم:

`GET ressource protocole`	برای درخواست یک منبع خاص با استفاده از یک نسخهٔ خاص از پروتکل HTTP. سرور پاسخی را در قالب HTTP ارسال می‌کند، که پس از آن یک خط خالی و سپس منبع درخواستی می‌آید
`HEAD ressource protocole`	همین امر صدق می‌کند، با این تفاوت که در اینجا پاسخ به سربرگ‌های HTTP و یک خط خالی محدود می‌شود
`host: machine:port`	برای مشخص کردن (پروتکل HTTP 1.1) ماشین و پورت وب‌سرور مورد پرس‌وجو

دستورهای دیگری نیز وجود دارد. برای بررسی آن‌ها، اکنون از یک سرور عمومی TCP استفاده خواهیم کرد. این یک برنامه نوشته شده در جاوا است که آن را در ضمیمه نیز خواهید یافت. این برنامه با استفاده از دستور زیر اجرا می‌شود: java serveurTCPgenerique portEcoute، که در آن portEcoute پورتی است که کلاینت‌ها باید به آن متصل شوند. برنامه serveurTCPgenerique

دستورالعمل‌های ارسال‌شده توسط کلاینت‌ها را روی صفحه نمایش می‌دهد
در پاسخ، خطوط متنی را که کاربر از طریق صفحه‌کلید تایپ می‌کند برای آن‌ها ارسال می‌کند. بنابراین کاربر نقش سرور را ایفا می‌کند. در مثال ما، کاربر پشت صفحه‌کلید به‌عنوان یک سرویس وب عمل خواهد کرد.

حال بیایید با اجرای سرور عمومی خود روی پورت 88، یک سرور وب را شبیه‌سازی کنیم:


Dos> java serveurTCPgenerique 88
Serveur générique lancé sur le port 88

اکنون یک مرورگر را باز کرده و صفحه http://localhost:88/exemple.html را در URL درخواست می‌کنیم. مرورگر سپس به پورت 88 روی ماشین localhost متصل شده و صفحه /exemple.html را درخواست می‌کند:

حال بیایید به پنجره سرور خود نگاه کنیم که آنچه کلاینت برای آن ارسال کرده است را نمایش می‌دهد (برخی خطوط خاص مربوط به عملکرد برنامه serveurTCPgenerique به منظور سادگی حذف شده‌اند):


Dos>java serveurTCPgenerique 88
Serveur générique lancé sur le port 88
...
<-- GET /exemple.html HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, */*
<-- Accept-Language: fr
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705; .NET CLR 1.0.2 914)
<-- Host: localhost:88
<-- Connection: Keep-Alive
<--

خط‌هایی که با نماد <-- شروع می‌شوند، آن‌هایی هستند که توسط کلاینت ارسال شده‌اند. بنابراین با سربرگ‌های HTTP مواجه می‌شویم که قبلاً با آن‌ها برخورد نکرده بودیم:

`Accept:`	فهرستی از انواع اسناد (MIME) که مرورگر قادر به پردازش آن‌ها است.
`Accept-language:`	زبان ترجیحی پذیرفته‌شده برای اسناد.
`Accept-Encoding:`	نوع رمزگذاری اسنادی که مرورگر می‌تواند از آن‌ها پشتیبانی کند
`User-Agent:`	هویت مشتری
`Connection:`	Close: سرور پس از بازگرداندن پاسخ خود، اتصال را قطع خواهد کرد Keep-Alive: اتصال پس از دریافت پاسخ سرور باز باقی می‌ماند. این امر به مرورگر اجازه می‌دهد تا سایر اسناد مورد نیاز برای ساخت صفحه را بدون نیاز به برقراری مجدد اتصال درخواست کند.

سربرگ‌های HTTP که توسط مرورگر ارسال می‌شوند، همان‌طور که انتظار می‌رود، با یک خط خالی پایان می‌یابند.

بیایید یک پاسخ برای کلاینت خود بسازیم. کاربر پشت کیبورد در این مورد، خود سرور است و می‌تواند پاسخ را به‌صورت دستی بسازد. بیایید پاسخ تولیدشده توسط یک وب‌سرور را در مثال قبلی به یاد بیاوریم:

<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 08:07:46 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Connection: close
<-- Content-Type: text/html
<--
<-- <html>
<--   <head>
<--     <title>essai 1 : une page statique</title>
<--    </head>
<--    <body>
<--      <center>
<--      <h1>Une page statique...</h1>
<--    </body>
<-- </html>

بیایید سعی کنیم پاسخ مشابهی را به‌صورت دستی (روی صفحه‌کلید) تایپ کنیم. خطوطی که با --> : شروع می‌شوند، به کلاینت ارسال می‌شوند:

...
<-- Host: localhost:88
<-- Connection: Keep-Alive
<--
--> : HTTP/1.1 200 OK
--> : Server: serveur tcp generique
--> : Connection: close
--> : Content-Type: text/html
--> :
--> : <html>
--> :   <head><title>Serveur generique</title></head>
--> :   <body>
--> :     <center>
--> :       <h2>Reponse du serveur generique</h2>
--> :     </center>
--> :    </body>
--> : </html>
fin

دستور fin مختص عملکرد برنامه serveurTCPgenerique است. این دستور مانع اجرای برنامه شده و ارتباط بین سرور و کلاینت را قطع می‌کند. در پاسخ خود، ما خود را به سربرگ‌های زیر HTTP محدود کرده‌ایم:

HTTP/1.1 200 OK
--> : Server: serveur tcp generique
--> : Connection: close
--> : Content-Type: text/html
--> :

ما اندازه فایلی را که قصد ارسال آن را داریم (Content-Length) مشخص نمی‌کنیم، بلکه صرفاً اعلام می‌کنیم که پس از ارسال آن، اتصال را می‌بندیم (Connection: close). این برای مرورگر کافی است. وقتی مرورگر ببیند که اتصال بسته شده است، می‌فهمد پاسخ سرور کامل است و صفحه‌ی HTML را که برایش ارسال شده نمایش می‌دهد. این صفحه به شرح زیر است:

--> : <html>
--> :   <head><title>Serveur generique</title></head>
--> :   <body>
--> :     <center>
--> :       <h2>Reponse du serveur generique</h2>
--> :     </center>
--> :    </body>
--> : </html>

مرورگر سپس صفحه زیر را نمایش می‌دهد:

اگر در مثال بالا، View/Source را وارد کنیم تا ببینیم مرورگر چه چیزی دریافت کرده است، با این نتیجه مواجه می‌شویم:

یعنی دقیقاً همان چیزی که از سرور عمومی ارسال شده بود.

2.8. زبان HTML

یک مرورگر وب می‌تواند اسناد مختلفی را نمایش دهد که رایج‌ترین آن‌ها سند HTML (زبان نشانه‌گذاری HyperText) است. این سند شامل متن قالب‌بندی‌شده‌ای است که حاوی تگ‌هایی به شکل <balise>texte</balise> می‌باشد. برای مثال، تگ <B>important</B> متن «important» را به صورت پررنگ نمایش می‌دهد. تگ‌های مستقل دیگری مانند تگ <hr> وجود دارند که یک خط افقی نمایش می‌دهند. ما تمام تگ‌هایی را که می‌توان در یک متن HTML یافت، بررسی نخواهیم کرد. برنامه‌های نرم‌افزاری WYSIWYG متعددی وجود دارند که به شما امکان می‌دهند یک صفحه وب را بدون نوشتن حتی یک خط کد HTML بسازید. این ابزارها به طور خودکار کد HTML را برای طرح‌بندی ایجاد شده با استفاده از ماوس و کنترل‌های از پیش تعریف شده تولید می‌کنند. برای مثال، می‌توانید یک جدول را (با استفاده از ماوس) در صفحه درج کنید و سپس کد HTML تولیدشده توسط نرم‌افزار را مشاهده کنید تا بفهمید برای تعریف یک جدول در یک صفحه وب از کدام تگ‌ها باید استفاده کنید. به همین سادگی. علاوه بر این، دانش زبان HTML ضروری است، زیرا برنامه‌های وب پویا باید کد HTML را خودشان تولید کنند تا به کلاینت‌های وب ارسال کنند. این کد توسط یک برنامه تولید می‌شود و البته شما باید بدانید چه چیزی را تولید کنید تا کلاینت صفحه وب مورد نظر خود را دریافت کند.

خلاصه اینکه، برای شروع برنامه‌نویسی وب نیازی به دانستن کل زبان HTML نیست. با این حال، این دانش ضروری است و می‌توان آن را از طریق استفاده از نرم‌افزارهای ساخت صفحه وب WYSIWYG مانند ورد، FrontPage، DreamWeaver و ده‌ها نرم‌افزار دیگر به دست آورد. راه دیگری برای کشف پیچیدگی‌های زبان HTML، گشت‌وگذار در وب و مشاهده کد منبع صفحاتی است که ویژگی‌های جالبی دارند که هنوز با آن‌ها آشنا نیستید.

2.8.1. یک مثال

بیایید مثال زیر را در نظر بگیریم که با استفاده از FrontPage Express، ابزاری رایگان همراه با Internet Explorer، ایجاد شده است. کد تولید شده توسط FrontPage در اینجا ساده‌سازی شده است. این مثال چند عنصر را که می‌توان در یک سند وب یافت، نشان می‌دهد، مانند:

یک جدول
یک تصویر
یک پیوند

یک سند HTML معمولاً شکل زیر را دارد:

<html>
    <head>
        <title>Un titre</title>
        ...
    </head>
    <body attributs>
        ...
    </body>
</html>

کل سند در برچسب‌های <html>...</html> قرار گرفته است. این سند از دو بخش تشکیل شده است:

<head>...</head>: این بخش غیرقابل نمایش سند است. این بخش اطلاعاتی را در اختیار مرورگری که سند را نمایش می‌دهد قرار می‌دهد. این بخش اغلب شامل تگ <title>...</title> است که متنی را برای نمایش در نوار عنوان مرورگر تعیین می‌کند. همچنین ممکن است شامل تگ‌های دیگری باشد، به‌ویژه آنهایی که کلمات کلیدی سند را تعریف می‌کنند و بعداً توسط موتورهای جستجو استفاده می‌شوند. این بخش همچنین ممکن است حاوی اسکریپت‌ها باشد، که معمولاً به زبان جاوااسکریپت یا وی‌بی‌اسکریپت نوشته می‌شوند و توسط مرورگر اجرا خواهند شد.
<body attributes>...</body>: این بخشی است که توسط مرورگر نمایش داده می‌شود. تگ‌های موجود در این بخش، چیدمان بصری «دلخواه» سند را به مرورگر می‌گویند. هر مرورگر این تگ‌ها را به روش خود تفسیر خواهد کرد. بنابراین ممکن است دو مرورگر یک سند وب را به شکل متفاوتی نمایش دهند. این معمولاً یکی از سردردهای طراحان وب است.

کد HTML برای سند مثال ما به شرح زیر است:

<html>

  <head>
      <title>balises</title>
  </head>

  <body background="/images/standard.jpg">
      <center>
        <h1>Les balises HTML</h1>
        <hr>
      </center>

    <table border="1">
      <tr>
        <td>cellule(1,1)</td>
        <td valign="middle" align="center" width="150">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>
    </table>

    <table border="0">
      <tr>
        <td>Une image</td>
        <td><img border="0" src="/images/univ01.gif" width="80" height="95"></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
`titre du document`	<title>balises</title> balises در نوار عنوان مرورگری که سند را نمایش می‌دهد، ظاهر خواهد شد
`barre horizontale`	<hr>: یک خط افقی نمایش می‌دهد
`tableau`	<table attributes>....</table>: برای تعریف جدول <tr attributes>...</tr>: برای تعریف یک سطر <td attributes>...: برای تعریف یک سلول مثال‌ها: <table border="1">...</table>: ویژگی border ضخامت حاشیه جدول را مشخص می‌کند <td valign="middle" align="center" width="150">سلول(1,2)</td>: یک سلول را تعریف می‌کند که محتوای آن cell(1,2) خواهد بود. این محتوا به صورت عمودی (valign="middle") و افقی (align="center") مرکزگرا خواهد بود. عرض این سلول 150 پیکسل خواهد بود (width="150")
`image`	<img border="0" src="/images/univ01.gif" width="80" height="95">: یک تصویر بدون حاشیه (border="0")، با ارتفاع 95 پیکسل (height="95") را تعریف می‌کند، با عرض ۸۰ پیکسل (width="80") و فایل منبعی به آدرس /images/univ01.gif در سرور وب (src="/images/univ01.gif"). این لینک در یک سند وب ظاهر می‌شود که با استفاده از URL http://localhost:81/html/balises.htm تولید شده است. بنابراین، مرورگر برای دریافت تصویر مورد اشاره، از URL http://localhost:81/images/univ01.gif درخواست می‌کند.
`lien`	<a href="http://istia.univ-angers.fr">اینجا: باعث می‌شود متن ici به‌عنوان یک لینک به http://istia.univ-angers.fr عمل کند.
`fond de page`	<body background="/images/standard.jpg">: نشان می‌دهد که تصویری که باید به‌عنوان پس‌زمینه صفحه استفاده شود، در URL /images/standard.jpg روی سرور وب قرار دارد. در چارچوب مثال ما، مرورگر برای دریافت این تصویر پس‌زمینه، به http://localhost:81/images/standard.jpg درخواست می‌دهد.

این مثال ساده نشان می‌دهد که برای ساخت کل سند، مرورگر باید سه درخواست به سرور ارسال کند:

http://localhost:81/html/balises.htm برای دریافت منبع HTML سند
http://localhost:81/images/univ01.gif برای دریافت تصویر univ01.gif
http://localhost:81/images/standard.jpg برای دریافت تصویر پس‌زمینه standard.jpg

مثال زیر یک فرم وب را نشان می‌دهد که همچنین با استفاده از FrontPage ایجاد شده است.

کد HTML که توسط FrontPage تولید شده و کمی بهینه‌سازی شده است، به شرح زیر است:

<html>

  <head>
      <title>balises</title>
    <script language="JavaScript">
        function effacer(){
          alert("Vous avez cliqué sur le bouton Effacer");
      }//حذف
        </script>
  </head>

  <body background="/images/standard.jpg">

    <form method="POST" >

      <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>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>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>choix1</option>
                <option selected>choix2</option>
                <option>choix3</option>
              </select>
          </td>
        </tr>
        <tr>
          <td>liste à choix simple</td>
          <td>
              <select size="3" name="lst1">
                <option selected>liste1</option>
                <option>liste2</option>
                <option>liste3</option>
                <option>liste4</option>
                <option>liste5</option>
              </select>
          </td>
        </tr>
        <tr>
          <td>liste à choix multiple</td>
          <td>
              <select size="3" name="lst2" multiple>
                <option>liste1</option>
                <option>liste2</option>
                <option selected>liste3</option>
                <option>liste4</option>
                <option>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
`formulaire`	<form method="POST" >
`champ de saisie`	<input type="text" name="txtSaisie" size="20" value="چند کلمه">
`champ de saisie cachée`	<input type="password" name="txtMdp" size="20" value="unMotDePasse">
`champ de saisie multilignes`	<textarea rows="2" name="areaSaisie" cols="20"> line1 line2 خط ۳ </textarea>
`boutons radio`	<input type="radio" value="Yes" name="R1">بله <input type="radio" name="R1" value="no" checked>خیر
`cases à cocher`	<input type="checkbox" name="C1" value="one">1 <input type="checkbox" name="C2" value="two" checked>2 <input type="checkbox" name="C3" value="three">3
`Combo`	<select size="1" name="cmbValeurs"> <option>option1</option> <option selected>گزینهٔ ۲</option> <option>گزینه ۳</option> </select>
`liste à sélection unique`	<select size="3" name="lst1"> <option selected>list1</option> <option>list2</option> <option>list3</option> <option>list4</option> <option>list5</option> </select>
`liste à sélection multiple`	<select size="3" name="lst2" multiple> <option>list1</option> <option>list2</option> <option selected>list3</option> <option>list4</option> <option>list5</option> </select>
`bouton de type submit`	<input type="submit" value="ارسال" name="cmdRenvoyer">
`bouton de type reset`	<input type="reset" value="Reset" name="cmdRétablir">
`bouton de type button`	<input type="button" value="Clear" name="cmdEffacer" onclick="clear()">

بیایید این کنترل‌های مختلف را بررسی کنیم.

2.8.1.1. فرم

formulaire

balise HTML

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

attributs

name="frmexemple": نام فرم

method="..." : متدی که توسط مرورگر برای ارسال مقادیر جمع‌آوری‌شده در فرم به سرور وب استفاده می‌شود.

action="..." : URL که مقادیر جمع‌آوری‌شده در فرم به آن ارسال می‌شوند.

یک فرم وب در بین تگ‌های <form>...</form> قرار می‌گیرد. فرم ممکن است یک نام (name="xx") داشته باشد. این موضوع برای تمام کنترل‌های موجود در فرم صدق می‌کند. این نام زمانی مفید است که سند وب حاوی اسکریپت‌هایی باشد که نیاز به ارجاع به عناصر فرم داشته باشند. هدف یک فرم جمع‌آوری اطلاعاتی است که کاربر از طریق صفحه‌کلید یا ماوس وارد می‌کند و ارسال آن به URL وب‌سرور. کدام یک؟ همان که در ویژگی action="URL" اشاره شده است. اگر این ویژگی وجود نداشته باشد، اطلاعات به سرور وبی ارسال می‌شود که سند حاوی فرم را میزبانی می‌کند. این مورد در مثال بالا صادق است. تا اینجا، ما همیشه وب کلاینت را به عنوان «درخواست‌کننده» اطلاعات از یک وب سرور در نظر گرفته‌ایم، نه به عنوان «ارائه‌دهنده» اطلاعات به آن. یک کلاینت وب چگونه اطلاعات (موجود در فرم) را به یک سرور وب ارائه می‌دهد؟ کمی بعد به تفصیل به این موضوع باز خواهیم گشت. این کلاینت می‌تواند از دو روش مختلف به نام‌های POST و GET استفاده کند. ویژگی method="méthode"، که در آن روش روی GET یا POST تنظیم می‌شود، در تگ <form> به مرورگر می‌گوید که از کدام روش برای ارسال اطلاعات جمع‌آوری‌شده در فرم به URL که توسط ویژگی action="URL" مشخص شده است، استفاده کند. وقتی ویژگی method مشخص نشده باشد، روش GET به‌صورت پیش‌فرض استفاده می‌شود.

2.8.1.2. میدان ورودی

champ de saisie

balise HTML

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

برچسب `input` برای کنترل‌های مختلف استفاده می‌شود. این ویژگی `type` است که بین این کنترل‌های مختلف تمایز قائل می‌شود.

attributs

type="text": مشخص می‌کند که این یک فیلد ورودی متنی است

type="password": کاراکترها در فیلد ورودی با ستاره (*) جایگزین می‌شوند. این تنها تفاوت آن با یک فیلد ورودی استاندارد است. این نوع کنترل برای وارد کردن رمزهای عبور مناسب است.

size="20": تعداد کاراکترهای قابل مشاهده در فیلد – مانع از وارد کردن کاراکترهای بیشتر نمی‌شود

name="txtSaisie": نام کنترل

value="چند کلمه": متنی که در فیلد ورودی نمایش داده می‌شود.

2.8.1.3. میدان ورودی چندخطی

champ de saisie multilignes

ligne1

ligne2

ligne3

</textarea>

`balise HTML`	<textarea ...>text</textarea> یک فیلد ورودی متن چندخطی را نمایش می‌دهد که از قبل متنی در آن قرار دارد
`attributs`	rows="2": تعداد خطوط cols="'20" : تعداد ستون‌ها name="areaSaisie": نام کنترل

2.8.1.4. دکمه‌های رادیویی

boutons radio

<input type="radio" value="Yes" name="R1">بله

<input type="radio" name="R1" value="no" checked>خیر

balise HTML

<input type="radio" attribute2="value2" ....>متن

یک دکمه رادیویی را همراه با متنی در کنار آن نمایش می‌دهد.

attributs

name="radio": نام کنترل. دکمه‌های رادیویی با نام یکسان یک گروه از دکمه‌های ناسازگار را تشکیل می‌دهند: تنها یکی از آنها می‌تواند انتخاب شود.

value="value": مقداری که به دکمه رادیویی اختصاص داده می‌شود. این مقدار نباید با متنی که در کنار دکمه رادیویی نمایش داده می‌شود اشتباه گرفته شود. مورد دوم صرفاً برای اهداف نمایشی است.

checked: اگر این کلمه کلیدی وجود داشته باشد، دکمه رادیویی انتخاب شده است؛ در غیر این صورت، انتخاب نشده است.

2.8.1.5. کادرهای تیک‌دار

cases à cocher

<input type="checkbox" name="C1" value="one">1

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

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

balise HTML

<input type="checkbox" attribute2="value2" ....>متن

یک چک‌باکس را همراه با متنی در کنار آن نمایش می‌دهد.

attributs

name="C1": نام کنترل. چک‌باکس‌ها ممکن است نام یکسانی داشته باشند یا نداشته باشند. چک‌باکس‌هایی که نام یکسان دارند، یک گروه از چک‌باکس‌های مرتبط را تشکیل می‌دهند.

value="value": مقداری که به چک‌باکس اختصاص داده می‌شود. این مقدار نباید با متنی که در کنار دکمه رادیویی نمایش داده می‌شود اشتباه گرفته شود. مورد دوم صرفاً برای اهداف نمایشی است.

checked: اگر این کلمه کلیدی وجود داشته باشد، دکمه رادیویی انتخاب شده است؛ در غیر این صورت، انتخاب نشده است.

2.8.1.6. لیست کشویی (کادر ترکیبی)

Combo

<option>choix1</option>

<option selected>انتخاب۲</option>

<option>choix3</option>

</select>

balise HTML

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

<option [selected]>...</option>

...

</select>

متن بین تگ‌های <option>...</option> را در یک لیست نمایش می‌دهد

attributs

name="cmbValeurs": نام کنترل.

size="1": تعداد آیتم‌های قابل مشاهده لیست. size="1" باعث می‌شود لیست مانند یک کادر ترکیبی رفتار کند.

selected: اگر این کلمه کلیدی برای یک آیتم لیست وجود داشته باشد، آن آیتم در لیست به‌صورت انتخاب‌شده نمایش داده می‌شود. در مثال بالا، آیتم لیست choix2 هنگام اولین نمایش در کادر ترکیبی به‌عنوان آیتم انتخاب‌شده ظاهر می‌شود.

2.8.1.7. فهرست تک‌انتخابی

liste à sélection unique

<option>liste2</option>

<option>liste3</option>

<option>liste4</option>

<option>liste5</option>

</select>

`balise HTML`	<select size=".." name=".."> <option [selected]>...</option> ... </select> متن بین تگ‌های <option>...</option> را در یک لیست نمایش می‌دهد
`attributs`	همانند لیست کشویی که فقط یک مورد را نمایش می‌دهد. این کنترل تنها در ویژگی size>1 با لیست کشویی قبلی متفاوت است.

2.8.1.8. فهرست چندگزینه‌ای

liste à sélection unique

<option>liste2</option>

<option>liste4</option>

<option>liste5</option>

</select>

`balise HTML`	<select size=".." name=".." multiple> <option [selected]>...</option> ... </select> متن بین تگ‌های <option>...</option> را در یک لیست نمایش می‌دهد
`attributs`	multiple: امکان انتخاب چندین آیتم از لیست را فراهم می‌کند. در مثال بالا، آیتم‌های liste1 و liste3 هر دو انتخاب شده‌اند.

2.8.1.9. دکمه

bouton de type button

balise HTML

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

attributs

type="button": یک کنترل دکمه را تعریف می‌کند. دو نوع دیگر دکمه وجود دارد: submit و reset.

value="Clear": متنی که روی دکمه نمایش داده می‌شود

onclick="function()": به شما امکان می‌دهد تابعی را تعریف کنید که هنگام کلیک کاربر روی دکمه اجرا شود. این تابع بخشی از اسکریپت‌های تعریف‌شده در سند وب نمایش‌داده‌شده است. سینتکس نشان‌داده‌شده در بالا، سینتکس javascript است. اگر اسکریپت‌ها به زبان VBScript نوشته شده باشند، باید onclick="function" را بدون پرانتز بنویسید. اگر نیاز باشد پارامترها به تابع ارسال شوند، نحو به شکل زیر باقی می‌ماند: onclick="function(val1, val2,...)"

در مثال ما، کلیک بر روی دکمه Effacer، تابع جاوااسکریپت زیر effacer را فراخوانی می‌کند:

    <script language="JavaScript">
        function effacer(){
          alert("Vous avez cliqué sur le bouton Effacer");
      }//حذف
        </script>

توابع effacer پیام زیر را نمایش می‌دهد:

2.8.1.10. دکمه ارسال

bouton de type submit

balise HTML

<input type="submit" value="ارسال" name="cmdRenvoyer">

attributs

type="submit": دکمه را به‌عنوان دکمه‌ای برای ارسال داده‌های فرم به سرور وب تعریف می‌کند. هنگامی که کاربر روی این دکمه کلیک می‌کند، مرورگر داده‌های فرم را با استفاده از متدی که توسط ویژگی method همان تگ تعریف شده است، به URL مشخص‌شده در ویژگی action تگ <form> ارسال می‌کند.

value="Submit": متنی که روی دکمه نمایش داده می‌شود

2.8.1.11. دکمه ریست

bouton de type reset

`balise HTML`	<input type="reset" value="Reset" name="cmdRétablir">
`attributs`	type="reset": دکمه‌ را به‌عنوان دکمهٔ بازنشانی فرم تعریف می‌کند. وقتی کاربر روی این دکمه کلیک کند، مرورگر فرم را به حالتی که در ابتدا دریافت شده بود بازمی‌گرداند. value="Reset" : متنی که روی دکمه نمایش داده می‌شود

2.8.1.12. میدان مخفی

champ caché

balise HTML

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

attributs

type="hidden": مشخص می‌کند که این یک فیلد پنهان است. فیلد پنهان بخشی از فرم است اما به کاربر نمایش داده نمی‌شود. با این حال، اگر کاربر از مرورگر خود بخواهد کد منبع را نمایش دهد، وجود تگ <input type="hidden" value="..."> را خواهد دید و در نتیجه مقدار فیلد پنهان را مشاهده خواهد کرد.

value="aValue": مقدار فیلد مخفی.

هدف از یک فیلد مخفی چیست؟ این فیلد به سرور وب اجازه می‌دهد تا اطلاعات را در طول درخواست‌های یک مشتری حفظ کند. یک اپلیکیشن خرید آنلاین را در نظر بگیرید. مشتری در صفحه اول کاتالوگ، یک قلم اولیه به نام art1 را به تعداد q1 خریداری می‌کند، سپس به صفحه جدیدی در کاتالوگ می‌رود. برای به خاطر سپردن اینکه مشتری کالاهای q1 و art1 را خریداری کرده است، سرور می‌تواند این دو قطعه اطلاعات را در یک فیلد مخفی در فرم وب صفحه جدید قرار دهد. در این صفحهٔ جدید، مشتری اقلام q2 و art2 را خریداری می‌کند. هنگامی که داده‌های این فرم دوم به سرور ارسال می‌شود، سرور نه تنها اطلاعات را دریافت خواهد کرد (q2,art2) بلکه همچنین (q1,art1)، که این مورد نیز به عنوان یک فیلد پنهان که کاربر نمی‌تواند آن را تغییر دهد، بخشی از فرم است. سرور وب سپس اطلاعات (q1,art1) و (q2,art2) را در یک فیلد مخفی جدید قرار داده و یک صفحه کاتالوگ جدید ارسال می‌کند. و به همین ترتیب.

2.8.2. ارسال مقادیر فرم به سرور وب از سوی کلاینت وب

در بخش قبلی، اشاره کردیم که کلاینت وب برای ارسال مقادیر فرم نمایش‌داده‌شده به یک وب‌سرور، دو روش در اختیار دارد: روش‌های GET و POST. بیایید مثالی را بررسی کنیم تا تفاوت بین این دو روش را ببینیم. ما به مثال قبلی بازمی‌گردیم و آن را به شرح زیر پیاده‌سازی می‌کنیم:

یک مرورگر فرم URL مثال را از یک سرور وب درخواست می‌کند
پس از دریافت فرم، آن را پر می‌کنیم
قبل از ارسال مقادیر فرم به وب سرور با کلیک بر روی دکمه Envoyer از نوع submit، وب سرور را متوقف کرده و آن را با سرور عمومی TCP که قبلاً استفاده شده بود، جایگزین می‌کنیم. به یاد داشته باشید که این سرور خطوط متنی را که توسط کلاینت وب برای آن ارسال می‌شود، روی صفحه نمایش می‌دهد. به این ترتیب، دقیقاً متوجه خواهیم شد که مرورگر چه چیزی ارسال می‌کند.

فرم به شرح زیر پر می‌شود:

سرور URL مورد استفاده برای این سند به شرح زیر است:

2.8.2.1. متد GET

سند HTML طوری پیکربندی شده است که مرورگر از روش GET برای ارسال مقادیر فرم به سرور وب استفاده کند. بنابراین ما نوشته‌ایم:

    <form method="GET" >

ما وب‌سرور را متوقف کرده و سرور عمومی TCP خود را روی پورت ۸۱ راه‌اندازی می‌کنیم:

E:\data\serge\JAVA\SOCKETS\serveur générique>java serveurTCPgenerique 81
Serveur générique lancé sur le port 81

اکنون، به مرورگر خود بازمی‌گردیم تا داده‌های فرم را با استفاده از دکمه Envoyer به وب‌سرور ارسال کنیم:

این چیزی است که سرور عمومی TCP دریافت می‌کند:

<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area
Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd
.ms-powerpoint, application/vnd.ms-excel, */*
<-- Referer: http://localhost:81/html/balises.htm
<-- Accept-Language: fr
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
<-- Host: localhost:81
<-- Connection: Keep-Alive
<--

همه چیز در هدر اول، HTTP، که توسط مرورگر ارسال شده است، وجود دارد:

<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area
Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1

می‌توانیم ببینیم که این بسیار پیچیده‌تر از هر چیزی است که تاکنون با آن مواجه شده‌ایم. از نحو GET URL HTTP/1.1 استفاده می‌کند، اما در شکلی خاص: GET URL?param1=value1&param2=value2&... HTTP/1.1، که در آن مقادیر parami نام کنترل‌های فرم وب و مقادیر، مقادیر مرتبط با آن‌ها هستند. بیایید نگاهی دقیق‌تر به آن‌ها بیندازیم. در زیر جدولی با سه ستون آمده است:

ستون ۱: تعریف کنترل HTML را از مثال نشان می‌دهد
ستون ۲: نشان می‌دهد که این کنترل چگونه در یک مرورگر نمایش داده می‌شود
ستون ۳: مقدار ارسال‌شده توسط مرورگر به سرور برای کنترل در ستون ۱ را، در شکلی که در درخواست GET از مثال دارد، نشان می‌دهد.

کنترل HTML	نمایشی	مقادیر بازگشتی
<input type="radio" value="Yes" name="R1">بله <input type="radio" name="R1" value="no" checked>خیر		R1=بله - مقدار ویژگی value دکمه رادیویی که توسط کاربر انتخاب شده است.
<input type="checkbox" name="C1" value="one">1 <input type="checkbox" name="C2" value="two" checked>2 <input type="checkbox" name="C3" value="three">3		C1=one C2=two - مقادیر ویژگی‌های value برای چک‌باکس‌هایی که توسط کاربر تیک خورده‌اند
<input type="text" name="txtSaisie" size="20" value="چند کلمه">		txtInput=وب+برنامه‌نویسی - متنی که کاربر در فیلد ورودی تایپ کرده است. فاصله‌ها با علامت + جایگزین شده‌اند
<input type="password" name="txtMdp" size="20" value="unMotDePasse">		txtPassword=thisissecret - متنی که کاربر در فیلد ورودی تایپ می‌کند
<textarea rows="2" name="areaSaisie" cols="20"> line1 line2 line3 </textarea>		input-area=مبانی+%0D%0A برنامه‌نویسی+وب - متنی که کاربر در فیلد ورودی تایپ می‌کند. %OD%OA نشانگر پایان خط است. فاصله‌ها با علامت + جایگزین شده‌اند
<select size="1" name="cmbValeurs"> <option>option1</option> <option selected>option2</option> <option>option3</option> </select>		cmbValues=option3 - مقداری که توسط کاربر از لیست تک‌انتخابی انتخاب شده است
<select size="3" name="lst1"> <option selected>list1</option> <option>list2</option> <option>list3</option> <option>list4</option> <option>list5</option> </select>		lst1=list3 - مقداری که توسط کاربر از لیست تک‌انتخابی انتخاب شده است
<select size="3" name="lst2" multiple> <option selected>list1</option> <option>list2</option> <option selected>list3</option> <option>list4</option> <option>list5</option> </select>		lst2=list1 lst2=list3 - مقادیری که توسط کاربر از لیست چندگزینه‌ای انتخاب شده‌اند
<input type="submit" value="ارسال" name="cmdRenvoyer">		cmdResend=Submit - نام و ویژگی (value) دکمه‌ای که برای ارسال داده‌های فرم به سرور استفاده می‌شود
<input type="hidden" name="secret" value="uneValeur">		secret=aValue - ویژگی value از فیلد مخفی

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

این دقیقاً مشابه همان چیزی است که در ابتدا، قبل از پر شدن فرم، دریافت شده بود. برای درک دلیل این موضوع، باید دوباره به URL که توسط مرورگر هنگام کلیک کاربر روی دکمه Envoyer درخواست می‌شود، نگاه کنیم:

<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area
Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1

URL درخواستی، /html/balises.htm است. علاوه بر این، مقادیر فرم به این URL ارسال می‌شوند. فعلاً، URL /html/balises.htm که یک صفحهٔ ایستا است، از این مقادیر استفاده نمی‌کند. در نتیجه، GET قبلی معادل است با

<-- GET /html/balises.htm HTTP/1.1

و به همین دلیل سرور صفحهٔ اصلی را دوباره برای ما ارسال کرد. توجه داشته باشید که مرورگر در واقع URL کامل درخواستی را نمایش می‌دهد:

2.8.2.2. روش POST

سند HTML طوری پیکربندی شده است که مرورگر اکنون از روش POST برای ارسال مقادیر فرم به سرور وب استفاده می‌کند:

    <form method="POST" >

ما وب‌سرور را متوقف کرده و سرور عمومی TCP (که پیش‌تر با آن مواجه شده‌ایم اما برای این منظور اندکی تغییر یافته است) را روی پورت 81 راه‌اندازی می‌کنیم:

E:\data\serge\JAVA\SOCKETS\serveur générique>java serveurTCPgenerique2 81
Serveur générique lancé sur le port 81

اکنون، به مرورگر خود بازمی‌گردیم تا داده‌های فرم را با استفاده از دکمه ارسال (Submit) به وب‌سرور ارسال کنیم:

این چیزی است که سرور عمومی TCP دریافت می‌کند:

<-- POST /html/balises.htm HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd
.ms-powerpoint, application/vnd.ms-excel, */*
<-- Referer: http://localhost:81/html/balises.htm
<-- Accept-Language: fr
<-- Content-Type: application/x-www-form-urlencoded
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
<-- Host: localhost:81
<-- Content-Length: 210
<-- Connection: Keep-Alive
<-- Cache-Control: no-cache
<--
<-- R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur

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

سربرگ اصلی HTTP دیگر GET نیست بلکه POST است. سینتکس POST URL HTTP/1.1 است، که در آن URL همان URL درخواستی توسط مرورگر است. در عین حال، POST نشان می‌دهد که مرورگر داده‌هایی برای ارسال به سرور دارد.
خط `Content-Type: application/x-www-form-urlencoded` نوع داده‌ای را که مرورگر ارسال می‌کند مشخص می‌کند. این داده‌های فرم (x-www-form) هستند که به صورت URL-encoded درآمده‌اند. این رمزگذاری تضمین می‌کند که برخی کاراکترها در داده‌ی ارسال‌شده تبدیل شوند تا سرور آن‌ها را اشتباه تفسیر نکند. برای مثال، یک فاصله با + جایگزین می‌شود و کاراکتر پایان خط با %OD%OA,... به‌طور کلی، تمام کاراکترهای موجود در داده‌ها که ممکن است توسط سرور اشتباه تفسیر شوند (&، +، % و غیره) به %XX تبدیل می‌شوند، که در آن XX کد هگزادسیمال آن‌ها است.
خط `Content-Length: 210` به سرور می‌گوید که کلاینت پس از پایان سربرگ‌های `HTTP`، `c.a.d` و غیره، و پس از خط خالی که پایان سربرگ‌ها را اعلام می‌کند، چه تعداد کاراکتر ارسال خواهد کرد.
داده‌ها (۲۱۰ کاراکتر): R1=Yes&C1=one&C2=two&txtSaisie=web+programming&txtMdp=thisissecret&areaSaisie=the+basics+of%0D%0Aweb+programming&cmbValeurs=choice3&lst1=list3&lst2=list1&lst2=list3&cmdRenvoyer=Send&secret=uneValeur

می‌توانیم ببینیم که داده‌های ارسال‌شده از طریق POST در همان فرمت داده‌های ارسال‌شده از طریق GET است.

آیا یک روش از روش دیگر بهتر است؟ ما دیده‌ایم که اگر مقادیر یک فرم توسط مرورگر با استفاده از روش GET ارسال شوند، مرورگر در فیلد Adresse خود، URL درخواستی را به شکل URL?param1=val1&param2=val2&.... نمایش می‌داد. این را می‌توان یا یک مزیت یا یک معایب در نظر گرفت:

یک مزیت اگر می‌خواهید به کاربر اجازه دهید این URL پیکربندی‌شده را به نشانک‌های خود اضافه کند
یک معایب اگر نمی‌خواهید کاربر به اطلاعات خاصی در فرم، مانند فیلدهای پنهان، دسترسی داشته باشد، برای مثال

از این پس، ما تقریباً منحصراً در فرم‌های خود از روش POST استفاده خواهیم کرد.

2.8.2.3. استخراج مقادیر از یک فرم وب

یک صفحهٔ ایستا که توسط کلاینت درخواست شده و همچنین پارامترها را از طریق POST یا GET ارسال می‌کند، به هیچ وجه نمی‌تواند این پارامترها را بازیابی کند. فقط یک برنامه می‌تواند این کار را انجام دهد و این برنامه است که سپس پاسخی را برای مشتری تولید می‌کند – پاسخی که پویا خواهد بود و عموماً به پارامترهای دریافتی بستگی دارد. این موضوع در حوزه برنامه‌نویسی وب قرار می‌گیرد، موضوعی که در فصل بعدی با معرفی فناوری‌های برنامه‌نویسی وب جاوا: سرولت‌ها و صفحات JSP، به تفصیل به آن خواهیم پرداخت.