i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
parsgreen.com
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
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>
<!-- https://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>
<!-- https://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
related مطالب بیشتر:
» نمایش و ذخیره اطلاعات فایل با آژاکس (Ajax)
» آموزش ای جکس (Ajax)، تکنیک غیرهمزمانی در وب
» نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (ajax)
» فریم ورک های آژاکس (Ajax Frameworks)
» نمایش افکت fade in با آژاکس (ajax)
commentنظرات (۳۹ یادداشت برای این مطلب ارسال شده است)
نویسنده: saeid
زمان: ۱۸:۲۷:۱۵ - تاریخ: ۱۳۹۴/۰۳/۲۸
ممنون از پاسختون
منظورم همان بعد از پرس و جو کردن و بدست آوردن مقدار مورد نظر از MySQL جایگذاری شود دقیقا بجای id در عبارت
$name = $_POST['id'];
چون نام فیلد ها در فرم html از طریق پرس و جو از دیتابیس بدست می آید در صفحه php هم برای دریافت مقادیری که از متد post ارسال شده هم از روش پرس و جو استفاده میشه
چون در صفحه html به سادگی میتوان مقدار پرس و جو رو به عنوان نام فیلد جای گذاری کرد اما در صفحه php نمی توان مقدار را جایگزاری کرد
امیدوارم توانسته باشم درست منظورم رو بیان کرده باشم
با تشکر
پاسخ: 
اگر می خواهید برای پارامتر قسمت POST در PHP مقادیری از دیتابیس را قرار دهید که در واقع همان نام فیلد است، حالت زیر صحیح است:
$name = $_POST[$row['id']];
روش دیگر نسبت دادن مقادیر قسمت row (که در مثال شما عبارت data استفاده شده) در حلقه while به متغیر دیگر و استفاده از آن متغیر در ادامه کدها است.
نویسنده: saeid
زمان: ۱۴:۳۴:۱۶ - تاریخ: ۱۳۹۴/۰۳/۲۹
ممنون از راهنماییتون مشکل بطرف شد و همون دو تا ' اضافه باعث خطا شده بود
نویسنده: ترنم
زمان: ۲۳:۲۲:۳۸ - تاریخ: ۱۳۹۴/۰۵/۱۸
سلام و خداقوت
من میخوام از طریق ajax بین دو کاربر اطلاعات رد و بدل کنم مثلا یک کاربر پیامی به کاربر دیگر ارسال کند.
دقیقا نمیدونم باید چیکار کنم، میشه کمک کنید؟؟؟
پاسخ: 
سلام
این موارد جزء قابلیت های تقریبا پیشرفته محسوب می شوند، به این معنی که شما حداقل باید یک برنامه نویس با تجربه متوسط باشید تا بتوانید چنین سیستمی طراحی کنید، در هر صورت در حد راهنمائی، ابتدا باید در دیتابیس ساختار مناسب را طراحی کنید که شامل جدول اطلاعات کاربران، جدول مدیریت پیام ها و ... است، در مرورگر نیز یک موتور Ajax داشته باشید که به فواصل زمانی مشخص، فرآیندها را با دیتابیس هماهنگ کند، به این صورت که به فرض پیام کاربر را به سرور منتقل و بین پیام های موجود، موارد خوانده نشده ای که گیرنده پیام، کاربر حاضر می باشد را دریافت و در مرورگر او چاپ کند، البته قاعدتا بدون آشنایی با مباحثی مانند سشن و کوکی نمی توانید درک درست و راحتی از نحوه طراحی این ساختار داشته باشید.
نویسنده: غریب
زمان: ۱۸:۵۲:۴۶ - تاریخ: ۱۳۹۴/۰۶/۱۹
سلام دوست عزیز بنده دو سوال در مورد متد get دارم
اول اینکه چطور میشه یه عدد یا کلمه پیش فرض واسه فایل قرار داد یعنی وقتی طرف مقابل خود فایل پی اچ پی رو بدون متد اضافه شده به اخرش باز میکنه جلوی جاهایی که ما در فایل مقدار دهی کردیم خالی نباشه و مثلا یه عدد پیش فرض داشته باشه
دوم اینکه چطور میتونم برای فایل متغییر با این متد محدودیت کاراکتر بزارم که کاربر مثلا فقط بتونه 10 حرف و یا کاراکتر وارد بخش خالی متد get بکنه این رو برای امنیت میخوام البته بگم متد پست نیست
ممنون و خسته هم نباشید
پاسخ: 
سلام
- اگر منظور از "باز کردن فایل" همان فراخوانی از طریق مرورگر است، در این صورت می توانید با یک دستور شرطی، مقدار اولیه برای پارامتر در نظر بگیرید، به فرض:
<?php
$var = $_GET['param'];
if(!isset($var) || $var == ''){
$var = 0;
}
?>
- برای متد GET نمی توانید در سمت مرورگر محدودیت ایجاد کنید (تا حدی که مرورگر اجازه دهد، کاربر می تواند پارامتر را به سرور ارسال کند)، منتها ایمن سازی باید ابتدا توسط فایروال و ماژول های امنیتی سرور انجام شود، سپس در کدهای PHP نیز می توان طول رشته را بررسی کرد:
<?php
$var = $_GET['param'];
if(mb_strlen($var) > 10){
echo 'Error!';
}
?>
نویسنده: غریب
زمان: ۲۱:۵۴:۰۴ - تاریخ: ۱۳۹۴/۰۸/۰۲
سلام مجدد عزیز
کد اول رو گذاشتم اما عمل نکرد اگه میشه توضیح کاملتری بدید ممنون میشم و مشکل اصلی بنده اینه که میخوام با این متد لینک تصویر قرار داده بشه اما مشکل اینجاست که ممکنه فایلهای مخربی بگذارن حالا پیشنهاد شما برای بنده چیه ایا دستوری هست که بشه چند فرمت رو به فایل معرفی کرد؟
و کلا پیشنهاد شما برای بنده چی هست که بتونم امنیت همچین فایلی رو حفظ کنم ممنون میشم ساده و روون توضیح بدید چون دانش بنده قابل مقایسه با شما نیست جوری بفرمایید که بنده هم بتونم استفاده کنم از راهنماییتون مرسی و موفق باشید
در ضمن واقعا تشکر میکنم ازتون بابت راه اندازی سایتی اینگونه مفید جایی مثل سایت شما پیدا نکردم که انقدر ساده و بی تکلف به خواست دیگران اهمیت بده
پاسخ: 
سلام
- این کد صرفا یک مثال بود نه کدی کاربردی، منظور این بود که شما اگر با PHP آشنا باشید، با چنین روشی می توانید پارامترهای ارسالی به سرور را مدیریت کنید، قاعدتا اگر با PHP آشنا نباشید، نمی شود انتظار داشت چند خط کد ساده همه کارها را انجام دهد، باید معنی دستورات استفاده شده را بدانید.
- دقیقا متوجه نشدیم، منظورتان از لینک تصویر با متد GET چیست؟! آیا در حال طراحی یک سیستم آپلود هستید؟ لطفا ضمن توضیح گام به گام هدفتان، چند اسکرین شات تهیه یا آدرس صفحه مورد نظر را درج کنید.
نویسنده: Sepehr
زمان: ۱۹:۰۳:۵۵ - تاریخ: ۱۳۹۴/۱۱/۰۹
با عرض سلام. من برای پروژه دانشگاه لازم هست تا با فناوری Ajax و Php از پایگاه داده اطلاعاتی را جستجو کرده و بدون ریفرش شدن صفحه اطلاعات نمایش داده شود.
اطلاعات به گونه ای از قبل در Mysql ذخیره شده اند که کلید اصلی کد ملی است. در صورتی که مدیریت سایت در هنگام جستجو کد ملی شخص را وارد کند باید اطلاعات او با فناوری Ajax در خروجی نشان داده شود. از شما خواهشمند هستم من را راهنمایی بفرمایید . با تشکر
پاسخ: 
سلام
لطفا از طرح سوالات کلی خودداری کنید!
برای این کار علاوه بر آشنایی با PHP و نحوه ارتباط با MySQL، باید مباحث AJAX را هم مرور کرده باشید، در این صورت با آموزش ها و نمونه کدهایی که وجود دارد می توانید مطابق نیازتان کدهای پروژه را تعریف کنید.
نویسنده: وب ایکسو
زمان: ۱۱:۵۵:۴۶ - تاریخ: ۱۳۹۵/۰۱/۰۶
سایت بسیار خوبی دارین، موفق و پیروز باشید
نویسنده: مهدی
زمان: ۱۷:۲۳:۱۴ - تاریخ: ۱۳۹۵/۰۸/۰۸
سلام
ما هر وقت از متد post استفاده می کنیم باید
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
رو هم بنویسیم؟ یا نه؟
و اگه نه ، چه مواقعی باید نوشت؟
ممنون از راهنمایی هاتون!
پاسخ: 
متد setRequestHeader برای تنظیم سربرگ های HTTP در یک درخواست مبتنی بر AJAX است، در حالت معمول نیازی به تنظیم این مقادیر نیست و به صورت پیش فرض داده ها به صورت متنی ارسال می شوند، اما اگر بخواهید به طور مثال یونیکد داده های ارسالی را مشخص کنید، باید از این متد استفاده کنید (توضیح این موارد نیاز به اموزش های جداگانه دارد!)، لیست پارامترهایی که می توانید در این متد استفاده کنید:
https://en.wikipedia.org/wiki/List_of_HTTP_header_fields
نویسنده: محسن
زمان: ۰۱:۱۰:۲۴ - تاریخ: ۱۳۹۵/۱۲/۱۷
با سلام و خسته نباشید بابت سایت و مطالب خوبتون.
من یه سوال دارم.
من در جایی از سایتم یک کوئری با متد get می گیرم از مواردی که در دیتابیس ذخیره شده.
به این صورت:
http://khadmat.ir/search.php?id=157
که این کوئری با توجه به شماره id نتیجه مربوطه رو نمایش میده.
حالا نگرانی و سوالم اینه که من چطور میتونم جلوی کوئری ناخواسته رو بگیرم!
یعنی اینکه نذارم کاربر مستقیم از طریق تغییر شماره id در آدرس بار بیاد کوئری های هر id رو نمایش بده و ببینه!!!
با تشکر
پاسخ: 
دقیقا متوجه هدفتان نشدیم! در تئوری لینک های سایت یا حالت عمومی دارند یا حالت خصوصی و محافظت شده، برای لینک های عمومی به طور معمولا باید این امکان برای همه کاربران باشد که با فراخوانی، محتوا نمایش داده شود، در واقع با تغییر شماره ID باید محتوای مربوطه نمایش داده شود و این امری عادی است، اما اگر محتوای مد نظر خصوصی بود یا وجود نداشت، بحث دیگری است که باید در ابتدا برای آن یک قانون و ساختار مشخص داشته باشید، به طور مثال در ردیفی از دیتابیس برای ID های خصوصی به فرض ستون Access داشته باشید، اگر برابر 1 بود، محتوا را به کاربر نمایش دهید، در غیر اینصورت پیام خطای 403 را چاپ کنید! همین طور است برای ID هایی که در دیتابیس وجود ندارند، اگر نتیجه پرس و جو برابر 0 ردیف بود می توانید پیام "محتوای مد نظر در سایت وجود ندارد" را چاپ کنید!
paged صفحه 3 از 3




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 6
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)