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، لاکروآ، ایرویل - راهنمای کاربر 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 http://localhost/page1.htm معادل فایل <pws-DocumentRoot>\page1.htm است.
`<perl>`	ریشهٔ درخت دایرکتوری Perl. فایل اجرایی perl.exe معمولاً در <perl>\bin. قرار دارد.
`<php>`	ریشهٔ درخت زبان PHP. فایل اجرایی php.exe معمولاً در <php>. قرار دارد.
`<java>`	ریشهٔ درخت دایرکتوری Java. فایل‌های اجرایی مرتبط با 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>

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

آزمایش‌ها

test1

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

test2

سرور 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> قرار دهید
با استفاده از یک مرورگر به صفحه URL http://localhost/essai2.asp دسترسی پیدا کنید

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> قرار دهید
URL را درخواست کنید http://localhost/cgi-bin/essai3.pl

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

2.5.4. یک اسکریپت PHP (صفحه اصلی شخصی، پردازنده HyperText)

اسکریپت 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 بررسی کنید.

test1

سرور آپاچی را راه‌اندازی کنید
فایل essai4.php را در داخل <apache-DocumentRoot> قرار دهید
URL http://localhost/essai4.php را درخواست کنید

test2

سرور PWS را راه‌اندازی کنید
برای کسب اطلاعات، پیکربندی PWS را در مورد PHP بررسی کنید
essai4.php را در <pws-DocumentRoot>\php قرار دهید
http://localhost/essai4.php را درخواست کنید URL

2.5.5. یک اسکریپت JSP (Java Server Pages)

اسکریپت 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 است. نت‌اسکیپ برای این کار به افزونه‌ها نیاز دارد. تست‌های زیر را می‌توان انجام داد:

test1

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

test2

سرور 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 و هم توسط Netscape پشتیبانی می‌شود. اجرای آن نتایج یکسانی را به همراه دارد:

آزمایش‌ها

test1

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

test2

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

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 (محل‌یاب یکنواخت منبع) شناسایی می‌شوند. مرورگر فقط سربرگ‌های 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 معمولاً شکل زیر را دارد:

protocole://machine[:port]/path/info

با

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

یک مرورگر وقتی کاربر درخواست بارگذاری 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 یافت، بررسی نخواهیم کرد. برنامه‌های نرم‌افزاری متعددی وجود دارند که به شما امکان می‌دهند یک صفحه وب را بدون نوشتن حتی یک خط کد 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>...</TD>: برای تعریف یک سلول مثال‌ها: <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 تولید شده است. بنابراین، مرورگر برای دریافت تصویر مورد اشاره، درخواست http://localhost:81/images/univ01.gif را به URL ارسال می‌کند.
`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 روی سرور وب قرار دارد. در چارچوب مثال ما، مرورگر برای دریافت این تصویر پس‌زمینه، فایل URL 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 line3 </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>option2</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 خود را روی پورت 81 راه‌اندازی می‌کنیم:

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>خیر		- مقدار ویژگی 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=دو - مقادیر ویژگی‌های value برای چک‌باکس‌هایی که توسط کاربر تیک خورده‌اند
<input type="text" name="txtSaisie" size="20" value="a few words">		txtInput=وب+برنامه‌نویسی - متنی که کاربر در فیلد ورودی تایپ کرده است. فاصله‌ها با علامت + جایگزین شده‌اند
<input type="password" name="txtMdp" size="20" value="unMotDePasse">		txtPassword=thisissecret - متنی که کاربر در فیلد ورودی تایپ می‌کند
<textarea rows="2" name="areaSaisie" cols="20"> line1 خط ۲ line3 </textarea>		input-area=مبانی+%0D%0A برنامه‌نویسی+وب - متنی که کاربر در فیلد ورودی تایپ می‌کند. %OD%OA نشانگر پایان خط است. فاصله‌ها با علامت + جایگزین شده‌اند
<select size="1" name="cmbValeurs"> <option>انتخاب۱</option> <option selected>انتخاب2</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 ارسال می‌شد، مرورگر مقدار درخواستی URL را در فیلد Adresse در فرم URL?param1=val1&param2=val2&.... نمایش می‌دهد؟ این را می‌توان یا یک مزیت یا یک معایب در نظر گرفت:

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

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

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

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