Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)
پس از آشنایی اولیه با فناوری آژاکس (ajax) و ارسال و دریافت اطلاعات به صورت پنهانی و در پشت زمینه (بدون رفرش صفحه)، در این مطلب می خواهیم نحوه استفاده از متُد get و post (دو شیوه استاندارد برای رد و بدل کردن محتوا بین صفحات وب و فایل های سرور) برای دریافت محتوای یک فایل متنی یا php را آموزش دهیم، لطفا توجه داشته باشید که در این مطلب تنها مباحثی را شرح خواهیم داد که در جلسه قبل ذکر نکرده ایم، لذا اگر نکته ای به نظر مبهم است، قبل از طرح سئوال ابتدا به مطالب گذشته رجوع نمائید.

همانطور که پیش از این گفتیم شیوه نگارش یک درخواست برای دریافت اطلاعات در 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 خروجی می دهیم:

فایل ajax-get.php

 

<?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","ajax-get.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 دارای مقادیر رشته ای است.

فایل ajax-post.php

 

<?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 نیز دریافت شوند (در مثال بالا پارامتر domain و site به طور مستقیم ارسال شده اند)، البته بدین منظور (ارسال اطلاعات یک فرم) نیاز به توابعی است که در بخش آموزش کاربردی آژاکس در این رابطه بیشتر خواهیم گفت.



1394/05/31 6:48:52 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما