article

ارسال اطلاعات فرم با ای جکس (Ajax) و نمایش پیام در حال پردازش

ajax

در آموزش های مقدماتی ای جکس (Ajax) گفتیم که چگونه می توان اطلاعات یک فرم را با متد GET یا POST برای یک فایل PHP ارسال و نتایج حاصل از پردازش آنها را بدون رفرش شدن صفحه به کاربر نشان داد که در واقع این فرآیند فلسفه پیدایش تکنیک Ajax است، در این مطلب می خواهیم کمی از تئوری فاصله گرفته و کدی کاربردی را قرار دهیم که به کمک آن بدون استفاده از کتابخانه هایی مانند جی کئوری (jQuery) و دردسرهایش، تنها بر مبنای ای جکس صرف (Pure Ajax) اطلاعات یک فرم HTML را به صورت پیشرفته ارسال و علاوه بر آن حالت در حال پردازش (loading یا processing) را نیز با تصویر و متن نمایش دهیم، به این ترتیب می توانیم در طراحی رابط کاربری (User Interface) صفحات وبی که مبتنی بر ای جکس هستند گام مثبتی برداشته و آخرین وضعیت پردازش درخواست را به اطلاع کاربر برسانیم.

کد HTML، دستورات CSS، JavaScript و Ajax


مانند آنچه در آموزش های مقدماتی دیدیم صفحات مبتنی بر تکنیک Ajax از سه قسمت کدهای سمت کاربر (کدهای HTML، CSS، JavaScript و...)، سمت سرور (برنامه نویسی به زبان PHP، ASP.NET و...) و رابط بین سمت کاربر و سمت سرور یعنی توابع Ajax تشکیل شده اند، از این رو برای ارسال و دریافت اطلاعات بین سمت کاربر و سمت سرور ابتدا باید بخش مربوط به کدنویسی HTML، CSS، JavaScript و Ajax را مشابه با نمونه کد زیر انجام دهیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ارسال اطلاعات فرم با ای جکس</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
label{
    width:100px;
    display:inline-block;
}
</style>
<script type="text/javascript">
var div_id = 'show-result';
var loading_message = '<img src="loading.gif" alt="loading" height="16" width="16"> لطفا کمی صبر کنید...';

function ajaxRequest(){
    var xmlHttp;
    try{
        xmlHttp = new XMLHttpRequest();
        return xmlHttp;
    } catch (e){
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            return xmlHttp;
        } catch (e){
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                return xmlHttp;
            } catch (e){
                alert('مرورگر شما از ای جکس پشتیبانی نمی کند!');
                return false;
            }
        }
    }
}

function formGet(form, url){
    var post_str = getFormValues(form);
    //alert(post_str);
    postData(url, post_str);
}

function postData(url, parameters){
    var xmlHttp = ajaxRequest();
    
    xmlHttp.onreadystatechangefunction(){
        if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
            document.getElementById(div_id).innerHTML = loading_message;
        }
        if(xmlHttp.readyState == 4){
            document.getElementById(div_id).innerHTML = xmlHttp.responseText;
        }
    }
    
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", parameters.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(parameters);
}

function getFormValues(form){
    var str = '';
    for(var i = 0;i < form.elements.length;i++){
        switch(form.elements[i].type){
            case 'text':
            str += form.elements[i].name +
            '=' + encodeURI(form.elements[i].value) + '&';
            break;
            case 'textarea':
            str += form.elements[i].name +
            '=' + encodeURI(form.elements[i].value) + '&';
            break;
            case 'select-one':
            str += form.elements[i].name +
            '=' + form.elements[i].options[form.elements[i].selectedIndex].value + '&';
            break;
            case 'checkbox':
            if(form.elements[i].checked == true){
                str += form.elements[i].name +
                '=' + form.elements[i].value + '&';
            } else{
                str += form.elements[i].name +
                '=' + '0' + '&';
            }
            break;
        }
    }
    str = str.substr(0, (str.length - 1));
    return str;
}
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
<br>
</noscript>

<form name="form-name" action="#">
<label for="name">نام: </label>
<input id="name" name="name" type="text" size="50" placeholder="نام خود را وارد کنید">
<br>
<br>
<label for="email">پست الکترونیک: </label>
<input id="email" name="email" type="text" size="50" placeholder="پست الکترونیک خود را وارد کنید">
<br>
<br>
<label for="number">انتخاب شماره: </label>
<select id="number" name="number">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<br>
<label for="check">تایید: </label>
<input id="check" name="check" type="checkbox" value="1">
<br>
<br>
<input name="send" type="button" value="ارسال" onclick="formGet(this.form, 'ajax-post-form.php');">
</form>
<div id="show-result"></div>
<hr>
پس از کلیک بر روی دکمه ارسال، تابع جاوا اسکریپتی formGet اجرا شده و فرآیند درخواست ای جکس شروع می شود، در نهایت نتیجه در بلاک div با آی دی فرضی show-result نمایش داده خواهد شد، یکی از بخش های مهم این کد ارسال آبجکت فرم با تابع formGet و استفاده از آن در تابع getFormValues است، از این آبجکت برای دسترسی به زیرمجموعه های تگ form مورد نظر استفاده خواهیم کرد.
</body>
</html>
این کدها را در فایلی با نام دلخواه و پسوند html یا php ذخیره کنید.
توضیح:
- اولین تابعی که پس از کلیک بر روی دکمه ارسال فراخوانی می شود formGet است که دو آرگیومنت دارد، آرگیومنت اول آبجکت فرم و آرگیومنت دوم نام فایلی است که اطلاعات به آن ارسال خواهد شد.
- اطلاعات به فایلی در سرور با نام ajax-post-form.php ارسال و نتیجه از آن دریافت می شود، در طی این فرایند متغیر loading_message در حالتی که متد xmlHttp.readyState بین 0 تا 4 است در خروجی چاپ و پیامی مبنی بر در حال پردازش بودن درخواست ای جکس به همراه تصویر متحرک نشان داده می شود.
- تابع ajaxRequest برای ایجاد ساز و کار ارسال درخواست و دریافت پاسخ به شیوه ای جکس است که با مرورگرهای مختلف سازگار شده و نهایتا اگر سیستم کاربر نتواند درخواست را ارسال کند پیامی مبنی بر پشتیبانی نکردن مرورگر از ای جکس نشان داده خواهد شد.
- متدی که در کد استفاده شده متد POST است، در خصوص تفاوت متد GET و POST در آموزش های مقدماتی صحبت کردیم، در اینجا نکته مهم این است که باید در سمت سرور نیز با متد POST پارامترها را دریافت کنیم.
- تابع getFormValues اطلاعات فیلدهای فرم را بر اساس نوع آنها دریافت و به عنوان نتیجه در نهایت به صورت یک رشته متنی برمی گرداند، این اطلاعات در تابع formGet به عنوان پارامتر در تابعی دیگر با نام postData و متغیر post_str استفاده می شوند که در نهایت از آن در قسمت xmlHttp.send جهت ارسال پارامترهای اطلاعاتی در قالب متد POST استفاده می کنیم، نمونه:
name=your-name&email=your@email.com&number=1&check=1
- برای سازگاری با یونیکد utf-8 (پشتیبانی از زبان فارسی) و جلوگیری از مشکلات احتمالی در ارسال اطلاعات فرم از طریق ای جکس از تابع encodeURI استفاده کرده ایم، این تابع مقادیر فیلدها را جهت استفاده در درخواست ای جکس به صورت کاراکترهای استاندارد utf-8 تبدیل می کند.

دستورات PHP جهت دریافت و پردازش درخواست ای جکس


با استفاده از کدهای PHP زیر مقادیر ارسال شده از درخواست مبتنی بر ای جکس را دریافت، پردازش و خروجی را به عنوان پاسخ ارسال می کنیم، همان طور که مشخص است در این قسمت نیز از متد POST استفاده کرده ایم.
<?php
$name = @$_POST['name'];
$email = @$_POST['email'];
$number = @$_POST['number'];
$check = @$_POST['check'];

echo "نام شما: $name <br>";
echo "پست الکترونیک شما: $email <br>";
echo "شماره انتخاب شده: $number <br>";
echo "وضعیت تایید: $check <br>";
?>
پیش نمایش
این کدها را نیز در فایلی با نام ajax-post-form.php ذخیره و در کنار فایل قبلی (کدهای سمت کاربر) قرار دهید، با درک این ساختار ساده به راحتی می توانیم در برنامه های کاربردی و پیچیده تر موارد دلخواه خود را ایجاد و کد را سفارشی سازی کنیم.
sectionدسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
» نمایش زنده آمار و اطلاعات با ای جکس (Ajax)
» لیست داینامیک پیشنهاد کلمات، مبتنی بر ای جکس، PHP و MySQL
» اعتبار سنجی همزمان فرم با آژاکس (Ajax) و PHP
» نمایش نتایج پایگاه داده MySQL با PHP و ای جکس (Ajax)
» ساخت قابلیت امتیازدهی با PHP و Ajax
commentنظرات (۳۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: میلاد
زمان: ۱۸:۰۰:۱۲ - تاریخ: ۱۳۹۵/۰۷/۰۳
سلام ممنون بابت سایت خوبتون خواستم بپرسم از لحاظ امنیتی مشکلی پیش نمیاد اگه با آجاکس فرم پسورد رو ارسال کنیم؟ یعنی منظورم اینه که ممکنه هکرها بتونن پسورد وارد شده توسط کاربر رو دریافت کنند؟
پاسخ: 
Ajax به جز عدم نیاز به رفرش صفحه، تفاوت دیگری در نوع پردازش و ارسال اطلاعات ندارد، لذا رعایت همان نکات معمول برای Ajax نیز کافی خواهد بود!
نویسنده: مبدأ
زمان: ۱۴:۵۲:۴۹ - تاریخ: ۱۳۹۵/۱۲/۰۸
سلام از کد شما استفاده کردم اما دوتا مشکل دارم. اول اینکه از کلیه اطلاعات صفحه یک کپی میگیره و دوباره نمایش میده و دومین مشکل اینه که وقتی دیزاینم رو تغییر می دهم این کدها دیگر به درستی عمل نمی کند. یعنی صفحه مجددا رفرش می شود. لطفا راهنمایی بفرمایید.
پاسخ: 
در مورد بخش اول، بعد از ارسال درخواست Ajax هرچیزی که به عنوان پاسخ دریافت شود، نمایش داده می شود، لذا باید پاسخ سرور به درخواست Ajax صرفا شامل متن یا تگی باشد که می خواهید نشان داده شود نه کل کدهای یک صفحه (انجام این کار نیازمند آشنایی شما با برنامه نویسی PHP است!)، اما در مورد بخش دوم سوال، دقیقا متوجه مشکل نشدیم، در صورتی که در طراحی خود دستورات مورد نیاز Ajax وجود داشته باشد با فراخوانی تابع نباید مشکلی پیش بیاید، لصفا به سورس کدهای آموزش دقت کنید و سعی کنید این الگو را در کدهای خود حفظ نمائید.
نویسنده: حسام آقاجانی
زمان: ۱۸:۲۰:۲۹ - تاریخ: ۱۳۹۶/۱۲/۲۸
سلام خسته نباشید من کد زیر رو برای ارسال انلاین مقدار range نوشتم ولی دوتا مشکل دارم نمیدونم مقدار رو چطور دریافت کنم و ارسال نمیشه ممنون میشم کمکم کنید .
https://energy-pak.com/test.txt
پاسخ: 
ظاهرا عنصری با آی دی here در کدها وجود ندارد؟! در هر صورت در صورت تمایل می توانید کد را به صورت آنلاین و قابل تست قرار دهید تا بررسی گردد.
نویسنده: Mobin
زمان: ۱۴:۴۹:۴۰ - تاریخ: ۱۳۹۷/۰۲/۱۰
سلام
ممنون از مطلب خوبتون
یه مشکلی که من با ajax دارم اینه که بعد از این که اطلاعات صفحه رو چاپ کردم دیکه jquery المان های جدید رو نمیشناسه و حتما باید صفحه رفرش میشه به عنوان مثال من از اجاکس استفاده میکنم که یک کلید بسازه بعد از اون میخوام اون کلید دوباره یک اجاکس بفرسته
خب اینجا باید صفحه رفرش بشه که جاوا اسکریپت دوباره صفحه رو با دام هاش اسکن کنه اما من نمیخوام صفحه رفرش بشه یکی دیگه از روش ها اینه که فایل جاوا اسکریپت که برنامه توش هست رو reload کنم که خوندم این کار امن نیست مخواستم بپرسم شما راه حلی واسه این مشکل دارید؟
پاسخ: 
هرچند درک دقیق مشکل و ارائه راه حل نیازمند بررسی بیشتر و تست کدها است اما با توجه به توضیحات به نظر باید دکمه ها و مواردی از این قبیل را به کمک جاوا اسکریپت ایجاد کنید، به فرض در حالت عادی دکمه مخفی باشد و پس از دریافت پاسخ از سرور با Ajax (پاسخ می تواند با فرمت دلخواه به فرض JSON باشد) آن را تجزیه کرده و در صورت نیاز دکمه را با جاوا اسکریپت از حالت مخفی خارج کنید (به فرض با متد document.getElementById مقدار خاصیت display آن را از none به block تغییر دهید).
نویسنده: رضا
زمان: ۲۳:۰۳:۲۳ - تاریخ: ۱۳۹۷/۰۶/۲۷
بسیار عالی بود...
نویسنده: ساحل
زمان: ۱۱:۲۹:۵۷ - تاریخ: ۱۳۹۸/۰۱/۱۷
سلام
روز بخیر
ببخشید میخواستم نظر شما در مورد امنیت ajax بدونم. اگر برای یک سایت مثلا بخش ویرایش کاربر و ثبت کاربر و یک سری ایتم های دیگه به صورت ajax بنویسم و در دیتابیس ذخیره کنه از نظر شما امنیت سایت پایین نمیاد ؟
میخواستم بدونم کار استانداری برای کدنویسی هست؟
و اگر تابع و متدهایی داره برای امنیت بیشتر میشه لطفا بگید
با تشکر
پاسخ: 
Ajax تنها یک شیوه دیگر ارسال و دریافت مقادیر بین صفحه کاربر (Client) و سرور است و اصول آن با حالت معمول (ارسال فرم و رفرش صفحه) تفاوتی نمی کند، لذا از نظر امنیت نکته ی بخصوصی ندارد، کدها باید در سمت سرور به لحاظ امنیتی دقیق و حساب شده باشند، به فرض برای دریافت کلمه عبور صرفا از متد POST استفاده شود (نه GET)، پارامترها قبل از استفاده در پرس و جوهای دیتابیس ایمن سازی شوند، در صورت امکان سایت به صورت HTTPS و مجهز به گواهی SSL باشد.
نویسنده: ساحل
زمان: ۱۳:۰۵:۴۶ - تاریخ: ۱۳۹۸/۰۱/۱۷
ممنون
ممنون
ممنون
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




4 × 1
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form adel
در:
سلام با تشکر از سایت خوب شما. یه سوال داشتم چگونه تمام این کدها را در جاوا اسکریپت همزمان قرار دهیم. من مثلا دستور این...
۲۱:۲۵:۴۰ ۱۳۹۸/۰۸/۲۴

form یه سوال کننده
در:
سلام. ببخشید چطور میشه ایمیل هایی رو میفرستن که ریپلای زدن رو ایمیلی که از طرف ما نبوده بیشتر تو تبلیغات دیدم امیدوارم منظورم و...
۰۳:۲۳:۰۸ ۱۳۹۸/۰۸/۲۴

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

form حمید
در:
سلام. خسته نباشید. من میخاستم استایل فیلدهای فرمم رو تغییر بدم منتهی نمیدونم از چه کدهایی باید استفاده کنم. برای اینکه فرمی به شکل...
۱۰:۳۶:۱۹ ۱۳۹۸/۰۸/۱۹

form سمیه
در:
سلام ممنون بابت آموزش مفیدتون توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم...
۲۰:۴۹:۲۳ ۱۳۹۸/۰۸/۱۷

form استادمجازی
در:
سلام. از ادمین عزیز و همگی دعوت می کنم آموزش های خوبتون را بصورت آموزش ویدیویی یا صوتی و... در سایت ostadmajazi.com استادمجازی ...
۲۲:۱۲:۲۳ ۱۳۹۸/۰۸/۱۳

form mohamad
در:
سلام و خسته نباشید ، توی فرمی که ساختم چند تا drop down دارم که میخوام با php براشون شرط بذارم به طوری...
۱۳:۵۱:۳۴ ۱۳۹۸/۰۸/۱۰

form رضا
در:
خسته نباشید این جلسه آخر html بود؟؟؟؟
۰۱:۱۵:۰۷ ۱۳۹۸/۰۸/۱۰

form امیرمحمد
در:
سلام و خسته نباشید استاد بنده میخوام بین دو کد زیر که مشخص کردم رو به دست بیارم
// ---------------------set سلام...
۱۹:۳۰:۵۳ ۱۳۹۸/۰۸/۰۸

form حجت
در:
خیلی ممنونم از لطف شما. اوکی شد.
۱۰:۲۸:۳۵ ۱۳۹۸/۰۸/۰۶

form میلاد
در:
آشنایی نسبی با css, php و ajax دارم و نمیخام از library های موجود در نت استفاده کنم. خواستم با همین متد که انصافا روان...
۲۳:۲۲:۵۵ ۱۳۹۸/۰۸/۰۵

form عرفان
در:
با سلام. مدتی بود که بدلایل مشکلات زیاد نتونستم به وبلاگم رسیدگی کنم ولی وقتی برگشتم میبینم که هزاران بازدید داشتم و همشونم به زبان...
۲۲:۴۹:۴۴ ۱۳۹۸/۰۸/۰۵

form raha
در:
سلام وقتتون بخیر ببخشید علامت @ در کل به چه معناست ممنون میشم پاسخ دهید
۲۰:۱۲:۵۹ ۱۳۹۸/۰۸/۰۵

form میلاد
در:
باسلام تشکر از مطالب روان و پرکاربردتان. در خصوص آموزش مذکور، نحوه و ترفند نمایش محور عمودی در سمت چپ نمودار (مشابه...
۰۲:۳۸:۴۰ ۱۳۹۸/۰۸/۰۵