طراحی سایت های پویا که برای ارسال و دریافت اطلاعات صفحه را Refresh نمی‌کنند با استفاده از فناوری Ajax امکان‌پذیر است. روز به روز بر تعداد سایت‌هایی که با کمک فناوری Ajax به مخاطبان خود پاسخ می‌دهند افزوده می‌شود.



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




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



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

انواع متداول برای اطلاعات بازگشتی از سمت سرور که می‌تواند توسط زبان‌های برنامه‌نویسی سمت سرور از جمله PHP تولید شوند عبارتند از:
 

  • نوع داده HTML
  • نوع داده Text
  • نوع داده JSON
  • نوع داده XML





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

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



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

همچنین در شرایط ایده‌آل می‌بایست احتمال عدم دریافت پاسخ نیز پیش‌بینی و مدیریت شود.



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

1
2
3
4
5
6
7
<div id="content"><!-- filled by jQuery Ajax --></div>

<script>
$.get( 'server.txt', function( data ) {
$( '#content' ).html( data );
} );
</script>
قطعه کد بالا، یک درخواست Ajax به سرور ارسال می‌کند و محتویات فایل server.txt را که یک فایل متنی است در عنصری با شناسه‌ی content قرار می‌دهد.

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



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

1
2
3
4
5
<div id="content"><!-- filled by jQuery Ajax --></div>

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




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

1
2
3
<div id="time"><?php
echo date( 'h:i:s A' );
?></div>
همان گونه که مشاهده می‌کنید، در هنگام پاسخگویی به درخواست‌های Ajax اغلب تنها بخش کوچکی از اطلاعات برگردانده می‌شود و علاوه بر کم بودن حجم، حجم محاسبات نیز به مراتب کمتر از مقدار مورد نیاز برای تولید یک صفحه‌ی HTML کامل است.



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

1
2
3
4
5
6
7
8
9
<div id="content"><!-- filled by jQuery Ajax --></div>

<script>
var params = { name: "Roka" };
$.post( 'server.php', params ).done( function( data ) {
$( '#content' ).html( data );
} );
</script>
در قطعه کد بالا، فایل server.php با روش POST فراخوانی می‌شود. همراه درخواست پارامتر name با مقدار Roka نیز ارسال می‌شود. پس از دریافت پاسخ، تابع تعریف شد مقابل done به اجرا درمی‌آید و محتوای دریافت شده در عنصری با شناسه content نمایش می‌یابد.


منابع:
rokaweb
118فایل