آموزش ajax

[moeintnt]

آموزش ajax

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

[IMG]

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

کتابخانه jQuery و Ajax

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

زبان PHP و Ajax

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

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

نوع داده HTML
نوع داده Text
نوع داده JSON
نوع داده XML
آموزش ajax

پیش‌نیازها

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

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

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

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

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

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

برای استفاده از این فناوری در 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 دلخواه می‌تواند باشد.

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

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

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

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


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

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

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

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

ارسال درخواست‌های 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فایل