Skip to content

2. مبانی برنامه‌نویسی وب

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

اجزای یک برنامه وب به شرح زیر است:

Image

شماره
نقش
مثال‌های رایج
1
OS سرور
یونیکس، لینوکس، ویندوز
۲
سرور وب
اپاچی (یونیکس، لینوکس، ویندوز)
IIS (ویندوز و پلتفرم .NET) NET
Node.js (یونیکس، لینوکس، ویندوز)
۳
کد سمت سرور. این می‌تواند توسط ماژول‌های سرور یا برنامه‌های خارجی (CGI) اجرا شود.
JAVASCRIPT (Node.js)
PHP (Apache, IIS)
JAVA (Tomcat, WebSphere, JBoss, WebLogic, ...)
C#, VB.NET (IIS)
۴
پایگاه داده – این ممکن است روی همان دستگاهی باشد که برنامه از آن استفاده می‌کند، یا روی دستگاه دیگری از طریق اینترنت.
Oracle (Linux, Windows)
MySQL (لینوکس، ویندوز)
Postgres (لینوکس، ویندوز)
سرور SQL (ویندوز)
۵
OS کلاینت
یونیکس، لینوکس، ویندوز
۶
مرورگر وب
کروم، اینترنت اکسپلورر، فایرفاکس، اپرا، سافاری، ...
۷
اسکریپت‌هایی که در سمت کلاینت و درون مرورگر اجرا می‌شوند. این اسکریپت‌ها به هارددیسک‌های ماشین کلاینت دسترسی ندارند.
جاوااسکریپت (تمام مرورگرها)

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

Image

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

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

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

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

بیایید اولین پروژه Spring خود را بسازیم MVC [1-2]:

  • در [1-2]، ما یک پروژه جدید مبتنی بر Spring Boot [http://projects.spring.io/spring-boot/] ایجاد می‌کنیم؛
  • اطلاعات [3-7] برای پیکربندی Maven پروژه است؛
  • در [3]، نام پروژه Maven؛
  • در [4]، گروه Maven که نتیجه کامپایل پروژه در آن قرار خواهد گرفت؛
  • در [5]، نام اختصاص‌داده‌شده به خروجی کامپایل؛
  • در [6]، توضیحی درباره پروژه؛
  • [7]، بسته‌ای که کلاس قابل اجرای پروژه در آن قرار می‌گیرد؛
  • در [8]، ماهیت پروژه مشخص می‌شود. این یک پروژه وب با ویوهای Thymeleaf است. در اینجا می‌توانیم تمام وابستگی‌های آماده استفاده Maven را که توسط پروژه Spring Boot فراهم شده‌اند، مشاهده کنیم؛
  • در [9]، مشخص می‌کنیم که خروجی ساخت Maven به جای WAR، به صورت یک آرشیو JAR بسته‌بندی شود. سپس پروژه از یک سرور Tomcat داخلی استفاده خواهد کرد که در وابستگی‌های آن گنجانده خواهد شد؛
  • در [10]، به مرحله بعدی جادوگر می‌رویم؛
  • در [11]، پوشه پروژه را مشخص کنید؛
  • در [12]، جادوگر را تکمیل کنید؛
  • در [13]، پروژهٔ تولیدشده.

بیایید فایل تولیدشده [pom.xml] را بررسی کنیم:


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>istia.st.springmvc</groupId>
    <artifactId>intro</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>springmvc-intro</name>
    <description>Les bases de la programmation web</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.1.9.RELEASE</version>
        <relativePath /> <!-- جستجوی والد در مخزن -->
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <start-class>istia.st.springmvc.Application</start-class>
        <java.version>1.7</java.version>
    </properties>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

این فایل شامل تمام اطلاعاتی است که در ویزارد ارائه شده است. در خطوط 26–30، وابستگی‌ای را می‌یابیم که از آن بی‌خبر بودیم. این وابستگی امکان یکپارچه‌سازی تست‌های واحد JUnit با Spring را فراهم می‌کند.

بیایید با ایجاد یک صفحهٔ ایستا به نام HTML در این پروژه شروع کنیم. به‌طور پیش‌فرض، باید در پوشهٔ [src / main / resources / static] قرار گیرد:

  • در [1-4]، ما یک فایل با نام HTML را در پوشه [static] ایجاد می‌کنیم؛
  • به [6]، به صفحه یک نام بدهید؛
  • در [7]، صفحه اضافه شده است.

محتوای صفحهٔ ایجادشده به شرح زیر است:


<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

</body>
</html>
  • خطوط ۲–۱۰: کد در تگ ریشه <html> قرار گرفته است؛
  • خطوط ۳–۶: تگ <head> محدوده‌ای را که به‌عنوان سربرگ صفحه شناخته می‌شود، مشخص می‌کند؛
  • خطوط ۷–۹: تگ <body> محدوده‌ای را که به آن بدنهٔ صفحه گفته می‌شود، مشخص می‌کند.

بیایید این کد را به صورت زیر تغییر دهیم:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>
  • خط ۵: عنوان صفحه را تعریف می‌کند – این عنوان در پنجره مرورگر نمایش داده می‌شود؛
  • خط ۸: متن با فونت بزرگ ().

بیایید برنامه [1-3] را اجرا کنیم:

سپس، با استفاده از یک مرورگر، بیایید URL و [http://localhost:8080/exemple-01.html] را درخواست کنیم:

  • در [1]، URL صفحه در حال مشاهده؛
  • به [2]، عنوان پنجره – ارائه‌شده توسط تگ <title> صفحه؛
  • [3]، محتوای صفحه – توسط تگ ارائه شده است.

بیایید نگاهی بیندازیم به [4-5]، کدی که توسط مرورگر دریافت شده است:

  • در [5]، مرورگر صفحه‌ی HTML را که ما ساخته بودیم دریافت کرد. آن را تفسیر و به‌صورت گرافیکی رندر کرد.

2.2.2. یک صفحه پویا Thymeleaf

حال بیایید یک صفحه Thymeleaf ایجاد کنیم. این یک صفحه استاندارد HTML است که با تگ‌هایی غنی‌شده با ویژگی‌های [Thymeleaf] و [http://www.thymeleaf.org/]. ما رویکردی مشابه با آنچه هنگام ایجاد صفحه HTML استفاده شد را دنبال می‌کنیم، اما این بار صفحه جدید HTML باید در پوشه [templates] قرار داده شود:

 

صفحه [exemple-02.html] به این شکل خواهد بود:


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>spring mvc intro</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'Il est ' + ${heure}">Voici l'heure</p>
</body>
</html>
  • خط ۸: تگ یک تگ HTML است که یک پاراگراف را در صفحه نمایش‌داده‌شده معرفی می‌کند. [th:text] یک ویژگی [Thymeleaf] است که بسته به اینکه [Thymeleaf] فعال باشد یا خیر، دو هدف متفاوت دارد:
    • اگر [Thymeleaf] صفحه HTML را تفسیر نکند، ویژگی [th:text] نادیده گرفته می‌شود زیرا در HTML ناشناخته است. متن نمایش داده شده سپس [Voici l'heure] خواهد بود،
    • اگر [Thymeleaf] صفحه HTML را تفسیر کند، ویژگی [th:text] ارزیابی شده و مقدار آن جایگزین متن [Voici l'heure] خواهد شد. مقدار آن چیزی شبیه به [Il est 17:11:06] خواهد بود؛

بیایید این را در عمل ببینیم. ما صفحه [templates / exemple-02.html] را در پوشه [static] کپی می‌کنیم. صفحاتی که در این پوشه قرار می‌گیرند توسط [Thymeleaf] تفسیر نمی‌شوند:

ما برنامه را همان‌طور که چندین بار قبلاً انجام داده‌ایم اجرا می‌کنیم، سپس با استفاده از یک مرورگر فایل‌های URL و [http://localhost:8080/exemple-02.html] را درخواست می‌کنیم:

می‌توانیم در [1] ببینیم که ویژگی [th:text] تفسیر نشده و باعث خطا نیز نشده است. کد منبع صفحه‌ای که در [2] دریافت شده نشان می‌دهد که مرورگر واقعاً کل صفحه را دریافت کرده است.

بیایید به صفحه [exemple-02.html] در پوشه [templates] بازگردیم:

  

صفحات HTML که در پوشه [templates] قرار دارند، توسط [Thymeleaf] تفسیر می‌شوند. بیایید به کد صفحه بازگردیم:


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>spring mvc intro</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'Il est ' + ${heure}">Voici l'heure</p>
</body>
</html>
  • خط ۷: [Thymeleaf] ویژگی [th:text] را تفسیر کرده و [Voici l'heure] را با مقدار عبارت جایگزین می‌کند: 
"'Il est ' + ${heure}"

این عبارت از متغیر [${heure}] استفاده می‌کند، که [heure] متعلق به قالب نما [exemple-02.html] است. بنابراین ما باید این قالب را ایجاد کنیم. برای این کار، ما از مثال مطرح‌شده در بخش 1.6 پیروی خواهیم کرد. پروژه را به شرح زیر به‌روزرسانی خواهیم کرد:

در [1]، کنترلر زیر را اضافه می‌کنیم:


package istia.st.springmvc;

import java.text.SimpleDateFormat;
import java.util.Date;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MyController {

    @RequestMapping("/")
    public String heure(Model model) {
        // قالب زمان
        SimpleDateFormat formater = new SimpleDateFormat("HH:MM:ss");
        // زمان فعلی
        String heure = formater.format(new Date());
        // تنظیم زمان در قالب نما
        model.addAttribute("heure", heure);
        // نمایش ویو [exemple-02.html]
        return "exemple-02";
    }
}
  • خطوط ۱۳–۱۴: متد [heure]، URL و [/] را پردازش می‌کند؛
  • خط ۱۴: [Model model] یک قالب خالی است. متد [heure] باید آن را با ویژگی‌هایی که می‌خواهد در قالب ببیند، پر کند. ما می‌دانیم که ویو [exemple-02.html] منتظر یک ویژگی به نام [heure] است؛
  • خطوط ۱۹–۲۲: آنچه به تازگی توضیح داده شد را پیاده‌سازی کنید. ویو [exemple-02.html] با یک ویژگی به نام [heure] در قالب خود (خط ۲۰) نمایش داده خواهد شد (خط ۲۲);
  • خط ۱۶: یک قالب‌بندی تاریخ ایجاد می‌شود. قالب [HH:MM:ss] مورد استفاده، قالبی از نوع [heures:minutes:secondes] است که در آن ساعات در بازه [0-24] قرار می‌گیرند؛
  • خط ۱۸: با استفاده از این قالب‌بندی‌کننده، تاریخ جاری قالب‌بندی می‌شود؛
  • خط ۲۰: زمان حاصل به ویژگی‌ای به نام [heure] اختصاص داده می‌شود؛

ما برنامه را راه‌اندازی می‌کنیم و URL [/] را درخواست می‌کنیم:

  • با [1] برای صفحهٔ حاصل و [2] برای محتوای آن، HTML. می‌بینیم که متن اصلی، [Voici l'heure]، کاملاً ناپدید شده است؛

اگر اکنون صفحه [1] (F5) را تازه کنیم، نمایش متفاوتی (زمان جدید) دریافت می‌کنیم، در حالی که URL بدون تغییر باقی می‌ماند. این ذات پویا بودن صفحه است: محتوای آن می‌تواند در طول زمان تغییر کند.

نکته کلیدی از موارد فوق، ماهیت اساساً متفاوت صفحات پویا و ایستا است.

2.2.3. پیکربندی برنامه Spring Boot

بیایید به معماری پروژه Eclipse بازگردیم:

فایل [application.properties] برای پیکربندی برنامه Spring Boot استفاده می‌شود. در حال حاضر، این فایل خالی است. می‌توان از آن برای پیکربندی برنامه به روش‌های گوناگون، همان‌طور که در URL و [http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html] توضیح داده شده است، استفاده کرد. ما از فایل [application.properties] به شرح زیر، بر اساس [2]، استفاده خواهیم کرد:

  • خط ۱: پورت سرویس وب‌اپلیکیشن را تنظیم می‌کند؛
  • خط ۲: زمینهٔ برنامهٔ وب را تنظیم می‌کند؛

با این پیکربندی، صفحهٔ ایستا [exemple-01.html] با استفاده از URL و [http://localhost:9000/intro/exemple-01.html] تولید خواهد شد:

 

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

یک صفحه HTML ممکن است شامل اسکریپت‌هایی باشد که توسط مرورگر اجرا می‌شوند. زبان اصلی اسکریپت‌نویسی سمت مرورگر در حال حاضر (ژانویه ۲۰۱۵) جاوااسکریپت است. صدها کتابخانه با استفاده از این زبان ساخته شده‌اند تا زندگی را برای توسعه‌دهندگان آسان‌تر کنند.

بیایید یک صفحه جدید، [exemple-03.html]، در پوشه [static] پروژه موجود ایجاد کنیم:

  

بیایید فایل [exemple-03.html] را با محتوای زیر ویرایش کنیم:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>exemple Javascript</title>
  <script type="text/javascript">
    function réagir() {
      alert("Vous avez cliqué sur le bouton !");
    }
  </script>
</head>
<body>
  <input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>
  • خط ۱۳: یک دکمه را با ویژگی type تعریف می‌کند که متنش «Click me» (ویژگی value) است. با کلیک کردن، تابع جاوااسکریپت [réagir] اجرا می‌شود (ویژگی onclick);
  • خطوط ۶–۱۰: یک اسکریپت جاوااسکریپت؛
  • خطوط ۷–۹: تابع [réagir];
  • خط ۸: یک کادر محاوره‌ای با پیام [Vous avez cliqué sur le bouton] را نمایش می‌دهد.

بیایید صفحه را در یک مرورگر مشاهده کنیم:

  • در [1]، صفحه‌ای که نمایش داده می‌شود؛
  • در [2]، کادر محاوره‌ای که هنگام کلیک روی دکمه ظاهر می‌شود.

هنگامی که دکمه کلیک می‌شود، هیچ ارتباطی با سرور برقرار نمی‌شود. کد جاوااسکریپت توسط مرورگر اجرا می‌شود.

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

  • 1-2: سرور HTML یک سرور برای صفحات ایستا HTML5 / CSS / جاوااسکریپت است؛
  • ۳-۴: صفحات HTML5 / CSS / JavaScript مستقیماً با سرور داده تعامل دارند. سرور تنها داده‌ها را بدون قالب‌بندی بازمی‌گرداند (HTML). این جاوااسکریپت است که آن‌ها را در صفحات HTML که از قبل در مرورگر موجود هستند، درج می‌کند.

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

  • لایه [UI] لایه‌ای است که با کاربر تعامل دارد؛
  • لایه [DAO] با سرور داده تعامل دارد؛
  • لایه [métier] شامل رویه‌های منطق کسب‌وکار است که نه با کاربر و نه با سرور داده‌ها تعامل دارند. این لایه ممکن است وجود نداشته باشد.

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

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

Image

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

2.4.1. مدل OSI

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

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

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

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

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

2.4.2. مدل TCP/IP

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

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

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

Image

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

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

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

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

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

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

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

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

2.4.3. پروتکل HTTP

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

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

پروتکل://[:port] ماشین/مسیر/اطلاعات

که در آن

پروتکل
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، کلاینت می‌تواند به سرور دستور دهد که اتصال را تا زمانی که خود کلاینت دستور بستن آن را ندهد، باز نگه دارد. بنابراین، کلاینت می‌تواند تمام اسناد یک صفحه وب را با استفاده از یک اتصال واحد دریافت کند و پس از دریافت آخرین سند، خود اتصال را ببندد. سرور این بسته شدن را تشخیص داده و اتصال را نیز می‌بندد.

برای بررسی مبادلات بین یک کلاینت و یک وب‌سرور، از افزونه [Advanced Rest Client] برای مرورگر کروم استفاده خواهیم کرد که در بخش 9.6 نصب کردیم. ما در وضعیت زیر خواهیم بود:

Image

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


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

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

 

می‌توانیم ببینیم که URL درخواستی عبارت است از: [http://localhost:9000/intro/exemple-01.html]. بنابراین ماشین سرویس وب localhost (معادل ماشین محلی) روی پورت 9000 است. بیایید از برنامه [Advanced Rest Client] برای درخواست همان URL استفاده کنیم:

  • در [1]، برنامه را راه‌اندازی کنید (در زبانه [Applications] یک زبانه جدید کروم)؛
  • در [2]، گزینه [Request] را انتخاب کنید؛
  • در [3]، سرور مورد پرس‌وجو را مشخص کنید: http://localhost:9000;
  • در [4]، URL درخواست‌شده را مشخص کنید: /intro/exemple-01.html;
  • در [5]، هرگونه پارامتر به URL اضافه می‌شود. در اینجا هیچ‌کدام وجود ندارد؛
  • در [6]، دستور HTTP مورد استفاده برای درخواست را مشخص کنید، در این مورد GET.

این منجر به پرس‌وجوی زیر می‌شود:

پرس‌وجوی آماده‌شده [7] از طریق [8] به سرور ارسال می‌شود. پاسخ دریافتی سپس به شرح زیر است:

قبلاً اشاره کردیم که مبادلات کلاینت-سرور به شکل زیر است:

Image

  • در [1]، می‌توانیم سربرگ‌های HTTP را که توسط مرورگر در درخواست خود ارسال شده است، مشاهده کنیم. این مرورگر هیچ سندی برای ارسال نداشت؛
  • در [2]، می‌توانیم سربرگ‌های HTTP را که توسط سرور در پاسخ ارسال شده است، ببینیم. در [3]، می‌توانیم سند ارسالی آن را ببینیم.

در [3]، صفحهٔ ایستا HTML را که روی سرور وب قرار داده‌ایم، تشخیص می‌دهیم.

بیایید درخواست مرورگر HTTP را بررسی کنیم:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GET /intro/exemple-01.html HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Content-Type: text/plain; charset=utf-8
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
  • خط ۱ توسط برنامه نمایش داده نشد؛
  • خط ۶: مرورگر خود را با هدر [User-Agent] شناسایی می‌کند؛
  • خط ۷: مرورگر نشان می‌دهد که یک سند متنی (text/plain) را در قالب UTF-8 به سرور ارسال می‌کند. در واقع، در این مورد، مرورگر هیچ سندی ارسال نکرده است؛
  • خط ۸: مرورگر نشان می‌دهد که هر نوع سند را در پاسخ می‌پذیرد؛
  • خط ۹: مرورگر فرمت‌های اسناد پذیرفته‌شده را مشخص می‌کند؛
  • خط ۱۰: مرورگر زبان‌هایی را که نیاز دارد، به ترتیب اولویت مشخص می‌کند.

سرور با ارسال سربرگ‌های زیر HTTP پاسخ داد:

1
2
3
4
5
6
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Last-Modified: Sat, 29 Nov 2014 07:31:43 GMT
Content-Type: text/html
Content-Length: 255
Date: Sat, 29 Nov 2014 08:20:52 GMT
  • خط ۱: توسط برنامه نمایش داده نشد؛
  • خط ۲: سرور خود را شناسایی می‌کند؛ در این مورد، یک سرور آپاچی-کویوت؛
  • خط ۳: تاریخ آخرین ویرایش سند؛
  • خط ۴: نوع سند ارسال‌شده توسط سرور. در این مورد، یک سند HTML؛
  • خط ۵: اندازه سند HTML ارسال‌شده به بایت.
  • خط ۶: تاریخ و زمان پاسخ؛

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

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

Image

دو فرمان استاندارد برای درخواست یک منبع، GET و POST هستند. دستور GET فاقد سند است. از سوی دیگر، دستور POST با یک سند همراه است که اغلب یک رشته از کاراکترها است که شامل تمام مقادیری است که در یک فرم وارد شده‌اند. دستور HEAD برای درخواست تنها سربرگ‌های HTTP استفاده می‌شود و هیچ سندی به همراه ندارد.

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

2.5. مبانی زبان HTML

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

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

2.5.1. یک مثال

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

  • یک جدول؛
  • یک تصویر؛
  • یک لینک.

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

<html>
    <head>
        <title>یک عنوان</title>
        ...
    </body>
    <body attributes>
        ...
    </body>
</html>

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

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

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


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

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
    <h1 style="text-align: center">Les balises HTML</h1>
    <hr />
    <table border="1">
        <thead>
            <tr>
                <th>Colonne 1</th>
                <th>Colonne 2</th>
                <th>Colonne 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>cellule(1,1)</td>
                <td style="width: 150px; text-align: center;">cellule(1,2)</td>
                <td>cellule(1,3)</td>
            </tr>
            <tr>
                <td>cellule(2,1)</td>
                <td>cellule(2,2)</td>
                <td>cellule(2,3</td>
            </tr>
        </tbody>
    </table>

    <table>
        <tr>
            <td>Une image</td>
            <td><img border="0" src="images/cerisier.jpg" /></td>
        </tr>
        <tr>
            <td>le site de l'ISTIA</td>
            <td><a href="http://istia.univ-angers.fr">ici</a></td>
        </tr>
    </table>
</body>
</html>
عنصر
برچسب‌ها و مثال‌ها HTML
عنوان سند
<title>برچسب‌ها</title> (خط ۵)
متن balises هنگام نمایش سند در نوار عنوان مرورگر ظاهر خواهد شد
خط افقی
<hr/>: یک خط افقی نمایش می‌دهد (خط ۱۰)
جدول
<table attributes>....</table>: برای تعریف جدول (خطوط ۱۱، ۳۱)
<thead>...</thead>: برای تعریف سربرگ‌های ستون (خطوط ۱۲، ۱۸)
<tbody>...</tbody>: برای تعریف محتوای جدول (خطوط ۱۹، ۳۰)
<tr attributes>...</tr>: برای تعریف یک سطر (خطوط ۲۰، ۲۴)
<td attributes>...</td>: برای تعریف یک سلول (خط ۲۱)
مثال‌ها:
<table border="1">...</table>: ویژگی border ضخامت حاشیه جدول را تعریف می‌کند
<td style="width: 150px; text-align: centre;">سلول(1,2)</td>: یک سلول را تعریف می‌کند که محتوای آن cell(1,2) خواهد بود. این محتوا به صورت افقی در مرکز قرار می‌گیرد (text-align: centre). عرض سلول 150 پیکسل خواهد بود (width: 150px)
تصویر
<img border="0" src="/images/cerisier.jpg"/> (خط ۳۶): تصویری بدون حاشیه (border="0") را تعریف می‌کند که فایل منبعی آن /images/cerisier.jpg در سرور وب (src="images/cerisier.jpg") است. این لینک در یک سند وب تولیدشده با استفاده از URL http://localhost:port/intro/exemple-04.html ظاهر می‌شود. بنابراین، مرورگر برای دریافت تصویر مرجع، از URL http://localhost:port/intro/images/cerisier.jpg درخواست می‌کند.
لینک
<a href="http://istia.univ-angers.fr">اینجا (خط ۴۰): متن ici را به‌عنوان یک لینک به URL http://istia.univ-angers.fr در نظر می‌گیرد.
پاورقی
<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (خط ۸): نشان می‌دهد که تصویری که باید به‌عنوان پس‌زمینهٔ صفحه استفاده شود، در URL [images/standard.jpg] روی سرور وب قرار دارد. در چارچوب مثال ما، مرورگر برای دریافت این تصویر پس‌زمینه، فایل URL http://localhost:port/intro/images/standard.jpg را درخواست خواهد کرد. علاوه بر این، محتوای سند در یک مستطیل به ارتفاع ۴۰۰ پیکسل و عرض ۴۰۰ پیکسل نمایش داده خواهد شد.

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

  1. http://localhost:port/intro/exemple-04.html برای بازیابی منبع سند HTML
  2. http://localhost:port/intro/images/cerisier.jpg برای دریافت تصویر cerisier.jpg
  3. http://localhost:port/intro/images/standard.jpg برای دریافت تصویر پس‌زمینه standard.jpg

2.5.2. یک فرم HTML

مثال زیر یک فرم را نشان می‌دهد:

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


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>formulaire</title>
  <script type="text/javascript">
    function effacer() {
      alert("Vous avez cliqué sur le bouton Effacer");
    }
  </script>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Formulaire HTML</h1>
  <form method="post" action="postFormulaire">
    <table>
      <tr>
        <td>Etes-vous marié(e)</td>
        <td>
          <input type="radio" value="Oui" name="R1" />Oui
          <input type="radio" name="R1" value="non" checked="checked" />Non
        </td>
      </tr>
      <tr>
        <td>Cases à cocher</td>
        <td>
          <input type="checkbox" name="C1" value="un" />1
          <input type="checkbox" name="C2" value="deux" checked="checked" />2
          <input type="checkbox" name="C3" value="trois" />3
        </td>
      </tr>
      <tr>
        <td>Champ de saisie</td>
        <td>
          <input type="text" name="txtSaisie" size="20" value="qqs mots" />
        </td>
      </tr>
      <tr>
        <td>Mot de passe</td>
        <td>
          <input type="password" name="txtMdp" size="20" value="unMotDePasse" />
        </td>
      </tr>
      <tr>
        <td>Boîte de saisie</td>
        <td>
          <textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
        </td>
      </tr>
      <tr>
        <td>combo</td>
        <td>
          <select size="1" name="cmbValeurs">
            <option value="1">choix1</option>
            <option selected="selected" value="2">choix2</option>
            <option value="3">choix3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix simple</td>
        <td>
          <select size="3" name="lst1">
            <option selected="selected" value="1">liste1</option>
            <option value="2">liste2</option>
            <option value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix multiple</td>
        <td>
          <select size="3" name="lst2" multiple="multiple">
            <option value="1" selected="selected">liste1</option>
            <option value="2">liste2</option>
            <option selected="selected" value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>bouton</td>
        <td>
          <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" />
        </td>
      </tr>
      <tr>
        <td>envoyer</td>
        <td>
          <input type="submit" value="Envoyer" name="cmdRenvoyer" />
        </td>
      </tr>
      <tr>
        <td>rétablir</td>
        <td>
          <input type="reset" value="Rétablir" name="cmdRétablir" />
        </td>
      </tr>
    </table>
    <input type="hidden" name="secret" value="uneValeur" />
  </form>
</body>
</html>

نقشهٔ تطبیق برچسب <--> کنترل بصری برای HTML به شرح زیر است:

بررسی
برچسب HTML
فرم
<form method="post" action="...">
میدان ورودی
<input type="text" name="txtSaisie" size="20" value="چند کلمه" />
میدان ورودی مخفی
<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
میدان ورودی چندخطی
<textarea rows="2" name="areaSaisie" cols="20">
line1
line2
خط ۳
</textarea>
دکمه‌های رادیویی
<input type="radio" value="Yes" name="R1" />بله
<input type="radio" name="R1" value="no" checked="checked" />خیر
کادرهای تیک‌دار
<input type="checkbox" name="C1" value="one" />1
<input type="checkbox" name="C2" value="two" checked="checked" />2
<input type="checkbox" name="C3" value="three" />3
منوی کشویی
<select size="1" name="cmbValeurs">
<option value="1">option1</option>
<option selected="selected" value="2">گزینه 2</option>
<option value="3">گزینه ۳</option>
</select>
فهرست انتخاب تک‌گانه
<select size="3" name="lst1">
<option selected="selected" value="1">list1</option>
<option value="2">list2</option>
<option value="3">list3</option>
<option value="4">list4</option>
<option value="5">list5</option>
</select>
فهرست چندگزینه‌ای
<select size="3" name="lst2" multiple="multiple">
<option value="1">list1</option>
<option value="2">list2</option>
<option selected="selected" value="3">list3</option>
<option value="4">list4</option>
<option value="5">list5</option>
</select>
دکمه ارسال
<input type="submit" value="ارسال" name="cmdRenvoyer" />
دکمه ریست
<input type="reset" value="Reset" name="cmdRétablir" />
دکمه
<input type="button" value="حذف" name="cmdEffacer" onclick="delete()" />

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

2.5.2.1. فرم

form

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

2.5.2.2. میدان‌های ورودی متنی

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

2.5.2.3. میدان‌های ورودی چندخطی

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

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

دکمه‌های رادیویی
<input type="radio" value="Yes" name="R1" />بله
<input type="radio" name="R1" value="no" checked="checked" />خیر
 
برچسب HTML
<input type="radio" attribute2="value2" ..../>متن
یک دکمه رادیویی را همراه با متن در کنار آن نمایش می‌دهد.
ویژگی‌ها
name="radio": نام کنترل. دکمه‌های رادیویی با نام یکسان یک گروه از دکمه‌های غیرقابل انتخاب همزمان را تشکیل می‌دهند: تنها یکی از آن‌ها می‌تواند در هر زمان انتخاب شود.
value="value": مقداری که به دکمه رادیویی اختصاص داده می‌شود. این مقدار نباید با متنی که در کنار دکمه رادیویی نمایش داده می‌شود اشتباه گرفته شود. مورد دوم صرفاً برای اهداف نمایشی است.
checked="checked": اگر این ویژگی وجود داشته باشد، دکمه رادیویی انتخاب شده است؛ در غیر این صورت، انتخاب نشده است.

2.5.2.5. تیک‌باکس‌ها

کادرهای تیک‌دار
<input type="checkbox" name="C1" value="one" />1
<input type="checkbox" name="C2" value="two" checked="checked" />2
<input type="checkbox" name="C3" value="three" />3
 
برچسب HTML
<input type="checkbox" attribute2="value2" ....>text
یک چک‌باکس را همراه با متنی در کنار آن نمایش می‌دهد.
ویژگی‌ها
name="C1": نام کنترل. چک‌باکس‌ها ممکن است نام یکسان داشته باشند یا نداشته باشند. چک‌باکس‌هایی که نام یکسان دارند، یک گروه از چک‌باکس‌های مرتبط را تشکیل می‌دهند.
value="value": مقداری که به چک‌باکس اختصاص داده می‌شود. این مقدار نباید با متنی که در کنار دکمه رادیویی نمایش داده می‌شود اشتباه گرفته شود. مورد دوم صرفاً برای اهداف نمایشی است.
checked="checked": اگر این کلمه کلیدی وجود داشته باشد، چک‌باکس تیک‌خورده است؛ در غیر این صورت، تیک‌خورده نیست.

2.5.2.6. لیست کشویی (جعبه‌ی ترکیبی)

کمیبو
<select size="1" name="cmbValeurs">
<option value="1">option1</option>
<option selected="selected" value="2">option2</option>
<option value="3">گزینه ۳</option>
</select>
 
برچسب HTML
<select size=".." name="..">
<option [selected="selected"] value="v">...</option>
...
</select>
متن بین <option>...</option> را نمایش می‌دهد
ویژگی‌ها
name="cmbValeurs": نام کنترل.
size="1": تعداد موارد قابل مشاهده لیست. size="1" لیست را معادل یک کادر ترکیبی می‌کند.
selected="selected": اگر این کلمه کلیدی برای یک مورد لیست وجود داشته باشد، آن مورد در لیست به صورت انتخاب‌شده ظاهر می‌شود. در مثال بالا، مورد لیست choix2 هنگام اولین نمایش، به عنوان مورد انتخاب‌شده در کادر ترکیبی ظاهر می‌شود.
value="v": اگر آیتم توسط کاربر انتخاب شود، این مقدار ([v]) به سرور ارسال می‌شود. اگر این ویژگی وجود نداشته باشد، متن نمایش داده شده و انتخاب شده به سرور ارسال می‌شود.

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

فهرست تک‌انتخابی
<select size="3" name="lst1">
<option selected="selected" value="1">list1</option>
<option value="2">list2</option>
<option value="3">list3</option>
<option value="4">list4</option>
<option value="5">list5</option>
</select>
 
برچسب HTML
<select size=".." name="..">
<option [selected="selected"]>...</option>
...
</select>
متن محصور بین <option>...</option> را نمایش می‌دهد
ویژگی‌ها
همانند لیست کشویی است که فقط یک آیتم را نمایش می‌دهد. این کنترل تنها در ویژگی size>1 با لیست کشویی قبلی متفاوت است.

2.5.2.8. فهرست چندگانه

فهرست تک‌گزینه‌ای
<select size="3" name="lst2" multiple="multiple">
<option value="1" selected="selected">list1</option>
<option value="2">list2</option>
<option selected="selected" value="3">list3</option>
<option value="4">list4</option>
<option value="5">list5</option>
</select>
 
برچسب HTML
<select size=".." name=".." multiple="multiple">
<option [selected="selected"]>...</option>
...
</select>
متن محصور بین <option>...</option> را نمایش می‌دهد
ویژگی‌ها
multiple: به شما امکان می‌دهد چندین مورد را از لیست انتخاب کنید. در مثال بالا، موارد liste1 و liste3 هر دو انتخاب شده‌اند.

2.5.2.9. دکمه

دکمه
<input type="button" value="حذف" name="cmdEffacer" onclick="delete()" />
 
برچسب HTML
<input type="button" value="..." name="..." onclick="effacer()" ..../>
ویژگی‌ها
type="button": یک کنترل دکمه را تعریف می‌کند. دو نوع دکمه دیگر وجود دارد: submit و reset.
value="Clear": متنی که روی دکمه نمایش داده می‌شود
onclick="function()": به شما امکان می‌دهد تابعی را تعریف کنید که هنگام کلیک کاربر روی دکمه اجرا شود. این تابع بخشی از اسکریپت‌های تعریف‌شده در سند وب نمایش‌داده‌شده است. سینتکس نشان‌داده‌شده در بالا، سینتکس javascript است. اگر اسکریپت‌ها به زبان VBScript نوشته شده باشند، باید onclick="function" را بدون پرانتز بنویسید. اگر لازم باشد پارامترها به تابع ارسال شوند، نحو به شکل زیر باقی می‌ماند: onclick="function(val1, val2,...)"
در مثال ما، کلیک بر روی دکمه Effacer، تابع جاوااسکریپت زیر effacer را فراخوانی می‌کند:
<script type="text/javascript">
function clear() {
alert("شما دکمه Clear را کلیک کرده‌اید");
} </script>
</script>
تابع effacer پیامی را نمایش می‌دهد:

2.5.2.10. دکمه ارسال

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

2.5.2.11. دکمه بازنشانی

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

2.5.2.12. میدان مخفی

میدان مخفی
<input type="hidden" name="secret" value="uneValeur" />
برچسب HTML
<input type="hidden" name="..." value="..."/>
ویژگی‌ها
type="hidden": مشخص می‌کند که این یک فیلد پنهان است. فیلد پنهان بخشی از فرم است اما به کاربر نمایش داده نمی‌شود. با این حال، اگر کاربر از مرورگر خود بخواهد کد منبع را نمایش دهد، وجود تگ <input type="hidden" value="..."> را خواهد دید و در نتیجه مقدار فیلد پنهان را مشاهده خواهد کرد.
value="aValue": مقدار فیلد مخفی.
هدف از یک فیلد مخفی چیست؟ این فیلد به سرور وب اجازه می‌دهد تا اطلاعات را در طول درخواست‌های یک مشتری حفظ کند. یک اپلیکیشن خرید آنلاین را در نظر بگیرید. کاربر در صفحه اول کاتالوگ، یک قلم اول به نام art1 را به تعداد q1 خریداری می‌کند، سپس به صفحه جدیدی در کاتالوگ می‌رود. برای به‌خاطر سپردن اینکه مشتری کالاهای q1 و art1 را خریداری کرده است، سرور می‌تواند این دو مورد اطلاعات را در یک فیلد پنهان در فرم وب صفحه جدید قرار دهد. در این صفحهٔ جدید، مشتری اقلام q2 و art2 را خریداری می‌کند. هنگامی که داده‌های این فرم دوم به سرور ارسال می‌شود، سرور نه تنها اطلاعات را دریافت خواهد کرد (q2,art2) بلکه همچنین (q1,art1)، که آن نیز به عنوان یک فیلد پنهان بخشی از فرم است. سپس وب سرور اطلاعات (q1,art1) و (q2,art2) را در یک فیلد مخفی جدید قرار داده و یک صفحه کاتالوگ جدید ارسال می‌کند. و به همین ترتیب.

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

همانطور که در بخش قبلی ذکر شد، کلاینت وب برای ارسال مقادیر فرم نمایش‌داده‌شده به یک وب‌سرور، دو روش در اختیار دارد: روش‌های GET و POST. بیایید مثالی را بررسی کنیم تا تفاوت بین این دو روش را ببینیم.

2.5.3.1. روش GET

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


<form method="get" action="doNothing">

هنگامی که کاربر روی دکمه [1] کلیک می‌کند، مقادیر وارد شده در فرم به کنترلر Spring [2] ارسال می‌شوند. ما دیدیم که مقادیر فرم به کنترلرهای URL و [doNothing] ارسال خواهند شد:


<form method="get" action="doNothing">

اقدام [doNothing] در کنترل‌کننده‌های [MyController] و [2] به شرح زیر تعریف شده است:


    // ----------------------- یک جریان خالی بازمی‌گرداند [Content-Length=0]
    @RequestMapping(value = "/doNothing")
    @ResponseBody
    public void doNothing() {
}
  • خط ۱: اکشن URL [/doNothing] را پردازش می‌کند، بنابراین در واقع [/context/doNothing]، که در آن [context] زمینه یا نام وب‌اپلیکیشن است، در این مورد [/intro]؛
  • خط ۳: تگ [@ResponseBody] نشان می‌دهد که نتیجه متد دارای تگ باید مستقیماً به کلاینت ارسال شود؛
  • خط ۴: این متد هیچ چیزی را بازنمی‌گرداند. بنابراین، کلاینت یک پاسخ خالی از سرور دریافت خواهد کرد.

ما صرفاً می‌خواهیم بدانیم مرورگر مقادیر واردشده را چگونه به سرور وب ارسال می‌کند. برای این کار، از ابزار عیب‌یابی موجود در کروم استفاده خواهیم کرد. با فشردن کلیدهای CTRL-Shift-I (کلید Shift) آن را فعال می‌کنیم. [3]:

از آنجایی که ما به ترافیک شبکه بین مرورگر و وب‌سرور علاقه‌مند هستیم، زبانه [Network] را در بالا باز کرده و سپس دکمه [Envoyer] را در فرم کلیک می‌کنیم. این یک دکمه از نوع [submit] در داخل یک تگ [form] است. مرورگر با کلیک، URL [/intro/doNothing] مشخص‌شده در ویژگی [action] تگ [form] را درخواست می‌کند، با استفاده از متد GET که در ویژگی [method] مشخص شده است. سپس اطلاعات زیر را به دست می‌آوریم:

اسکرین‌شات بالا URL را که پس از کلیک روی دکمه [envoyer] توسط مرورگر درخواست شده است، نشان می‌دهد. در واقع، URL ([/intro/doNothing]) مورد انتظار را درخواست می‌کند، اما اطلاعات اضافی شامل مقادیر واردشده در فرم را نیز ضمیمه می‌کند. برای جزئیات بیشتر، روی لینک بالا کلیک کنید:

در بالا [1, 2]، می‌توانیم سربرگ‌های HTTP ارسال‌شده توسط مرورگر را ببینیم. آنها در اینجا قالب‌بندی شده‌اند. برای مشاهده متن ساده این سربرگ‌ها، پیوند [view source] [3, 4] را دنبال کنید. متن کامل به شرح زیر است:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GET /intro/doNothing?R1=non&C2=deux&txtSaisie=qqs+mots&txtMdp=unMotDePasse&areaSaisie=ligne1%0D%0Aligne2%0D%0Aligne3%0D%0A&cmbValeurs=2&lst1=1&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Referer: http://localhost:9000/intro/exemple-05.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

عناصر قبلی را می‌بینیم. موارد دیگری برای اولین بار ظاهر می‌شوند:

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

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

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

2.5.3.2. متد POST

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


  <form method="post" action="doNothing">

ما فرم را همان‌طور که برای روش GET پر کردیم، تکمیل می‌کنیم و پارامترها را با استفاده از دکمه [Envoyer] به سرور ارسال می‌کنیم. همان‌طور که در پاراگراف قبلی در صفحه ۶۲ نشان داده شده است، می‌توانیم سربرگ‌های HTTP درخواست ارسال‌شده توسط مرورگر را در کروم مشاهده کنیم:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
POST /intro/doNothing HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Content-Length: 172
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:9000
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:9000/intro/exemple-05.html
Accept-Encoding: gzip, deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=non&C2=deux&txtSaisie=qqs+mots&txtMdp=unMotDePasse&areaSaisie=ligne1%0D%0Aligne2%0D%0Aligne3%0D%0A&cmbValeurs=2&lst1=1&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur

عناصر جدید در درخواست کلاینت HTTP ظاهر می‌شوند:

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

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

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

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

2.6. Conclusion

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

  • ارتباط کلاینت-سرور از طریق پروتکل HTTP؛
  • طراحی یک سند با استفاده از زبان HTML؛
  • طراحی فرم‌های ورودی.

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

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

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

https://stahe.github.io
این آموزش دوره, نوشته شده توسط سرگئه تاه, تحت شرایط مجوز Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported در دسترس عموم قرار گرفته است.