آموزش Ajax با jQuery و PHP

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

Ajax

مزایای Ajax

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

کتابخانه jQuery و Ajax

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

زبان PHP و Ajax

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

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

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

پیش‌نیازها

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تابع ajax

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

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

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

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

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

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

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

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

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

ادامه دارد…

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

پاسخی بگذارید

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

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱