طرز استفاده از AJAX برای ارسال یک وب فرم
1396/10/04 16:23 , شایان مسلمی

طرز استفاده از AJAX برای ارسال یک وب فرم

امروز شما نحوه ی استفاده از AJAX را برای ارسال پویای یک وب فرم می آموزید.JQuery آسانترین راه استفاده از AJAX است.پس بیایید به سراغ بحث اصلی برویم.

چرا استفاده از AJAX؟

شما احتمالاً با خود فکر میکنید گه چرا باید از AJAX استفاده کنید؟HTML قادر است به خوبی فرم ها را ثبت کند و بدون مشکل نیز این کار را انجام میدهد.AJAX در بیشتر صفحات وب کاربرد دارد و محبوبیت آن ، روز به روز در حال افزایش است.

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

  • بررسی مداوم ایمیل های جدید
  • بروزرسانی نتیجه ی زنده ی فوتبال در هر 30 ثانیه
  • بروزرسانی قیمت یک مزایده ی آنلاین

AJAX از شما یک توسعه دهنده می سازد و به شما این توانایی را می دهد که بتوانید صفحات وب را به صفحاتی سریعتر،فعالتر و با پاسخگویی بیشتر تبدیل کنید.

HTML

قبل از اینکه شروع کنید،به یک فرم HTML نیاز خواهید داشت.این HTML ای است که نیاز دارید:

<!DOCTYPE html>

<html>

<head>

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>

       <script type="text/javascript">

 

       </script>

</head>

<body>

 

       <form action="some/file" method="POST" name="myForm" id="myForm">

              Name:

              <input type="text" name="name">

              Age:

              <input type="text" name="age">

              <input type="submit">

       </form>

 

</body>

</html>

این html یک فرم را تعریف میکند که دارای چند عنصر است.به ویژگی های action و method توجه کنید.این ها بیانگر چگونگی ثبت فرم هستند.در حین استفاده از AJAX این ویژگی ها مورد نیاز نیستند،اما استفاده از آن ها ایده ی خوبی است و این اطمینان را میدهد که بازدید کنندگان وب سایت شما حتی با وجود غیرفعال بودن جاوااسکریپت،میتوانند از آن استفاده کنند.این صفحه شامل jQuery هوست شده توسط گوگل روی CDN است.head شامل یک تگ script است و محلی است که شما کدتان را داخل آن خواهید نوشت.

این فرم ممکن است حالا کمی خسته کننده به نظر برسد،اما با یادگیری CSS میتوانید کمی آن را زنده تر کنید.

جاوااسکریپت

روش های متعددی وجود دارد که میتوانید فرم ها را با جاوااسکریپت ثبت کنید.اولین و ساده ترین راه برای این کار از طریق روش submit می باشد:

document.getElementById('myForm').submit();

البته شما در صورت تمایل میتوانید فرم را با jQuery هدف گیری کنید،این تفاوتی ایجاد نمی کند:

$('#myForm').submit();

این دستور به مرورگر شما اعلام میکند که فرم را ثبت کند،دقیقاً شبیه به فشار دادن دکمه ی ثبت.این فرم را توسط مشخصاتش شناسایی می کند و در این نمونه،myForm می باشد.این AJAX نیست،بنابراین کل صفحه بارگذاری خواهد شد،این همیشه مطلوب نیست.

در ویژگی method از فرم شما،چگونگی ثبت فرم را مشخص کردید.این میتواند POST یا GET باشد.این ویژگی در هنگام ثبت فرم ها با استفاده از AJAX استفاده نمی شود،اما روش مشابهی میتواند مورد استفاده قرار بگیرد.

بیشتر وب مدرن به دور از درخواست های GET یا POST باشد.به طور کلی،GET به منظور دریافت اطلاعات و POST برای ارسال اطلاعات ( و برگشت یک پاسخ) کاربرد دارد.داده میتواند با GET ارسال شود،اما POST تقریباً همیشه انتخاب بهتری است،مخصوصاً برای فرم داده.شاید شما درخواست های GET را قبلاً دیده باشید،آن ها داده ی الصاق شده به URL را ارسال میکنند:

somewebsite.com/index.html?name=Joe

علامت سؤال بالا به مرورگرتان می گوید که هر داده ای که به دنبال آن است نباید از وب سایت عبور کند،بجای آن باید از صفحه ی مورد نظر برای پردازش عبور کند.این برای چیزهای ساده ای مثل شماره صفحه کاربرد دارد اما اشکالاتی نیز دارد:

  • محدود بودن تعداد کاراکتر : تعداد کاراکترهایی که میتواند به یک URL ارسال شود،محدود است.اگر بخواهید مقدار داده ی زیادی را ارسال کنید،ممکن است به مشکل بر بخورید.
  • قدرت دید : هرکسی میتواند داده ای که در یک درخواست GET ارسال میشود را ببیند،این برای داده های حساس مثل رمزها عبور یا داده های فرمی مناسب نیست.

 

درخواست های POST شبیه به همین کار میکنند،فقط آن ها داده ها را در URL ارسال نمی کنند.این یعنی مقدار داده ی زیادی می تواند ارسال بشود ( داده به عنوان payload شناخته می شود).دسترسی به داده ها نیز آسان است.

چه POST استفاده بشود چه GET، داده ها در key>value ارسال خواهند شد.در URL بالا،name کلید است و مقدار Joe می باشد.

راه بهتر برای ثبت فرم ها استفاده از Asynchronous JavaScript and XML یا AJAX است.جاوااسکریپت درخواست های AJAX را پشتیبانی میکند، اما استفاده از آن ها میتواند گیج کننده باشد.شما میتوانید مرورگرتان را برای اجرای یک درخواست GET یا POST بسازید.برای این مثال،از POST استفاده کنید،اما درخواست های GET نیز به همین طریق اجرا می شوند.

$.post('some/url', $('#myForm').serialize());

این کد چندین کار را انجام میدهد.قسمت اول ($) مرورگر شما را مطلع می کند که شما میخواهید برای این عملیات از jQuery استفاده کنید.قسمت دوم روش post را از jQuery درخواست می کند.شما باید دو پارامتر را در نظر بگیرید : اول،url ای برای ارسال داده ها،و دوم خود داده ها.احتمالاً (بسته به URL ای که سعی در دسترسی دارید) خواهید دید که ضوابط امنیتی same-origin مداخله کنند.میتوانید اشتراک منبع cross-origin را به این خاطر فعال کنید ، اما اشاره به یک URL که روی یک دامنه ی مشابه مثل صفحه تان هوست شده باشد،کافی خواهد بود.

پارامتر دوم روش serialize از jQuery را روی فرم شما درخواست می کند.این روش باعث ایجاد دسترسی به فرم داده از فرم شما می شود،و آن ها را برای مخابره آماده می کند.

این کد به تنهایی برای ثبت یک فرم کافی است،اما ممکن است چیزهایی را ببینید که کمی عجیب هستند،به دلیل اینکه درخواست های عیب یابی شبکه را ساده می کنند،ارزش بازرسی ابزارهای توسعه ی مرورگرتان را دارند.

 

به طور ثانویه،Postman یک ابزار رایگان برای تست درخواست های HTTP است.

اگر مایل هستید که فرمتان را با استفاده از AJAX و در زمان فشردن دکمه ی ثبت،ثبت کنید،کار آسانی است.باید کدتان را به رویداد submit فرم،الصاق کنید.  

$(document).on('submit','#myForm',function(){

 $.post('some/url', $('#myForm').serialize());

 return false;

});

این کد کارهای زیادی انجام میدهد.زمانی که فرمتان ثبت شد،مرورگرتان کد را اجرا میکند.سپس کد شما فرم داده را با استفاده از AJAX ثبت می کند.آخرین گام برای جلوگیری ثبت فرم اصلی لازم است.شما یک بار اینکار را با AJAX انجام داده اید،پس نمیخواهید دوباره اتفاق بیفتد!

اگر می خواهید که کارهای دیگری پس از اتمام AJAX انجام دهید(یا حتی شاید یک پیام وضعیتی را برگشت دهید)،باید از یک callback استفاده کنید.jQuery این را تسهیل می کند:

$.post('url', $('#myForm').serialize(), function(result) {

 console.log(result);

}

قسمت result شامل هر داده ی ارسال نشده ای می شود که توسط url برگشت داده شده.شما میتوانید به راحتی به این داده پاسخ بدهید:

if(result == 'success') {

 // do some task

}

else {

 // do some other task

}

خب!این هم از پست امروز.امیدوارم که شناخت کافی از درخواست های HTTP و نحوه ی کار AJAX در زمینه ی فرم ها پیدا کرده باشید.

آیا ترفندهای جدیدی امروز یاد گرفتید؟ شما از AJAX با فرم ها چگونه استفاده میکنید؟نظراتتان را با ما به اشتراک بگذارید.

 

 منبع : MakeUseOf

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات