Skip to content

2. مبانی

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

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

Machine Serveur

Image

۱۵ ماشین مشتری

شماره
نقش
مثال‌های رایج
1
OS Server
لینوکس، ویندوز
2
سرور وب
اپاچی (لینوکس، ویندوز)
IIS (NT)، PWS (Win9x)، Cassini (ویندوز + پلتفرم .NET) NET
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 (لینوکس، ویندوز)
Postgres (لینوکس، ویندوز)
Access (ویندوز)
SQL Server (ویندوز)
5
OS کلاینت
لینوکس، ویندوز
6
مرورگر وب
نت‌اسکیپ، اینترنت اکسپلورر، موزیلا، اپرا
7
اسکریپت‌های سمت کلاینت که در داخل مرورگر اجرا می‌شوند. این اسکریپت‌ها به هارد دیسک‌های ماشین کلاینت دسترسی ندارند.
VBscript (IE)
جاوااسکریپت (IE, Netscape)
PerlScript (IE)
اپلت‌ها JAVA

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

Image

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

شماره
نقش
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. Notations

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

نشانه‌گذاری
به معنای
<apache>
ریشهٔ درخت دایرکتوری سرور آپاچی
<apache-DocumentRoot>
دایرکتوری ریشه صفحات وب ارائه‌شده توسط آپاچی. صفحات وب باید در این دایرکتوری ریشه قرار گیرند. بنابراین، URL URL http://localhost/page1.htm با فایل <apache-DocumentRoot>\page1.htm مطابقت دارد.
<apache-cgi-bin>
ریشه درخت دایرکتوری مرتبط با نام مستعار cgi-bin، جایی که اسکریپت‌های CGI برای آپاچی می‌توانند قرار داده شوند. بنابراین، http://localhost/cgi-bin/test1.pl مربوط به فایل <apache-cgi-bin>\test1.pl است.
<IIS-DocumentRoot>
دایرکتوری ریشه صفحات وبی که توسط IIS، PWS یا Cassini ارائه می‌شوند. صفحات وب باید در زیر این دایرکتوری ریشه قرار گیرند. بنابراین، URL URL http://localhost/page1.htm به فایل <IIS-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.4. صفحات وب ایستا، صفحات وب پویا

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

  • PWS برای ماشین‌های Win9x
  • Cassini برای سیستم‌عامل‌های Windows 2000 و XP

فولدر <IIS-DocumentRoot> معمولاً فولدر [lecteur:\inetpub\wwwroot] است، که در آن [lecteur] درایوی (C، D و غیره) است که IIS روی آن نصب شده است. همین موضوع در مورد PWS نیز صدق می‌کند. برای Cassini، پوشه <IIS-DocumentRoot> بستگی به نحوه راه‌اندازی سرور دارد. ضمیمه نشان می‌دهد که سرور Cassini را می‌توان به صورت زیر در یک پنجره DOS (یا از طریق یک میانبر) راه‌اندازی کرد:

dos>webserver /port:N /path:"P" /vpath:"/V"

برنامه [WebServer]، که با نام سرور وب Cassini نیز شناخته می‌شود، سه پارامتر را می‌پذیرد:

  • /port: شماره پورت سرویس وب. می‌تواند هر مقداری باشد. مقدار پیش‌فرض 80 است
  • /path: مسیر فیزیکی یک پوشه روی دیسک
  • /vpath: پوشه مجازی مرتبط با پوشه فیزیکی قبلی. لطفاً توجه داشته باشید که نحو آن به جای /path=path، /vpath:path است، برخلاف آنچه در پنل راهنمای بالا ذکر شده است.

اگر Cassini به شکل زیر راه‌اندازی شود:

dos>webserver /port:N /path:"P" /vpath:"/"

در این صورت پوشه P ریشه درخت وب سرور Cassini است. بنابراین این پوشه است که توسط <IIS-DocumentRoot> به آن اشاره می‌شود. بنابراین، در مثال زیر:

dos12>webserver /path:"d:\data\devel\webmatrix" /vpath:"/"

سرور Cassini بر روی پورت ۸۰ اجرا خواهد شد و ریشه درخت دایرکتوری <IIS-DocumentRoot> آن، پوشه [d:\data\devel\webmatrix] است. صفحات وبی که باید آزمایش شوند باید در زیر این ریشه قرار گیرند.

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

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

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

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

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

آزمایش‌ها

Image

Test1

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

Test2

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

2.4.2. یک صفحه ASP (صفحه‌های فعال سرور)

اسکریپت 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>

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

Image

آزمایش

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

2.4.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 است. در صورت لزوم باید تنظیم شود. پس از اجرا توسط وب‌سرور، اسکریپت صفحه زیر را تولید می‌کند:

Image

آزمایش

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

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

2.4.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>

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

Image

آزمایش‌ها

Test1

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

Test2

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

2.4.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>

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

Image

آزمایش

  • اسکریپت 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.4.6. یک صفحه ASP.NET

اسکریپت heure1.aspx:

<html>
<head>
    <title>Démo asp.net </title>
</head>
<body>
    Il est <% =Date.Now.ToString("hh:mm:ss") %>
</body>
</html>

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

Image

این تست به یک دستگاه ویندوز نیاز دارد که پلتفرم .NET روی آن نصب شده باشد (به ضمیمه مراجعه کنید).

  • اسکریپت heure1.aspx را در <IIS-DocumentRoot> قرار دهید
  • سرور IIS/CASSINI را راه‌اندازی کنید
  • فایل URL را از http://localhost/heure1.aspx درخواست کنید

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

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

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

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

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

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

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

2.5.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، صفحه زیر نمایش داده خواهد شد:

Image

آزمایش

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

  • سرور آپاچی
  • اسکریپت vbs1.html در <apache-DocumentRoot>

  • با استفاده از مرورگر IE، URL http://localhost/vbs1.html را درخواست کنید

  • سرور IIS/PWS

  • اسکریپت vbs1.html در <pws-DocumentRoot>
  • URL http://localhost/vbs1.html را با مرورگر IE درخواست کنید

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

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

Image

آزمایش‌ها

  • سرور آپاچی
  • اسکریپت js1.html در <apache-DocumentRoot>

  • URL http://localhost/js1.html را با استفاده از مرورگر IE یا Netscape درخواست کنید

  • سرور IIS/PWS

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

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

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

Image

سرور

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

2.6.1. مدل OSI

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

Image

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

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

Image

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

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.6.2. مدل TCP/IP

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

Image

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

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

Image

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

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

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

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

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

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

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

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

2.6.3. پروتکل HTTP

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

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

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

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

با

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

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

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

برای بررسی تعاملات بین یک کلاینت و یک وب‌سرور، از ابزاری به نام curl استفاده خواهیم کرد. curl یک برنامه کاربردی است که به شما امکان می‌دهد به عنوان کلاینت برای سرویس‌های اینترنتی که از پروتکل‌های مختلفی (DOS, FTP, TELNET، GOPHER، ...). ابزار curl در http://curl.haxx.se/ در دسترس است. در اینجا، ترجیحاً باید نسخه win32-nossl ویندوز را دانلود کنیم، زیرا نسخه win32-ssl به DLLهای اضافی نیاز دارد که در بسته curl گنجانده نشده‌اند. این بسته حاوی مجموعه‌ای از فایل‌ها است که به سادگی باید در پوشه‌ای که از این پس آن را <curl> می‌نامیم، استخراج شوند. این پوشه حاوی یک فایل اجرایی به نام [curl.exe] است. این برنامهٔ کلاینت ما برای پرس‌وجو از سرورهای وب خواهد بود. بیایید یک پنجرهٔ Command Prompt را باز کنیم و به پوشهٔ <curl> برویم:

dos>dir curl.exe
22/03/2004  13:29              299 008 curl.exe

E:\curl2>curl
curl: try 'curl --help' for more information

dos>curl --help | more
Usage: curl [options...] <url>
Options: (H) means HTTP/HTTPS only, (F) means FTP only
 -a/--append        Append to target file when uploading (F)
 -A/--user-agent <string> User-Agent to send to server (H)
    --anyauth       Tell curl to choose authentication method (H)
 -b/--cookie <name=string/file> Cookie string or file to read cookies from (H)
    --basic         Enable HTTP Basic Authentication (H)
 -B/--use-ascii     Use ASCII/text transfer
 -c/--cookie-jar <file> Write cookies to this file after operation (H)
 ....

بیایید از این برنامه برای پرس‌وجو از یک سرور وب استفاده کنیم و تبادلات بین کلاینت و سرور را بررسی کنیم. ما در وضعیت زیر خواهیم بود:

Image

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

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

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

Image

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

Image

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

dos>curl http://localhost/aspnet/chap1/statique1.html
<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>

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

Image

با این حال، در اینجا سربرگ‌های HTTP را مشاهده نکرده‌ایم. این به این دلیل است که [curl] به‌طور پیش‌فرض آن‌ها را نمایش نمی‌دهد. گزینه --include اجازه می‌دهد تا آن‌ها نمایش داده شوند:

E:\curl2>curl --include http://localhost/aspnet/chap1/statique1.html
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Mon, 22 Mar 2004 16:51:00 GMT
X-AspNet-Version: 1.1.4322
Cache-Control: public
ETag: "1C4102CEE8C6400:1C4102CFBBE2250"
Content-Type: text/html
Content-Length: 161
Connection: Close

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

سرور در واقع مجموعه‌ای از سربرگ‌ها را ارسال کرد HTTP و پس از آن یک خط خالی:

HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Mon, 22 Mar 2004 16:51:00 GMT
X-AspNet-Version: 1.1.4322
Cache-Control: public
ETag: "1C4102CEE8C6400:1C4102CFBBE2250"
Content-Type: text/html
Content-Length: 161
Connection: Close

HTTP/1.1 200 OK
سرور اعلام می‌کند
  • که از پروتکل HTTP نسخه ۱.۱ پشتیبانی می‌کند
  • که دارای منبع درخواستی است (کد وضعیت 200، پیام OK) 
Server:
سرور خود را شناسایی می‌کند. در این مورد، یک سرور کاسینی است.
Date: ...
تاریخ و زمان پاسخ
X-ASPNet-Version: ...
سربرگ اختصاصی سرور کاسینی
Cache-Control: public
راهنمایی می‌کند که آیا پاسخ ارسال‌شده به کلاینت قابل کش شدن است یا خیر. ویژگی [public] به کلاینت نشان می‌دهد که می‌تواند صفحه را در کش ذخیره کند. ویژگی [no-cache] به کلاینت می‌گفت که نباید صفحه را در کش ذخیره کند.
ETag:
...
Content-type: text/html
سرور اعلام می‌کند که متن را در قالب HTML (html) ارسال خواهد کرد.
Content-Length: 161
تعداد بایت‌های سند پس از سربرگ‌های HTTP. این عدد در واقع اندازهٔ فایل essai1.html به بایت است:
dos>dir essai1.html

08/07/2002  10:00                  161 essai1.html

Connection: close
سرور اعلام می‌کند که پس از ارسال سند، اتصال را خواهد بست

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

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

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

Image

بیایید بار دیگر از کلاینت خود [curl] برای درخواست همان منبع استفاده کنیم، اما این بار فقط هدرهای پاسخ را درخواست کنیم:

dos>curl --head http://localhost/aspnet/chap1/statique1.html
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Tue, 23 Mar 2004 07:11:54 GMT
Cache-Control: public
ETag: "1C410A504D60680:1C410A58621AD3E"
Content-Type: text/html
Content-Length: 161
Connection: Close

ما همان نتیجهٔ قبل را بدون سند HTML به‌دست می‌آوریم. اکنون بیایید با استفاده از یک مرورگر و کلاینت عمومی TCP یک تصویر را درخواست کنیم. ابتدا با استفاده از مرورگر:

Image

فایل univ01.gif دارای ۴۰۵۲ بایت است:

dos>dir univ01.gif
23/03/2004  08:14             4 052 univ01.gif

اکنون بیایید از کلاینت [curl] استفاده کنیم:

dos>curl --head http://localhost/aspnet/chap1/univ01.gif
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Tue, 23 Mar 2004 07:18:44 GMT
Cache-Control: public
ETag: "1C410A6795D7500:1C410A6868B1476"
Content-Type: image/gif
Content-Length: 4052
Connection: Close

نکات زیر باید در چرخه درخواست-پاسخ فوق مورد توجه قرار گیرد:

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

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

اکنون، بیایید این سؤال را از خود بپرسیم: اگر بخواهیم برنامه‌ای بنویسیم که با یک سرور وب «ارتباط» برقرار کند، این برنامه باید چه دستوراتی را برای بازیابی یک منبع مشخص به سرور وب ارسال کند؟ در مثال‌های قبلی، ما دیدیم که کلاینت چه چیزی دریافت کرد، اما نه اینکه چه چیزی ارسال کرد. ما از گزینه [--verbose] در curl استفاده خواهیم کرد تا ببینیم کلاینت چه چیزی را به سرور ارسال می‌کند. بیایید با درخواست صفحه ایستا شروع کنیم:

dos>curl --verbose http://localhost/aspnet/chap1/statique1.html
* About to connect() to localhost:80
* Connected to portable1_tahe (127.0.0.1) port 80
> GET /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

< HTTP/1.1 200 OK
< Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
< Date: Tue, 23 Mar 2004 07:37:06 GMT
< Cache-Control: public
< ETag: "1C410A504D60680:1C410A58621AD3E"
< Content-Type: text/html
< Content-Length: 161
< Connection: Close
<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>
* Closing connection #0

ابتدا، کلاینت [curl] یک اتصال TCP/IP به پورت ۸۰ روی ماشین localhost (=127.0.0.1) برقرار می‌کند.

* About to connect() to localhost:80
* Connected to portable1_tahe (127.0.0.1) port 80

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

GET /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

درخواست HTTP از یک کلاینت وب دو عملکرد دارد:

  • برای مشخص کردن منبع مورد نظر. این نقش خط اول، GET است.
  • برای ارائه اطلاعاتی درباره کلاینتی که درخواست را ارسال می‌کند تا سرور بتواند، در صورت لزوم، پاسخ خود را متناسب با این نوع خاص کلاینت تنظیم کند.

معنای خطوط ارسال‌شده توسط کلاینت [curl] به شرح زیر است:

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

بیایید عملیات را با استفاده از گزینه --head با [curl] تکرار کنیم:

dos>curl --verbose --head --output reponse.txt http://localhost/aspnet/chap1/statique1.html
* About to connect() to localhost:80
* Connected to portable1_tahe (127.0.0.1) port 80
> HEAD /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

< HTTP/1.1 200 OK
< Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
< Date: Tue, 23 Mar 2004 07:54:22 GMT
< Cache-Control: public
< ETag: "1C410A504D60680:1C410A58621AD3E"
< Content-Type: text/html
< Content-Length: 161
< Connection: Close

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

HEAD /aspnet/chap1/statique1.html HTTP/1.1
User-Agent: curl/7.10.8 (win32) libcurl/7.10.8 OpenSSL/0.9.7a zlib/1.1.4
Host: localhost
Pragma: no-cache
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

تنها دستوری که درخواست منبع را می‌کند تغییر کرده است. به جای درخواست GET، اکنون درخواست HEAD داریم. این درخواست مشخص می‌کند که پاسخ سرور باید به سربرگ‌های HTTP محدود باشد و نباید منبع درخواست‌شده را ارسال کند. اسکرین‌شات بالا سربرگ‌های دریافتی HTTP را نشان نمی‌دهد. این سربرگ‌ها به دلیل گزینه [--output reponse.txt] در فرمان [curl] به یک فایل نوشته شدند:

dos>more reponse.txt
HTTP/1.1 200 OK
Server: Microsoft ASP.NET Web Matrix Server/0.6.0.0
Date: Tue, 23 Mar 2004 07:54:22 GMT
Cache-Control: public
ETag: "1C410A504D60680:1C410A58621AD3E"
Content-Type: text/html
Content-Length: 161
Connection: Close

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

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

Image

در مورد درخواست (که اغلب به آن «پرس‌وجو» گفته می‌شود) از سوی کلاینت، بخش [Document] معمولاً وجود ندارد. با این حال، کلاینت می‌تواند یک سند را برای سرور ارسال کند. این کار را با استفاده از دستوری به نام PUT انجام می‌دهد. دو فرمان استاندارد برای درخواست یک منبع، GET و POST هستند. مورد دوم در ادامه با جزئیات بیشتری مورد بحث قرار خواهد گرفت. دستور HEAD برای درخواست فقط سربرگ‌های HTTP استفاده می‌شود. دستورات GET و POST بیشترین استفاده را در میان کلاینت‌های وب مبتنی بر مرورگر دارند.

در پاسخ به درخواست کلاینت، سرور پاسخی با همان ساختار ارسال می‌کند. منبع درخواستی در بخش [Document] منتقل می‌شود، مگر اینکه فرمان کلاینت HEAD بوده باشد، که در این صورت تنها سربرگ‌های HTTP ارسال می‌شوند.

2.7. زبان HTML

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

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

2.7.1. یک مثال

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

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

Image

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

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

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

  1. <head>...</head>: این بخش غیرقابل نمایش سند است. این بخش اطلاعاتی را در اختیار مرورگری که سند را نمایش می‌دهد قرار می‌دهد. این بخش اغلب شامل تگ <title>...</title> است که متنی را برای نمایش در نوار عنوان مرورگر تعیین می‌کند. همچنین ممکن است شامل تگ‌های دیگری، به‌ویژه آنهایی که کلمات کلیدی سند را تعریف می‌کنند و بعداً توسط موتورهای جستجو استفاده می‌شوند، باشد. این بخش همچنین ممکن است حاوی اسکریپت‌ها باشد، که معمولاً به زبان جاوااسکریپت یا وی‌بی‌اسکریپت نوشته می‌شوند و توسط مرورگر اجرا خواهند شد.
  2. <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 را درخواست خواهد کرد.

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

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

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

Image

کد 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="بله" 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.7.1.1. فرم

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

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

Image

Image

champ de saisie
<input type="text" name="txtSaisie" size="20" value="a few words">
<input type="password" name="txtMdp" size="20" value="unMotDePasse">
balise HTML
<input type="..." name="..." size=".." value="..">
برچسب `input` برای کنترل‌های مختلف استفاده می‌شود. این ویژگی `type` است که بین این کنترل‌های مختلف تمایز قائل می‌شود.
attributs
type="text": مشخص می‌کند که این یک فیلد ورودی متنی است
type="password": کاراکترها در فیلد ورودی با ستاره (* ) جایگزین می‌شوند. این تنها تفاوت آن با یک فیلد ورودی استاندارد است. این نوع کنترل برای وارد کردن رمزهای عبور مناسب است.
size="20": تعداد کاراکترهای قابل مشاهده در فیلد – مانع از وارد کردن کاراکترهای بیشتر نمی‌شود
name="txtSaisie": نام کنترل
value="چند کلمه": متنی که در فیلد ورودی نمایش داده می‌شود.

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

Image

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

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

Image

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.7.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

Image

balise HTML
<input type="checkbox" attribute2="value2" ....>متن
یک چک‌باکس را همراه با متنی در کنار آن نمایش می‌دهد.
attributs
name="C1": نام کنترل. چک‌باکس‌ها ممکن است نام یکسانی داشته باشند یا نداشته باشند. چک‌باکس‌هایی که نام یکسان دارند، یک گروه از چک‌باکس‌های مرتبط را تشکیل می‌دهند.
value="value": مقداری که به چک‌باکس اختصاص داده می‌شود. این مقدار نباید با متنی که در کنار دکمه رادیویی نمایش داده می‌شود اشتباه گرفته شود. مورد دوم صرفاً برای اهداف نمایشی است.
checked: اگر این کلمه کلیدی وجود داشته باشد، دکمه رادیویی انتخاب شده است؛ در غیر این صورت، انتخاب نشده است.

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

Combo
<select size="1" name="cmbValeurs">
<option>choix1</option>
<option selected>انتخاب۲</option>
<option>choix3</option>
</select>

Image

balise HTML
<select size=".." name="..">
<option [selected]>...</option>
...
</select>
متن بین تگ‌های <option>...</option> را در یک لیست نمایش می‌دهد
attributs
name="cmbValeurs": نام کنترل.
size="1": تعداد آیتم‌های قابل مشاهده لیست. size="1" باعث می‌شود لیست مانند یک کادر ترکیبی رفتار کند.
selected: اگر این کلمه کلیدی برای یک آیتم لیست وجود داشته باشد، آن آیتم در لیست به‌صورت انتخاب‌شده نمایش داده می‌شود. در مثال بالا، آیتم لیست choix2 هنگام اولین نمایش در کادر ترکیبی به‌عنوان آیتم انتخاب‌شده ظاهر می‌شود.

2.7.1.7. فهرست تک‌گزینی

liste à sélection unique
<select size="3" name="lst1">
<option selected>list1</option>
<option>liste2</option>
<option>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>

Image

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

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

liste à sélection unique
<select size="3" name="lst2" multiple>
<option selected>list1</option>
<option>liste2</option>
<option selected>list3</option>
<option>liste4</option>
<option>liste5</option>
</select>

Image

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

2.7.1.9. دکمه

bouton de type button
<input type="button" value="Clear" name="cmdEffacer" onclick="clear()">

Image

balise HTML
<input type="button" value="..." name="..." onclick="effacer()" ....>
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.7.1.10. دکمه ارسال

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

Image

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

2.7.1.11. دکمه ریست

bouton de type reset
<input type="reset" value="Reset" name="cmdRétablir">

Image

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

2.7.1.12. میدان مخفی

champ caché
<input type="hidden" name="secret" value="uneValeur">
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.7.2. ارسال مقادیر فرم به سرور وب از سوی کلاینت وب

در بخش قبلی اشاره کردیم که کلاینت وب برای ارسال مقادیر فرم نمایش‌داده‌شده به یک وب‌سرور، دو روش در اختیار دارد: روش‌های GET و POST. بیایید با بررسی یک مثال، تفاوت بین این دو روش را ببینیم. صفحه بررسی‌شده در بالا یک صفحه ایستا است. برای دسترسی به هدرهای HTTP ارسال‌شده توسط مرورگری که این سند را درخواست می‌کند، آن را به یک صفحه پویا برای یک سرور وب .NET (IIS یا Cassini) تبدیل می‌کنیم. تمرکز در اینجا بر فناوری .NET – که در فصل بعدی به آن خواهیم پرداخت – نیست، بلکه بر ارتباط کلاینت-سرور است. کد صفحه ASP.NET به شرح زیر است:

<%@ Page Language="vb" CodeBehind="params.aspx.vb" AutoEventWireup="false" Inherits="ConsoleApplication1.params" %>
<script runat="server">

    Private Sub Page_Init(Byval Sender as Object, Byval e as System.EventArgs)
       ' ذخیره پرس‌وجو
    saveRequest
  end sub
  Private Sub saveRequest
       'درخواست فعلی را به عنوان request.txt در پوشه صفحه ذخیره می‌کند
    dim requestFileName as String=Me.MapPath(Me.TemplateSourceDirectory)+"\request.txt"
    Me.Request.SaveAs(requestFileName,true)
  end sub
</script>

<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">
....
    </body>
</html>

به محتوای HTML صفحه مورد بررسی، بخشی از کد در VB.NET اضافه می‌کنیم. ما در مورد این کد توضیحی نمی‌دهیم، جز اینکه هر بار که سند فوق فراخوانی می‌شود، وب‌سرور درخواست کلاینت وب را در فایل [request.txt] در پوشه‌ای که سند فراخوانی‌شده را در خود دارد، ذخیره می‌کند.

2.7.2.1. روش GET

بیایید یک تست اولیه انجام دهیم، جایی که در کد HTML درون سند، تگ FORM به صورت زیر تعریف شده است:


        <form method="get">

سند قبلی (HTML + کد VB) با نام [params.aspx] فراخوانی می‌شود. این فایل در ساختار دایرکتوری وب‌سرور در مسیر .NET (IIS/Cassini) قرار دارد و از طریق نشانی http://localhost/aspnet/chap1/params.aspx قابل دسترسی است:

Image

مرورگر به‌تازگی درخواستی ارسال کرده و می‌دانیم که این درخواست در فایل [request.txt] ثبت شده است. بیایید محتویات آن را بررسی کنیم:

GET /aspnet/chap1/params.aspx HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113

ما عناصری را می‌بینیم که قبلاً با مشتری [curl] مواجه شده‌اند. موارد دیگر برای اولین بار ظاهر می‌شوند:

Connection: keep-alive
کلاینت از سرور می‌خواهد که پس از پاسخ، اتصال را قطع نکند. این کار به کلاینت اجازه می‌دهد تا از همان اتصال برای یک درخواست بعدی استفاده کند. اتصال به طور نامحدود باز نمی‌ماند. سرور پس از یک دوره طولانی عدم فعالیت، آن را قطع خواهد کرد.
Keep-Alive
مدت زمان، به ثانیه، که اتصال [Keep-Alive] باز باقی می‌ماند
Accept-Charset
مجموعه کاراکتری که کلاینت می‌تواند از آن پشتیبانی کند
Accept-Language
فهرست زبان‌های ترجیحی مشتری.

ما فرم را به شرح زیر پر می‌کنیم:

Image

ما از دکمه [Envoyer] بالا استفاده می‌کنیم. کد آن، HTML، به شرح زیر است:

<form method="get">
    ...
    <input type="submit" value="Envoyer">
    ...
</form>

هنگامی که یک دکمه از نوع [Submit] کلیک می‌شود، مرورگر پارامترهای فرم (برچسب <form>) را به URL مشخص‌شده در ویژگی [action] برچسب <form action="URL">، در صورت وجود، ارسال می‌کند. اگر این ویژگی وجود نداشته باشد، پارامترهای فرم به URL که فرم را ارائه کرده است ارسال می‌شوند. در اینجا نیز همین حالت برقرار است. بنابراین دکمه [Envoyer] باید درخواستی را از مرورگر به URL [http://localhost/aspnet/chap1/params.aspx] ارسال کند و پارامترهای فرم را به آن بفرستد. از آنجایی که صفحه [params.aspx] درخواست دریافت‌شده را ذخیره می‌کند، باید بتوانیم ببینیم که کلاینت این پارامترها را چگونه ارسال کرده است. بیایید امتحانش کنیم. ما روی دکمه [Envoyer] کلیک می‌کنیم. پاسخ زیر را از مرورگر دریافت می‌کنیم:

Image

این صفحهٔ اولیه است، اما می‌توانیم ببینیم که مقدار «URL» در فیلد «[Adresse]» مرورگر تغییر کرده است. اکنون به این صورت درآمده است:

http://localhost/aspnet/chap1/params.aspx?R1=Yes&C1=one&C2=two&txtSaisie=web+programming&txtMdp=this-is-secret&areaSaisie=the+basics+of+0D%0Aweb+programming&cmbValeurs=choice3&lst1=list3&lst2=list1&lst2=list3&cmdRenvoyer=Submit&secret=uneValeur

می‌توانیم ببینیم که انتخاب‌های انجام‌شده در فرم در URL منعکس شده است. بیایید نگاهی به محتویات فایل [request.txt] بیندازیم که درخواست کلاینت را ذخیره کرده است:

GET /aspnet/chap1/params.aspx?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/1.1
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/aspnet/chap1/params.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113

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

GET URL HTTP/1.1
پارامترهای فرم به URL سند در قالب ؟param1=val1&param2=val2&... ضمیمه شده‌اند.
Referer
با این هدر، HTTP، کلاینت نشان می‌دهد که هنگام ارسال درخواست، در حال نمایش URL سند بوده است

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

  • ستون ۱: تعریف کنترل 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=دو
- مقادیر ویژگی‌های 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>choice1</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="Send" name="cmdRenvoyer">
 
cmdResend=Submit
- نام و ویژگی (value) دکمه‌ای که برای ارسال داده‌های فرم به سرور استفاده می‌شود
<input type="hidden" name="secret" value="uneValeur">
 
secret=aValue
- ویژگی value از فیلد مخفی

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

GET /aspnet/chap1/params.aspx?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/1.1

سرور وب پارامترها را به URL در سند http://localhost/aspnet/chap1/params.aspx و c.a.d در سندی که ما در ابتدا ایجاد کردیم، منتقل کرد. ما هیچ کدی برای بازیابی و پردازش پارامترهای ارسال‌شده توسط کلاینت ننوشته‌ایم. بنابراین، گویی درخواست کلاینت صرفاً به این صورت است:

GET /aspnet/chap1/params.aspx

به همین دلیل، در پاسخ به دکمه [Envoyer] ما، همان صفحه‌ای را دریافت کردیم که در ابتدا با درخواست URL و [http://localhost/aspnet/chap1/params.aspx] بدون هیچ پارامتری به دست آمده بود.

2.7.2.2. روش POST

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

    <form method="POST" >

ما سند جدید را از طریق URL [http://localhost/aspnet/chap1/params.aspx] درخواست می‌کنیم، فرم را همان‌طور که برای روش GET پر کردیم، پر می‌کنیم و پارامترها را با استفاده از دکمه [Envoyer] به سرور ارسال می‌کنیم. ما صفحه پاسخ زیر را از سرور دریافت می‌کنیم:

Image

بنابراین ما همان نتیجه را مانند روش‌های GET و c.a.d دریافت می‌کنیم: صفحه اولیه. یک تفاوت قابل توجه وجود دارد: در فیلد [Adresse] مرورگر، پارامترهای ارسال‌شده نمایش داده نمی‌شوند. اکنون، بیایید به درخواست ارسال‌شده توسط کلاینت که در فایل [request.txt] ذخیره شده است، نگاهی بیندازیم:

POST /aspnet/chap1/params.aspx HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Content-Length: 210
Content-Type: application/x-www-form-urlencoded
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/aspnet/chap1/params.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113

R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecrey&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur

ورودی‌های جدیدی در پرس‌وجوی مشتری HTTP ظاهر شده‌اند:

POST URL HTTP/1.1
پرس‌وجوی GET با پرس‌وجوی POST جایگزین شده است. پارامترها دیگر در این خط اول پرس‌وجو حضور ندارند. مشاهده می‌شود که اکنون آن‌ها پس از پرس‌وجو HTTP و پس از یک خط خالی قرار گرفته‌اند. رمزگذاری آن‌ها با پرس‌وجو GET یکسان است.
Content-Length
تعداد کاراکترهای «ارسال‌شده»، c.a.d. تعداد کاراکترهایی که وب‌سرور باید پس از دریافت سربرگ‌ها HTTP بخواند تا سند ارسال‌شده توسط کلاینت را بازیابی کند. سند مورد نظر در اینجا فهرست مقادیر فرم است.
Content-type
نوع سندی را مشخص می‌کند که کلاینت پس از سربرگ‌ها ارسال خواهد کرد HTTP. نوع [application/x-www-form-urlencoded] نشان می‌دهد که این سند حاوی مقادیر فرم است.

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

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

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

2.8. Conclusion

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

  • ابزارها و فناوری‌های مختلف موجود (جاوا، ASP، asp.net، PHP، پرل، VBScript، JavaScript)
  • ارتباط کلاینت-سرور از طریق پروتکل HTTP
  • طراحی یک سند با استفاده از زبان HTML
  • طراحی فرم‌های ورود داده

ما با استفاده از یک مثال دیدیم که چگونه یک کلاینت می‌تواند اطلاعات را به سرور وب ارسال کند. ما نحوهٔ کار سرور را پوشش نداده‌ایم

  • این اطلاعات را بازیابی کند
  • آن را پردازش کند
  • ارسال یک پاسخ پویا به کلاینت بسته به نتیجه پردازش

این موضوع در حوزه برنامه‌نویسی وب قرار می‌گیرد، موضوعی که در فصل بعدی با معرفی فناوری ASP.NET به آن خواهیم پرداخت.

https://stahe.github.io
این آموزش, نوشتهٔ سرژ تاهه, تحت شرایط Creative Commons Attribution – Non-Commercial – ShareAlike 3.0 Unported.