در این قسمت از آموزش ajax در مقالات طراحی سایت می خواهیم نحوه ی ارسال و دریافت اطلاعات با متد get و post در آژاکس را برای شما بیان می کنیم .
با توجه به این نکته که شیوه ی نگارش یک درخواست برای دریافت اطلاعات در ajax از دستور زیر استفاده می شود به توضیح این دستور نیز می پردازیم .
xmlhttp.open("GET","textfile.php",true);
xmlhttp.send();
پارامترهای xmlhttp.open سه مورد هستند: متد، فایل و غيرهمزمانی (asynchronously) که با دو مقدار true یا false مشخص می شود . غيرهمزمانی (asynchronously) به معنی این است که با true بودن این قابلیت، درخواست آژاکسی، وقفه ای در اجرای ادامه کد در صفحه ایجاد نمی کند (ادامه کد بدون توجه به دریافت یا عدم دریافت پاسخ درخواست آژاکسی از سرور، اجرا می شود) . xmlhttp.send برای متد get مقادیری ندارد، اما برای متد post مقادیر رشته ای (string) دارد . از آنجاییکه متد get سریعتر و ساده تر می باشد معمولا از این متد استفاده می شود منتها در بعضی موارد از متد post استفاده می شود که این موارد عبارتند از:
√ فایل هدف نیاز به، به روز رسانی پی در پی (بدون کَش شدن) داشته باشد یا اطلاعات در پایگاه داده ذخیره شوند.
√ مقادیر زیادی را بخواهیم ارسال کنیم.زیرا post محدودیت حجمی ندارد.
√امنیت post بالا می باشد و در مواردی که با اطلاعات کاربران نیاز هست از این متد استفاده می شود .
در مثال زیر ما اطلاعاتی فرضی را توسط متد get برای یک فایل php با نام ajax-get.php ارسال می کنیم و پاسخ را در بلاکی با آی دی divid خروجی می دهیم:
<?php
$site = $_GET['site'];
$domain = $_GET['domain'];
echo "نام سایت شما: $site <br />";
echo "دامنه شما: $domain <br />";
?>
همچنین فایل html حاوی درخواست و تنظیمات آژاکسی را به صورت زیر نمایش می دهیم .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ارسال و دریافت اطلاعات با متد get</title>
<!-- http://webgoo.ir -->
<script type="text/javascript">
//<![CDATA[
function loadFile()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divid").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get-post.php?site=webgoo&domain=webgoo.ir",true);
xmlhttp.send();
}
//]]>
</script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<button type="button" onclick="loadFile()">ارسال درخواست آژاکسی</button>
<div id="divid"></div>
</body>
</html>
با توجه به اینکه متد post با get شباهت زیادی دارد و با این تفاوت که در این درخواست مانند فرم های عادی html مقادیر تحت عنوان header به مرورگر ارسال می شود و از طرفی xmlhttp.send دارای مقادیر رشته ای است .
<?php
$site = $_POST['site'];
$domain = $_POST['domain'];
echo "نام سایت شما: $site <br />";
echo "دامنه شما: $domain <br />";
echo "متد استفاده شده : Post <br />";
?>
کد html و تنظیمات آژاکسی را به صورت دستور زیر نمایش می دهند .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ارسال و دریافت اطلاعات با متد post</title>
<!-- http://webgoo.ir -->
<script type="text/javascript">
//<![CDATA[
function loadFile()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divid").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","ajax-post.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("site=webgoo&domain=webgoo.ir");
}
//]]>
</script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<button type="button" onclick="loadFile()">ارسال درخواست آژاکسی</button>
<div id="divid"></div>
</body>
</html>
در دستور بالا xmlhttp.setRequestHeader برای متد post مقادیر Header را به مرورگر ارسال می کند همچنین xmlhttp.send با مقادیر خود پارامترها را به فایل ajax-post.php ارسال می کند، این پارامترها می توانند از یک فرم html نیز دریافت شوند .