Ajax در jQuery

اسفند ۲۲, ۱۳۹۰ توسط : سعید

در این مقاله به بررسی راههای ساخت صفحات Ajax به وسیله jQuery میپردازیم.

در کتابخانه jQuery به ۵ روش میشه با Ajax کار کرد:
load.
$.post
$.get
$.getJSON
$.getScript

 متد load

یکی از ساده ترین و پر استفاده ترین راههای کار با Ajax در جی کوئری استفاده از تابع load میباشد.این تابع محتوای یک صفحه رو به صورت ای جکس بارگذاری میکنه.
مثال :

<script>
$('#load').click(function(){
var loading = '<img src="loading.gif" />';
$('.result').html(loading).load('getName.php?id=2');
});
</script>
<div></div>
<button id="load">Load</button>

در کد بالا هنگامی که روی کلید کلیک میشه ابتدا در div یک عکس loading نمایش داده میشه سپس هنگامی که اطلاعات به طور کامل از سرور دریافت شد در تگ div قرار میگیره .
با استفاده از این تابع فقط میتونیم اطلاعات رو به صورت  GET به سمت سرور بفرستیم .

تابع $.post ارسال درخواست به صورت POST

گاهی اوقات نیاز هست که ساطلاعات به صورت POST به سمت سرور ارسال بشه . برای اینکار از تابع $.post در jQuery استفاده میکنیم.

$('#load').click(function(){
var loading = '<img src="loading.gif" />';
$('.result).html(loading);
$.post(
'getName.php' ,
{id: '2'} ,
function(data){
$('.result).html(data);
}
, 'html');
});

متد post چهار پارامتر میگیره.
پارامتر اول نام صفحه ای که قراره درخواست رو ارسال کنیم.
پارامتر دوم مقادیری که با POST ارسال میکنیم رو باید قرار بدیم.این مقادیر باید با فرمت json ارسال بشه.
پارامتر سوم یک تابع که هنگامی که درخواست به سرور با موفقیت ارسال و دریافت شد اجرا میشه.میبینید که این تابع یک پارامتر داره(data) در متغیر data مقادیر ارسالی از سمت سرور قرار میگیرن.
پارامتر چهارم فرمت دریافت داده ها رو مشخص میکنه.که در مثال بالا ما فرمت دریافت داده ها رو html مشخص کردیم.

هنگاهی که مقادیر ارسالی از سمت سرور به صورت json باشه به صورت زیر عمل میکنیم :

$('#load').click(function(){
var loading = '<img src="loading.gif" />';
$('.result).html(loading);
$.post(
'getName.php' ,
{id: '2'} ,
function(data){
alert('Name : '+data.name+ ' City: '+data.city);
}
, 'json');
});

و در سمت سرور :

if(isset($_POST['id']))
echo json_encode(array('name'=>'saeed','city'=>'mashhad'));

تابع json_encode یک آرایه به عنوان ورودی میگیره و تبدیل به فرمت json میکنه و برمیگردونه.

تابع $.get برای ارسال مقادیر به صورت GET

این تابع شبیه به تابع $.post عمل میکنه با این تفاوت که مقادیر به صورت GET به سمت سرور ارسال میشن.مزیت این تابع نسبت به تابع load اینه که میتونیم نوع دریافت داده ها رو مشخص کنیم و انعطاف بیشتری هم داره.

$('#load').click(function(){
var loading = '<img src="loading.gif" />';
$('.result).html(loading);
$.get(
'getName.php' ,
{id: '2'} ,
function(data){
alert('Name : '+data.name+ ' City: '+data.city);
}
, 'json');
});

 

تابع $.getJSON دریافت اطلاعات به صورت JSON از سرور

این تابع اطلاعات رو به صورت JSON به سرور میفرسته و به صورت jSON هم از سرور دریافت میکنه.

$.getJSON('getJSON.php'  , { id : 2} ,function(data){
alert(data.name);
});

این تابع اطلاعات رو به صورت GET به صمت سرور ارسال میکنه. میشه گفت مثل تابع $.get عمل میکنه با این تفاوت که تابع $.get از انعطاف بیشتری برخورداره.

تابع $.getScript بارگذاری یک فایل جاوااسکریپت از سرور

با استفاده از این تابع میتونیم یک فایل که حاوی دستورات جاوااسکریپت هست رو بارگذاری کنیم.این تابع دو پارامتر بیشتر نمیگیره.پارامتر اول مسیر فایل و پارامتر دوم یم تابع که هنگامی که درخواست به اتمام رسید اجرا میشه :

//    $.getScript()
var scriptUrl = "ajax/script.php";
$("#getScript").click(function(){
$("#result").html(ajax_load);
$.getScript(scriptUrl, function(){
$("#result").html("");
});
});

در آخر $.ajax

$.ajax هم یکی دیگه از راههای ساخت صفحات Ajax با jQuery که امکانات بیشتری در اختیار ما قرار میده.کار با این تابع به گفته خود سایت jQuery کمی سخته اما امکاناتی مثل مدیریت خطا ، before send ، کش و …. در اختیار ما قرار میده.

بازدید : ۸۳۱۴

اسفند ۲۳, ۱۳۹۰ @ ۱۲:۲۹ ب.ظ

سلام
خیلی عالی بود .

پاسخ دادن
    سعید
    اسفند ۲۴, ۱۳۹۰ @ ۱۰:۲۶ ق.ظ

    ممنون آقا رضا.

    پاسخ دادن
اسفند ۲۸, ۱۳۹۰ @ ۸:۲۲ ب.ظ

مرسی … مفید بود 🙂

پاسخ دادن
علی
تیر ۱۸, ۱۳۹۱ @ ۵:۴۴ ق.ظ

سلام
خیلی خوب و روان توضیح دادی
ممنون

پاسخ دادن
مرداد ۲۱, ۱۳۹۱ @ ۷:۰۷ ق.ظ

سلام
من یه کد اماده گرفتم
این کد همش اجاکس هسنت منم از جاوا اسکریپت زیاد سر در نمیارم کد ساده ای هست تقریبا ۲۰ خط
این کد جستوجوی اژاکس هست ولی خوب طراحی زیبایی داره مثلا بجای رادیو باتن که جستوجو بین عکس ها باشه یا غیره از جیکوءری استفاده کرده درخواست من اینکه یه جوری که توی صفحه اول چیزی از کار نیفته یه کاری کنی که بجای این که اطلاعات صفحه اول مثل
اینکه جستوجو بین تصاویر باشه یا وب و..
بجای اینکه این اطلاعات به گوگل فرستاده بشه با متد پست به یه صفه php ارسال بشه تا من بتونم اونجا کدای خودمو بنویسم و بعد مثل همین الانش پاسخ رو تو صفحه چا کنه
این دموی اسکریپتhttp://xn--mgbguh09aqiwi.com/demo/Google%20Powered%20Site%20Search/

اینم لینک دانلود
http://xn--mgbguh09aqiwi.com/?p=3470

پاسخ دادن
goodboybad
مهر ۲۸, ۱۳۹۱ @ ۵:۱۲ ب.ظ

سلام
آقا من یک مشکلی دارم .
زمانی که یک سری اطلاعات را با تابع $post ارسال میکنم .
اطلاعات به آن صفحه ارسال میشود ولی به جای اینکه فقط خود نتیجه را برگرداند .کل صفحه برگردانده میشه زمانی که در تابع post به این صورت لینک شود .
index.php?page=hello&tit=salam
منظورم این هست که هم صفحه جدید بر روی همان صفحه قبلی باز میشه و با کل قالب سایت .
ولی اگر آدرس صفحه مستقیم باشه مثل :
index/hello/salam.php اینها فولدر هستند تا به فایل سلام برسد .
و در فایل php از ob_end_clean();
استفاده کنم مشکل حل میشه و تابع پست فقط نتیجه را بر میگرداند ولی من نمی خواهم که آدرس مستقیم را در تابع post قرار دهم

پاسخ دادن
آبان ۲, ۱۳۹۲ @ ۱۰:۲۷ ب.ظ

باتشکراز مطالب خوب و کمیابتون
آیا استفاده از Ajax امنیت رو تهدید نمی کنه ؟

پاسخ دادن
مهشید محمدی
فروردین ۲۶, ۱۳۹۵ @ ۹:۱۱ ب.ظ

با سلام و احترام هر جایی که جست و جو کردم چیدا نکردم ممنون میشم راهنمایی کنید 🙂
زمانی که می خوام از json استفاده کنم به مشکل بر خوردم.
زمانی که :

$.ajax({
 url:'result1.php',
 type:'POST',
 data:{id:2}

این کد کار میکنه ولی زمانی که dataType را برابر با json میکنیم دیگه کد کار نمیکنه.ممنون میشم راهنمایی کنید.
با تشکر

پاسخ دادن
    سعید
    فروردین ۲۶, ۱۳۹۵ @ ۱۱:۱۲ ب.ظ

    سلام
    الان این کدی که شما نوشتید کلا اشتباهه. کد کاملی که استفاده میکنید رو برام بفرستید تا ببینیم مشکل از کجاست.
    موفق باشید

    پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*