سه شنبه, ۲۶ تیر, ۱۴۰۳ / 16 July, 2024
مجله ویستا

آشنایی با روش Ajax و به کارگیری آن در PHP


آشنایی با روش Ajax و به کارگیری آن در PHP

یک برنامه کاربردی Ajax , طبیعت start stop start stop برنامه های کاربردی وب را با معرفی یک واسط به نام Ajax engine بین کاربر و سرور, از بین می برد ممکن است به نظر برسد که افزودن یک لایه جدید به برنامه کاربردی, عکس العمل آن را کند کند اما نتیجه حاصله کاملا برعکس است

امروزه، معمولا وقتی صحبت از طراحی برنامه های تعاملی(interaction design ) می شود،بیشتر توجه ها معطوف به وب است. برنامه های کاربردی تحت وب به سرعت در حال رشد و توسعه هستند و کاربران دوست دارند که با همان راحتی و سرعتی که با Desktop application ها کار می کنند با Web application ها هم کار کنند. طراحان برنامه های کاربردی وب هم برای از بین بردن این شکاف ، روش های طراحی گوناگونی را پیشنهاد کرده اند.یکی از این روش ها روش Ajax است. Ajax مخفف Asynchronous JavaScript + XML می باشد.

نگاهی به Suggest Google و Google Maps بیندازید . در Google Maps وقتی روی قسمتی از نقشه zoom می کنید و یا بالا و پایین می روید همه چیز تقریبا به طور همزمان و بدون Load شدن مجدد صفحات انجام می شود. در Suggest Google نیز وقتی مشغول تایپ کلمه مورد نظر خود هستید، به طور همزمان کلمات مرتبط با آن و نیز نتایج حاصل از جستجوی آنها نمایش داده می شود. این برنامه ها چگونه کار می کنند؟

مدل کلاسیک برنامه های کاربردی وب به این صورت است که: کاربران توسط یک واسط، درخواست خود را به وب سرور ارسال می کنند. سرور پردازشی خاص برای درخواست مورد نظر کاربر انجام می دهد و سپس نتیجه را به صورت HTML به کاربر برمی گرداند. این مدل با کاربرد اولیه وب به عنوان واسط انتقال hypertext سازگار است اما تجربیات نشان می دهد که در طراحی برنامه های کاربردی لزوما استفاده از این مدل نتیجه مطلوب کاربران را نمی دهد!

وقتی که سرور مشغول پردازش درخواست ها است، کاربر چه می کند؟

مسلم است که انتظار می کشد! و این انتظار در هر مرحله از انجام کار بیشتر و بیشتر می شود! زمانی که یک فرم وب را در برنام کاربردی خود قرار می دهید کاربر باید تا زمان دریافت نتایج صبر کند.اصلا چه لزومی دارد که کاربر ببیند برنامه او به سمت سرور می رود؟! Ajax به این پرسش ها پاسخ می دهد:

یک برنامه کاربردی Ajax ، طبیعت start-stop-start-stop برنامه های کاربردی وب را با معرفی یک واسط به نام Ajax engine بین کاربر و سرور، از بین می برد. ممکن است به نظر برسد که افزودن یک لایه جدید به برنامه کاربردی، عکس العمل آن را کند کند اما نتیجه حاصله کاملا برعکس است! به جای load کردن یک صفحه وب در آغاز یک session ، مرورگر کاربر، Ajax engine را که توسط JavaScript نوشته شده است load می کند. این engine مسئولیت render کردن واسطی که کاربر می بیند و همچنین ارتباط با سرور از سمت کاربر را بر عهده دارد.این engine سبب می شود که تعامل کاربر با برنامه کاربردی، نا همگام(asynchronously) با ارتباط کاربر با سرور انجام شود. بنابر این ،کاربر هرگز یک صفحه مرورگر خالی یا یک آیکون ساعت شنی برای انتظار نمی بیند و منتظر سرور نمی نشیند!

● به کارگیری روش Ajax

XMLHttpRequest یکی از اشیای محلی(Native Object) جاوااسکریپت است که اجازه درخواست های HTTP را از یک صفحه لود شده به کاربران می دهد.این شیء به کاربران اجازه می دهد که یک سری ریزدرخواست(Microrequests) در پاسخ به رویدادهای کاربر، بدون لود شدن مجدد صفحات ارسال کنند و این امر باعث می شود که یک برنامه تحت وب ، ماهیتی مثل desktop applications پیدا کند.

این شیء ، یک جزء استاندارد از Javascript یا DOM محسوب نمی شود و به صورت آزمایشی درInternet Explorer ۵.۵ ، Mozilla/Firefox، Safari ۱.۲، و Opera ۷ به کار رفته است. W۳C در حال تدارک دیدن امکان LOAD وSAVE است که عمیاتی مشابه XMLHTTPRequest انجام می دهند ولی هنوز در هیچ Web browsersای پیاده سازی نشده اند. (نکته: با اینکه نام XML در این شیء به چشم می خورد،هیچ لزومی برای استفاده ازXML وجود ندارد. فقط اگر می خواهید کاملا cross browser عمل کنید، باید در نظر بگیرید که در نسخه فعلی مرورگر وب Safari متعلق به APPLE ،پاسخ SERVER حتما باید به صورت text/xml mimetype باشد!)

● برای استفاده از روش Ajax مراحل زیر باید انجام گیرد:

▪ ساخت یک نمونه از شیء XMLHTTPRequest

▪ در Internet Explorer به صورت یک کنترل ActiveX

▪ در سایر مرورگرهای وب به صورت یک شیء نرمال جاوااسکریپت

▪ مهیا کردن داده ها و ارسال آنها برای پردازش

▪ ارسال داده ها با متد GET

▪ ارسال داده ها با متد POST

▪ دریافت نتایج حاصل از پردازش و نمایش آنها

● در ادامه با نوشتن یک مثال ساده به توضیح هر یک از مراحل فوق می پردازیم:

فرض کنید که می خواهیم برنامه ای برای ضرب دو عدد بنویسیم. قرار است که ضرب دو عدد در سمت Server و توسط php انجام شود.(ممکنه که این مثال کمی احمقانه به نظر برسه چون خیلی راحت با جاوااسکریپت میشه این کارو انجام داد! ولی هدف ما توی این مقاله استفاده از یک زبان برنامه نویسی سمت server بدون لود شدن مجدد صفحات است و هدف ما به هیچوجه، انجام عمل ضرب نیست!)

قدم اول ، ساخت یک نمونه از شیء XMLHTTPRequest است. نمونه سازی از این شیء مشابه سایر اشیای جاوااسکریپت می باشد.تنها تفاوت ، مربوط به نمونه سازی درInternet Explorer می باشد،زیرا درIE ،شیء درخواست یک کنترل ActiveX محسوب می شود. برای ساخت این شیء به صورت مستقل از مرورگر، از precompile directives استفاده می کنیم.(این دستورات با /*@cc_on شروع شده و به @end @*/ ختم می شوند.) در اینجا از دستورات try-catch برای کنترل ساخت این شیء استفاده شده است.در هنگام لود صفحه اصلی، یک نمونه از این شیء درست می شود:

مرحله بعدی کار، مهیا کردن داده ها و ارسال آنها برای پردازش است. فرمی ساده با سه فیلد با نام های مشخصه a,b,c درست می کنیم. رویداد onblur مربوط به فیلد b را با تابع echoResult اداره می کنیم. قصد داریم وقتی کاربر با فشار دادن کلید tab ،تمرکز را از این فیلد گرفت، نتیجه ضرب a در b را در فیلد c نشان دهیم:

یک صفحه php با نام handleMultiply.php درست می کنیم که پارامترهای a و b را دریافت کرده و حاصلضرب آنها را بر می گرداند:

اگر از متد GET استفاده کنیم:

php

$a=$_GET["a"];

$b=$_GET["b"];

$c=$a * $b ;

echo $c;

?>