آخرین بازبینی: ۱۴۰۴/۰۵/۱۳

آموزش Ajax با jQuery و PHP

تکنیک AJAX در سایت‌های مدرن یک ضرورت است. با کمک ایجکس وبسایت‌ها می‌توانند بدون بارگزاری کل صفحه، اطلاعاتی را از سرور دریافت کنند و آن را پردازش کنند یا در قسمتی از صفحه به نمایش در بیاورند.

مزایای Ajax

کاهش پهنای باند مصرفی برای ارسال و دریافت اطلاعات
افزایش سرعت پاسخگویی
امکان افزایش تعداد درخواست‌ها به دلیل کم شدن سربارها
تجربه کاربری بهتر

کتابخانه jQuery و Ajax

کتابخانه jQuery دارای بخش‌های متنوعی برای آسان شدن برنامه‌نویسی سایت می‌باشد. در این نوشته با استفاده از دستوراتی که در این کتابخانه برای فناوری Ajax تعبیه شده است، روش ارسال و دریافت اطلاعات را بررسی خواهیم نمود.

پیش‌نیازها

پیش از آغاز لازم است تا با استفاده از jQuery به صورت کلی آشنایی داشته باشید. آخرین نسخه از jQuery را دانلود کنید یا نگارش CDN آن را در سایتتان قرار دهید.

همچنین اگر می‌خواهید با استفاده از php به درخواست‌های Ajax پاسخ دهید، لازم است با اصول برنامه‌نویسی PHP آشنایی داشته باشید.

آشنایی با فرآیند درخواست AJAX

در هنگام ارسال درخواست‌های Ajax زمان ارسال و زمان دریافت ممکن است به دلیل کم بودن سرعت اینترنت یا مشکلات دیگر با یکدیگر فاصله‌ای طولانی داشته باشند. بنابراین نرم‌افزار یا سایت شما می‌بایست آمادگی این تاخیر را داشته باشد و ترجیحا در هنگامی که درخواست ارسال شده و هنوز پاسخی دریافت نشده است، پیام Loading را به کاربر نمایش دهد.

همچنین باید در نظر داشته باشید که درخواست‌های ایجکس هم ممکن است با خطا روبرو شوند یا پاسخی دریافت نکنید.

راه‌اندازی جی‌کوئری

اگر اولین بار است که با جی‌کوئری کار می‌کنید، راهنمای دانلود و استفاده از آن را اینجا ببینید.

اولین درخواست AJAX با jQuery

برای استفاده از ایجکس در jQuery چندین دستور در دسترس هستند. ساده‌ترین دستور jQuery برای Ajax دستور get است. به مثال زیر توجه کنید:

<div id="content"><!-- filled by jQuery Ajax --></div>

<script>
	$.get( 'server.txt', function( data ) {
		$( '#content' ).html( data );
	} );
</script>

$.get( 'server.txt', function( data ) {

$( '#content' ).html( data );

} );

</script>

قطعه کد بالا، یک درخواست Ajax به سرور ارسال می‌کند و محتویات فایل server.txt را که یک فایل متنی است در عنصری با شناسه‌ی content قرار می‌دهد.

محتویات فایل server.txt هر گونه کد HTML دلخواه می‌تواند باشد.

استفاده از دستور load

عملکرد بالا با یک دستور ساده‌تر نیز امکان‌پذیر است:

<div id="content"><!-- filled by jQuery Ajax --></div>

<script>
	$( '#content' ).load( 'server.txt' );
</script>

$( '#content' ).load( 'server.txt' );

</script>

استفاده از PHP برای پاسخگویی

در عوض اسم فایل server.txt می‌توانید نام یک فایل PHP مانند server.php را بنویسید. یک نمونه فایل php که ساعت فعلی را به عنوان پاسخ برمی‌گرداند در ادامه مشاهده می‌نمایید:

<div id="time"><?php
	echo date( 'h:i:s A' );
?></div>

<div id="time"><?php

echo date( 'h:i:s A' );

?></div>

همان طور که می‌بینید، در هنگام پاسخگویی به درخواست‌های Ajax اغلب تنها بخش کوچکی از اطلاعات برگردانده می‌شود و علاوه بر کم بودن حجم، حجم محاسبات نیز به مراتب کمتر از مقدار مورد نیاز برای تولید یک صفحه‌ی HTML کامل است.

ارسال درخواست از نوع POST

ارسال درخواست‌های POST با دستورpost به شکل زیر امکان‌پذیر است:

<div id="content"><!-- filled by jQuery Ajax --></div>

<script>
	var params = { name: "Roka" };
	
	$.post( 'server.php', params ).done( function( data ) {
		$( '#content' ).html( data );
	} );
</script>

var params = { name: "Roka" };

$.post( 'server.php', params ).done( function( data ) {

$( '#content' ).html( data );

} );

</script>

در قطعه کد بالا، فایل server.php با روش POST فراخوانی می‌شود. همراه درخواست پارامتر name با مقدار Roka نیز ارسال می‌شود. پس از دریافت پاسخ، تابع تعریف شد مقابل done به اجرا درمی‌آید و محتوای دریافت شده در عنصری با شناسه content نمایش می‌یابد.

کد PHP برای پاسخگویی به درخواست بالا می‌تواند شبیه کد زیر باشد:

<div id="welcome"><?php
	echo 'Hello ' . $_POST[ 'name' ] . '!'; // Hello Roka !
?></div>

<div id="welcome"><?php

echo 'Hello ' . $_POST[ 'name' ] . '!'; // Hello Roka !

?></div>

متد ajax

علاوه بر دستوراتی که در بالا گفته شد، متد ajax نیز در jQuery وجود دارد که با استفاده از آن می‌توانید تنظیمات بیشتری را انجام دهید و در فعالیت‌های پیشرفته‌تر از آن کمک بگیرید. این تابع به دو شکل کلی زیر می‌تواند فراخوانی شود:

// 1
jQuery.ajax( url [, settings ] );

// 2
jQuery.ajax( [ settings ] )

// 1

jQuery.ajax( url [, settings ] );

// 2

jQuery.ajax( [ settings ] )

در حالت اول، ابتدا نشانی اسکریپت سمت سرور و سپس تنظیمات را وارد می‌کنیم و در حالت دوم، نشانی صفحه هم در بخش settings تعیین می‌شود. به دو مثال زیر توجه کنید:

// 1
$.ajax( 'server.php', {
	'method' : 'POST',
	'data' : {
		'user_id': 10
	}
} );

// 2
$.ajax( {
	'url' : 'server.php',
	'method' : 'POST',
	'data' : {
		'user_id': 10
	}
} );

// 1

$.ajax( 'server.php', {

'method' : 'POST',

'data' : {

'user_id': 10

}

} );

// 2

$.ajax( {

'url' : 'server.php',

'method' : 'POST',

'data' : {

'user_id': 10

}

} );

در مثال اول، نشانی اسکریپت وب در پارامتر اول ارسال شده است و در مثال دوم، داخل تنظیمات و با مقدار url مشخص شده است. دو پارامتر دیگر method و data هم تعیین می‌کنند که روش ارسال اطلاعات چگونه باشد و چه اطلاعاتی همراه درخواست ارسال شوند.

باخبرشدن از پایان درخواست ajax

با توجه به اینکه درخواست ajax به صورت پیش‌فرض غیرهمزمان است، لازم است تا پس از ارسال و دریافت اطلاعات، بتوانید بر اساس نتیجه، فعالیت‌هایی را انجام دهید. انجام این کار با کمک توابع success و error و complete امکان پذیر است. دو تابع success و error ابتدا فراخوانی می‌شوند و تابع complete در پایان صدازده می‌شود.

$.ajax( {
	url : 'server.php',
	method : 'POST',
	data : {
		'user_id': 10
	},
	success: function( data, textStatus, jqXHR ) {
		alert( data );
	},
	error: function( jqXHR, textStatus, errorThrown ) {
		alert( 'error:' + textStatus );
	},
	complete: function( jqXHR, textStatus ) {
		alert( 'success or error' )
	},
} );

$.ajax( {

url : 'server.php',

method : 'POST',

data : {

'user_id': 10

success: function( data, textStatus, jqXHR ) {

alert( data );

error: function( jqXHR, textStatus, errorThrown ) {

alert( 'error:' + textStatus );

complete: function( jqXHR, textStatus ) {

alert( 'success or error' )

} );

در مثال بالا سه تابع callback برای شرایط مختلف درج شده‌اند، دقت کنید که پارامترهای هر کدام از این توابع ترتیب متفاوتی دارند و بسته به نیاز، با کمک این پارامترها می‌توانید از نتیجه اجرای درخواست آگاهی پیدا کنید.

روش دیگر آگاه شدن از نتیجه اجرای AJAX

علاوه بر روش بالا، به شکلی دیگر هم می‌توانید از نتیجه‌ی اجرای تابع ajax باخبر شوید. انجام این کار با کمک فراخوانی زنجیره‌ای توابع، کدهای شما را خواناتر می‌کند.

$.ajax( {
	url : 'server.php',
	method : 'POST',
	data : {
		'user_id': 10
	}
} )
.done( function( data, textStatus, jqXHR ) {
	alert( data );
} )
.fail( function( jqXHR, textStatus, errorThrown ) {
	alert( 'error:' + textStatus );
} )
.always( function( data|jqXHR, textStatus, jqXHR|errorThrown ) {
	alert( 'success or error' )
} );

$.ajax( {

url : 'server.php',

method : 'POST',

data : {

'user_id': 10

}

} )

.done( function( data, textStatus, jqXHR ) {

alert( data );

} )

.fail( function( jqXHR, textStatus, errorThrown ) {

alert( 'error:' + textStatus );

} )

.always( function( data|jqXHR, textStatus, jqXHR|errorThrown ) {

alert( 'success or error' )

} );

در مثال بالا، سه تابع done و fail و always روی مقدار بازگشتی ajax به ما کمک می‌کنند تا پس از پایان درخواست، واکنش مناسب را انجام دهیم. دقت کنید که پارامترهای این سه تابع، اندکی با callbackهای تنظیم شده در settings متفاوت هستند و به دقت باید مورد استفاده قرار گیرند.

ادامه دارد...

یک نظر در مورد «آموزش Ajax با jQuery و PHP»

صادق می‌گوید: ۱۳۹۸/۰۱/۲۵ ساعت ۱۹:۴۱

عالی عالی عاللللللی
کلی استفاده کردم حیف که با جزئیات کم توضیح میدید

پاسخ

آموزش Ajax با jQuery و PHP

مزایای Ajax

کتابخانه jQuery و Ajax

پیش‌نیازها

آشنایی با فرآیند درخواست AJAX

راه‌اندازی جی‌کوئری

اولین درخواست AJAX با jQuery

استفاده از دستور load

استفاده از PHP برای پاسخگویی

ارسال درخواست از نوع POST

متد ajax

باخبرشدن از پایان درخواست ajax

روش دیگر آگاه شدن از نتیجه اجرای AJAX

بیشتر بخوانید:

یک نظر در مورد «آموزش Ajax با jQuery و PHP»

دیدگاهتان را بنویسید لغو پاسخ