ارسال فرم HTML با جاوا اسکریپت – راهنمای جامع

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

• ساخت ویجت‌های سفارشی فرم در HTML — راهنمای جامع

فرم همیشه فرم نیست

از زمان معرفی open Web apps به این سو، فرم های HTML به چیزی فراتر از فرم‌های معمولی که به صورت کاغذی پر می‌کنیم تبدیل شده‌اند. بدین ترتیب توسعه‌دهندگان رفته‌رفته شروع به دست گرفتن کنترل بیشتری روی فرایند انتقال داده‌ها کرده‌اند.

به دست گرفتن کنترل اینترفیس سراسری

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

اغلب UI-های مدرن از فرم های HTML برای گردآوری ورودی‌های کاربر استفاده می‌کنند. زمانی که کاربر تلاش می‌کند داده‌ها را ارسال بکند، اپلیکیشن کنترل را به دست می‌گیرد و این داده‌ها را به صورت ناهمگام در پس‌زمینه ارسال می‌کند. در ادامه تنها بخش‌هایی از رابط کاربری که نیازمند تغییر هستند، به‌روزرسانی می‌شوند.

فناوری ارسال داده‌های دلخواه به صورت ناهمگام به نام AJAX شناخته می‌شود که اختصاری برای عبارت «جاوا اسکریپت و XML ناهمگام» (Asynchronous JavaScript And XML) است.

تفاوت استفاده از جاوا اسکریپت در چیست؟

AJAX از شیء DOM به نام XMLHttpRequest یا به اختصار XHR استفاده می‌کند. این شیء می‌تواند درخواست‌های HTTP بسازد، آن‌ها را ارسال کند و نتایج را بازگشت دهد.

نکته: تکنیک‌های قدیمی‌تر AJAX صرفاً روی XMLHttpRequest تکیه نداشتند. برای نمونه JSOAP با تابع ()eval ترکیب شده بود. این تکنیک نیز کار می‌کند، اما استفاده از آن توصیه نمی‌شود، زیرا مشکلات امنیتی جدی دارد. تنها دلیل برای استفاده از این تکنیک ممکن است این باشد که مرورگرهای قدیمی از XMLHttpRequest یا JSON پشتیبانی نمی‌کنند، اما چنین مرورگرهایی باید واقعاً قدیمی باشند. بنابراین سعی کنید از چنین تکنیک‌هایی استفاده کنید.

XMLHttpRequest از لحاظ تاریخی برای واکشی و ارسال XML به عنوان یک فرمت تبادل داده طراحی شده است. اما نه XML و نه JSON در انکودینگ درخواست داده‌های فرم جای نمی‌گیرند. داده‌های فرم (application/x-www-form-urlencoded) لیست‌های انکودشده URL از جفت‌های کلید/مقدار تشکیل می‌دهند. برای ارسال کردن داده‌های باینری، درخواست HTTP به صورت multipart/form-data تغییر شکل می‌یابد.

اگر فرانت‌اند (کدی که در مرورگر اجرا می‌شود) و کد بک‌اند (کدی که روی سرور اجرا می‌شود) را کنترل کنید، می‌توانید JSON/XML را ارسال کرده و به هر شکلی که دوست دارید آن‌ها را پردازش کنید.

اما اگر می‌خواهید از سرویس شخص ثالث استفاده کنید؛ کار به این سادگی نیست. برخی سرویس‌ها تنها داده‌های فرم را می‌پذیرند. همچنین مواردی وجود دارند که استفاده از داده‌های فرم ساده‌تر است. اگر داده‌ها به صورت جفت‌های کلید/مقدار، یا داده‌های باینری خام باشند، ابزارهای بک‌اند موجود می‌توانند آن را بدون نیاز به هیچ کد اضافی مدیریت کنند.

اینک سؤالی که مطرح می‌شود، این است که روش ارسال این داده‌ها چگونه است؟ در بخش بعدی به این سؤال پاسخ می‌دهیم.

ارسال داده‌های فرم

3 روش برای ارسال داده‌های فرم وجود دارد که از تکنیک‌های قدیمی تا شیء جدیدتر FormData را شامل می‌شود. در ادامه همه این موارد را به تفصیل مورد بررسی قرار می‌دهیم.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

ساخت XMLHttpRequest به صورت دستی

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

چنان که مشاهده می‌کنید، HTML در عمل تغییر نیافته است. با این حال، کد جاوا اسکریپت کاملاً متفاوت است:

نتیجه نهایی به صورت زیر است:

نکته: استفاده از XMLHttpRequest تحت همان «سیاست اصالت» (origin policy) است که در زمان ارسال داده‌ها به وب‌سایت‌های شخص ثالث مورد استفاده قرار می‌گیرد. در مورد درخواست‌های cross-origin به کنترل دسترسی CORS و HTTP نیاز داریم.

استفاده از XMLHttpRequest و شیء FormData

ساخت یک درخواست HTTP به صورت دستی ممکن است کار پیچیده‌ای باشد. خوشبختانه یک استاندارد مشخصه XMLHttpRequest روشی راحت و ساده برای مدیریت درخواست‌های داده‌های فرم با شیء FormData ارائه می‌کند.

شیء FormData می‌تواند برای انتقال داده‌های فرم یا برای به دست آوردن داده‌های درون یک عنصر فرم جهت مدیریت برای ارسال کردن آن، مورد استفاده قرار گیرد. توجه کنید که اشیای FormData «فقط-نوشتنی» هستند، یعنی می‌توان آن‌ها را تغییر داد، اما نمی‌توان محتوای آن‌ها را بازیابی کرد.

در ادامه دو مثال از روش استفاده از این اشیا ارائه شده است:

استفاده از شیء مستقل FormData

شما احتمالاً با این کد ساده HTML آشنا هستید:

نتیجه آن چنین است:

استفاده از FormData متصل به یک عنصر فرم

روش دیگری که برای استفاده از شیء FormData وجود دارد، بهره‌گیری از عنصر <form> است. بدین ترتیب یک FormData ایجاد می‌شود که داده‌های موجود در فرم را نمایش می‌دهد.

کد نمونه HTML آن چنین است:

اما جاوا اسکریپت کنترل را از فرم می‌گیرد:

نتیجه کار چنین است:

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

ساخت یک DOM در iframe پنهان

قدیمی‌ترین روش برای ارسال ناهمگام داده‌های فرم، ساخت یک فرم با استفاده از API مربوط به DOM است که داده‌ها را در یک عنصر پنهان < iframe> ارسال می‌کند. برای دسترسی به نتیجه ارسال باید محتوای < iframe> را بازیابی کنید.

هشدار: شما باید از این روش اجتناب کنید. در زمان استفاده از سرویس‌های شخص ثالث این تکنیک موجب بروز ریسک‌های امنیتی می‌شود، زیرا شما را در معرض حمله‌های تزریق اسکریپت قرار می‌دهد. اگر از HTTPS استفاده می‌کنید، این تکنیک می‌تواند روی same origin policy تأثیر بگذارد که محتوای یک <iframe> را غیر قابل دسترسی می‌کند. با این حال این متد در صورت نیاز به پشتیبانی از مرورگرهای خیلی قدیمی ممکن است تنها گزینه موجود باشد.

به مثال زیر توجه کنید:

نتیجه کد فوق چنین است:

کار با داده‌های باینری

اگر از یک شیء FormData در فرمی با ویجت‌های <"input type="file> استفاده می‌کنید، داده‌ها به صورت خودکار پردازش خواهند شد. اما برای ارسال داده‌های باینری به صورت دستی باید کار بیشتری انجام یابد.

منابع زیادی برای داده‌های باینری روی وب مدرن وجود دارند که برای نمونه شامل FileReader ،Canvas و WebRTC هستند. متأسفانه برخی مرورگرهای قدیمی نمی‌توانند به داده‌های باینری دسترسی پیدا کنند و نیازمند استفاده از راه‌حل‌های پیچیده‌ای هستند. بررسی این مرورگرهای قدیمی خارج از حوصله این مقاله است.

ارسال داده‌های باینری با پشتیبانی از FormData کار سرراستی است. کافی است از متد ()append استفاده کنید. اگر این کار را به صورت دستی انجام دهید پیچیده‌تر خواهد بود.

ما در مثال زیر از API به نام FileReader برای دسترسی به داده‌های باینری استفاده کردیم و سپس درخواست داده‌های چندبخشی فرم را به صورت دستی می‌سازیم:

چنان که مشاهده می‌کنید، کد HTML شامل یک <form> استاندارد است. در این کد هیچ اتفاق عجیبی نمی‌افتد. بخش اصلی کار در کد جاوا اسکریپت رخ می‌دهد:

نتیجه کد فوق چنین است:

سخن پایانی

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

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

• این Gist (+) اقدام به پلی‌فیل کردن FormData با استفاده از Web Workers می‌کند.
• HTML5-formdata (+) اقدام به پلی‌فیل کردن شیء FormData می‌کند، اما نیازمند File API است.
• این پلی‌فیل (+) اغلب متدهای جدید FormData را دارد (مداخل، کلیدها، مقادیر و پشتیبانی از for...of)

برای مطالعه بخش این سری مقالات آموزشی روی لینک زیر کلیک کنید:

• فرم های HTML در مرورگرهای قدیمی --- راهنمای جامع

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت با HTML و CSS
• آموزش طراحی وب با HTML – مقدماتی
• مجموعه آموزش‌های برنامه‌‌نویسی
• ۵ گام برای درک کدهای پایه HTML – آموزش مقدماتی
• آشنایی مقدماتی با HTML — به زبان ساده

==