تبلیغات
Fact World - ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)

آموزش برنامه نویسی و مهارتهای وب

article 

ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)

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


یکشنبه 13 مهر 1393

نظرات ()


شنبه 18 شهریور 1396 08:09 ق.ظ
I enjoy reading an article that can make people think.

Also, many thanks for permitting me to comment!
سه شنبه 17 مرداد 1396 10:38 ق.ظ
Spot on with this write-up, I honestly believe that this amazing site
needs much more attention. I'll probably be back again to see more, thanks for the advice!
دوشنبه 16 مرداد 1396 02:06 ب.ظ
Hi, yup this article is really fastidious and I have learned lot of things from
it on the topic of blogging. thanks.

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )