ارسال و دریافت اطلاعات با متد GET و POST در ای جکس (Ajax)

متد GET و POST در ای جکس (Ajax)

همانطور که پیش از این گفتیم درخواست های مبتنی بر ای جکس (Ajax) از چند قسمت اصلی تشکیل شده اند (آبجکت XMLHttpRequest، متد open، متد send، متد onreadystatechange و readyState)، آبجکت XMLHttpRequest ساز و کار مورد نیاز را برای ارسال و دریافت اطلاعات بر بستر Ajax فراهم می کند، متد open یک فایل را در سرور با یکی از متدهای GET یا POST فراخوانی کرده و پارامترهای مورد نیاز در قسمت send ارسال می شوند، متد onreadystatechange نیز در کنار متد readyState وضعیت های مختلف را در طی این فرآیند بررسی می کند، با ذکر این ساختار کلی این قسمت از آموزش را به متد open و send اختصاص می دهیم که خود از متدهای GET و POST در پروتکل HTTP استفاده می کنند، به طور خلاصه:
- open و send توابعی در Ajax هستند که برای فراخوانی یک فایل از سرور و ارسال پارامتر به آن از آنها استفاده می کنیم (این توابع را در اصطلاح برنامه نویسی شی گرا، متد می گویند).
- متد open برای فراخوانی فایل از سرور از یکی از شیوه های تعریف شده در پروتکل HTTP استفاده می کند، در پروتکل HTTP دو متد GET و POST برای ارسال و دریافت اطلاعات بین کاربر (Client) و سرور (Server) تعریف شده که جزء استانداردهای این پروتکل هستند.

پارامترهای متد open و send در ای جکس (Ajax)

هر درخواست مبتنی بر ای جکس (Ajax) در نهایت باید یک فایل را از سرور فراخوانی کند، این فراخوانی می تواند با ارسال مقادیر یا بدون ارسال مقادیر باشد، ای جکس برای این نیاز از دو متد open و send استفاده می کند که درخواست ها با این دو متد از طریق استاندارد HTTP و متدهای GET و POST در این استاندارد ارسال و نتیجه دریافت می شود، در نمونه کدهای زیر بخش مربوط به متد open و send از یک درخواست مبتنی بر ای جکس را بررسی می کنیم:

xmlHttp.open("GET", "index.php?action=add&id=22", true);
xmlHttp.send(null);

var params = "action=add&id=22";
xmlHttp.open("POST", "index.php", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(params);

همان طور که در نمونه کدهای بالا مشخص است، زمانی که متد GET در قسمت open استفاده می شود، پارامترها از طریق آدرس URL به سرور ارسال می شوند و قسمت send مقدار null یا خالی دارد، اما در حالت استفاده از POST باید تنظیماتی اعمال شود که از جمله استفاده از متد setRequestHeader است، این متد در ای جکس برای تنظیم سربرگ (Header) های HTTP در یک درخواست استفاده می شود، در مثال بالا نیز سربرگ Content-type با مقادیر application/x-www-form-urlencoded تنظیم شده است، این دستور به مرورگر تفهیم می کند که اطلاعات را مانند یک فرم ساده HTML ارسال کند، پارامترها در حالت استفاده از متد POST، هم می توانند از طریق آدرس URL (مشابه متد GET) و هم در بخش send ارسال شوند که هر کدام برای شرایط خاصی مناسب هستند که در ادامه در این رابطه بیشتر خواهیم گفت، پارامتر سوم متد open نیز برای تعیین غیر همزمانی (هم روند یا Asynchronous) بودن یا نبودن درخواست است، در صورتی که این مقدار true باشد در پیمایش صفحه کاربر خللی ایجاد نمی شود اما اگر این مقدار را false تنظیم کنیم، تا زمانی که فرآیند درخواست ای جکس به پایان نرسیده، کاربر نمی تواند در صفحه پیمایش کند.

GET یا POST، کدام متد را استفاده کنیم؟!

GET و POST هر کدام با هدف خاصی در HTTP تعریف شده اند، متد GET برای ارسال پارامترها در آدرس URL به کار می رود و از POST برای ارسال بسته های اطلاعات به صورت غیر قابل روئیت استفاده می شود.
کجا از GET استفاده کنیم؟
- متد GET معمولا برای ارسال پارامترهای دستوری در آدرس URL استفاده می شود، به طور مثال می توانیم شماره ID کاربر یا کلمه جستجو شده را در این متد ارسال کنیم.
- در صورتی که اطلاعات ارسال شده حالت عمومی داشته باشند استفاده از GET مانعی ندارد، به طور مثال ارسال اطلاعات حساس مانند رمز عبور از این طریق توصیه نمی شود چرا که در آدرس URL و به صورت آشکار قابل روئیت خواهد بود.
- در مواردی که نیاز به ذخیره سازی موقت (Cache) اطلاعات باشد GET گزینه مناسبی است (البته این حالت را می توان با برنامه نویسی جاوا اسکریپت به نحو دلخواه تغییر داد).
- متد GET در ای جکس سریعتر از متد POST است و برای موارد عمومی که صرفا نیاز به فراخوانی یک فایل از سرور با Ajax است، گزینه مناسبی است، متد POST در ای جکس به صورت دو مرحله ای عمل می کند (ابتدا سربرگ های HTTP و سپس اطلاعات ارسال می شوند).
جهت آشنایی بیشتر در مثال زیر اطلاعات فرضی را توسط متد GET برای یک فایل PHP با نام ajax-get.php ارسال و پاسخ را در بلاکی با آی دی result خروجی می دهیم:

فایل ajax-get.php

<?php
@$site = $_GET['site'];
@$domain = $_GET['domain'];
echo "نام سایت: $site<br>";
echo "آدرس دامنه: $domain<br>";
echo "متد استفاده شده: GET<br>";
?>

کد HTML درخواست و تنظیمات Ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ارسال و دریافت اطلاعات با متد GET</title>
<!-- Webgoo.ir -->
<style type="text/css">
body {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
</style>
<script type="text/javascript">
function ajaxCallFile(id) {
    var xmlHttp;
    
    try {
        //Opera, Firefox, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        //Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("متاسفانه مرورگر شما از ای جکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById(id).innerHTML = xmlHttp.responseText;
            document.getElementById('button-1').innerHTML = 'ارسال درخواست ای جکس';
            document.getElementById('button-1').disabled = false;
        } else {
            document.getElementById('button-1').innerHTML = 'لطفا چند لحظه صبر کنید...';
            document.getElementById('button-1').disabled = true;
        }
    }
    
    xmlHttp.open("GET", "ajax-get.php?site=Webgoo&domain=https://webgoo.ir", true);
    xmlHttp.send(null);
}
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br>
</noscript>
<button id="button-1" type="button" onclick="ajaxCallFile('result')">ارسال درخواست ای جکس</button>
<div id="result"></div>
<hr>
پس از کلیک بر روی دکمه بالا، تابع جاوا اسکریپتی فراخوانی شده و درخواست ای جکس به فایل PHP در سرور ارسال می شود، سپس نتیجه دریافت و در بلاک نمایش داده خواهد شد، در این مثال از متد GET استفاده شده است.
</body>
</html>

پیش نمایش
متد POST در ای جکس شباهت زیادی به GET دارد، با این تفاوت که در این شیوه درخواست، مانند تگ form در HTML سربرگ های HTTP یا HTTP Headers نیز به مرورگر ارسال می شوند، از طرفی xmlHttp.send به جای مقادیر null، پارامترهایی با مقادیر رشته ای دارد.
کجا از POST استفاده کنیم؟
- در ای جکس هرکجا نیاز به ارسال اطلاعات حساس مانند نام کاربری، کلمه عبور، مشخصات حساب بانکی و... باشد، بهتر است از POST استفاده کنیم، چرا که اطلاعات در این شیوه در آدرس URL قابل روئیت نیست.
- برای ارسال اطلاعات حجیم (به طور مثال اطلاعات یک فرم HTML) از POST استفاده می شود، متد GET از نظر میزان اطلاعات مجاز با محدودیت های بیشتری در مقایسه با POST روبرو است.
جهت آشنایی بیشتر در مثال زیر اطلاعات فرضی را توسط متد POST برای یک فایل PHP با نام ajax-post.php ارسال و پاسخ را در بلاکی با آی دی result خروجی می دهیم:

فایل ajax-post.php

<?php
@$site = $_POST['site'];
@$domain = $_POST['domain'];
echo "نام سایت: $site<br>";
echo "آدرس دامنه: $domain<br>";
echo "متد استفاده شده: POST<br>";
?>

کد HTML درخواست و تنظیمات Ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ارسال و دریافت اطلاعات با متد POST</title>
<!-- Webgoo.ir -->
<style type="text/css">
body {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
</style>
<script type="text/javascript">
function ajaxCallFile(id) {
    var xmlHttp;
    
    try {
        //Opera, Firefox, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        //Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("متاسفانه مرورگر شما از ای جکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById(id).innerHTML = xmlHttp.responseText;
            document.getElementById('button-1').innerHTML = 'ارسال درخواست ای جکس';
            document.getElementById('button-1').disabled = false;
        } else {
            document.getElementById('button-1').innerHTML = 'لطفا چند لحظه صبر کنید...';
            document.getElementById('button-1').disabled = true;
        }
    }
    
    xmlHttp.open("POST", "ajax-post.php", true);
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlHttp.send('site=Webgoo&domain=https://webgoo.ir');
}
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br>
</noscript>
<button id="button-1" type="button" onclick="ajaxCallFile('result')">ارسال درخواست ای جکس</button>
<div id="result"></div>
<hr>
پس از کلیک بر روی دکمه بالا، تابع جاوا اسکریپتی فراخوانی شده و درخواست ای جکس به فایل PHP در سرور ارسال می شود، سپس نتیجه دریافت و در بلاک نمایش داده خواهد شد، در متد POST از متد setRequestHeader استفاده و پارامترها در قسمت send تنظیم و ارسال می شوند، در این مثال از متد POST استفاده شده است.
</body>
</html>

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