Ajax؛ تحولی بزرگ در عرصه وب (3)

در بخش اول ضمن بررسی تاثير متقابل وب بر نرم افزار ، مروری داشتيم به وب ايستا و وب پويا و اين كه برای انجام پردازش های مورد نياز در برنامه های وب می توان از امكانات و فناوری های متعددی در سمت سرويس گيرنده و سرويس دهنده استفاده كرد . هدف از بيان مطالب فوق ، پاسخ به اين سوال بود كه چرا به وجود يك فناوری ديگر نظير Ajax نياز است ( گرچه Ajax يك فناوری نيست و مجموعه ای از فناوری ها را شامل می شود ) .
در بخش دوم با Ajax و فناوری های مرتبط با آشنا شديم . در اين بخش به بررسی نمونه برنامه هائی خواهيم پرداخت كه در آنها از فناوری Ajax استفاده می گردد .

Google Suggest

اجازه دهيد كار خود را با نمونه ای آغاز نمائيم كه برای شما كاملا" آشنا است . در زمان استفاده از اينترنت هر يك از ما بدفعات از موتورهای جستجو جهت يافتن اطلاعات مورد نياز حود استفاده می كنيم . Google يكی از محبوبترين و قدرتمندترين موتورهای جستجو در اينترنت است . پس از تايپ كليد واژه مورد نظر و فشردن كليد Google Search ، كليد واژه مورد نظر برای سرويس دهنده ارسال می گردد . در ادامه ،‌ با توجه به ايجاد زيرساخت اطلاعاتی لازم در سمت سرويس دهنده ، نتايج استخراج و برای شما ارسال می گردد .
Google Suggest ، يكی از اولين نمونه برنامه هائی است كه در آن از Ajax استفاده شده است .برنامه فوق دارای اينترفيسی مشابه صفحه اصلی گوگل است ( يك text box جهت تايپ كليد واژه مورد نظر به همراه يك button جهت جستجو ) . همه چيز مشابه صفحه اصلی و قديمی گوگل است تا زمانی كه شروع به تايپ متن مورد نظر خود در text box نكرده ايد . به موازات تايپ متن در محل مربوطه ، گوگل پيشنهادات و يا اطلاعاتی را از سرويس دهنده دريافت و به شما ارائه می نمايد ( يك ليست از واژه ها به همراه تعداد نتايج مربوط به هر يك ) .
به عنوان نمونه فرض كنيد عبارت srco.ir را در بخش مربوطه تاپپ نمائيم ، به موازات تايپ هر يك از حروف ، گوگل پيشنهادات خود را ارائه می نمايد . نحوه عملكرد Google Suggest در شكل 1 نشان داده شده است .

شكل 1 : عملكرد برنامه Google Suggest

Gollum

يكی از متداولترين موارد استفاده از Ajax ، ايجاد live search است . Google Suggest كه در بخش قبل به آن اشاره گرديد ، يك نمونه متداول در اين زمينه است . تاكنون تعداد زيادی از اينگونه برنامه ها پياده سازی شده است . به عنوان مثال می توان به برنامه Gollum اشاره كرد ، كه يك live search برای Wikipedia ( بزرگترين دايره المعارف موجود در اينترنت ) را ارائه می نمايد . نحوه عملكرد اين برنامه در شكل 2 نشان داده شده است .

شكل 2 : عملكرد برنامه Gollum با هدف جستجو در Wikipedia

ايجاد يك ماشين حساب مبتنی بر Ajax

هر برنامه ای كه در آن لازم است داده برای سرويس دهنده ارسال تا پس از انجام پردازش های لازم در سمت سرويس دهنده ، نتايج برای سرويس گيرنده برگردانده شود ، می تواند شرايط اوليه مورد نياز جهت استفاده از فناوری Ajax را دارا باشد . پياده سازی يك ماشين حساب ساده يك نمونه در اين زمينه است .
برای استفاده از ماشين حساب فوق ، كاف‍ی است دو عدد ( و يا اپراند ) را در فيلدهای مربوطه درج و در ادامه بر روی دكمه عملگر ( جمع ، تفريق ، ضرب ، تقسيم ) مورد نظر كليك نمائيم . برنامه فوق با استفاده از Ajax ، اطلاعات خود را ( شامل اپراندها و نوع عملگر انتخابی ) برای سرويس دهنده ارسال می نمايد تا پس از انجام عمليات ، نتايج برای سرويس گيرنده برگردانده شود . تمامی عمليات بدون نياز به refresh صفحه انجام می شود . عملكرد برنامه فوق از منظر كاربر ،‌ شباهت بسيار زيادی به برنامه های desktop دارد.
شكل 3 ، نحوه عملكرد برنامه فوق را نشان می دهد .

شكل 3 : يك ماشين حساب ساده مبتنی بر فناوری Ajax

برنامه های chat

Ajax در هر مكانی كه به بهنگام سازی سنگين داده نياز باشد ، می تواند كارآئی فوق العاده ای داشته باشد . برنامه های چت يك نمونه متداول در اين زمينه می باشند . در اين نوع برنامه ها ، هر يك از كاربران متن مورد نظر خود را تايپ و بلافاصله متن تايپ شده برای كاربرانی كه به سيستم log in كرده اند ، نمايش داده می شود . Ajax يك گزينه مناسب برای اين نوع برنامه ها می باشد ، چراكه متن نمايش داده شده همواره بهنگام شده است . با استفاده از Ajax می توان متن را به سادگی در هر محلی از صفحه بهنگام كرد ( بدون اين كه به refresh نياز باشد ) .
PHP Free Chat ، يك نمونه از اين نوع برنامه های چت است . برنامه فوق با اتصال به سرويس دهنده پتانسيل های مورد نياز يك برنامه چت را در اختيار كاربران قرار می دهد . پس از درج يك نام می توان به برنامه وارد شد . پس از تايپ متن مورد نظر و فشردن دكمه enter ، متن تايپ شده با استفاده از Ajax برای سرويس دهنده ارسال می گردد . در ادامه ، متن فوق به همراه ساير متون تايپ شده توسط كاربران در chat box نمايش داده می شود . شكل 4 ، نحوه عملكرد برنامه فوق را نشان می دهد .

شكل 4 : يك برنامه چت مبتنی بر فناوری Ajax

پردازش بر روی صفحات گسترده

يكی ديگر از كاربردهای متداول Ajax استفاده از آن در برنامه های صفحه گسترده و يا همان spreadsheet است . برنامه Num Sum يك نمونه در اين زمينه است . با استفاده از برنامه فوق می توان يك صفحه گسترده واقعی ( بكارگيری فرمول ها و ذخيره آن بر روی سرويس دهنده مورد نظر ) را ايجاد كرد . به موازات درج داده ، فرآيند بهنگام سازی بدون نياز به انجام يك refresh توسط مرورگر انجام خواهد شد . شكل 5 ، نحوه عملكرد برنامه فوق را نشان می دهد .

شكل 5 : يك برنامه صفحه گسترده مبتنی بر فناوری Ajax

استفاده از سايت آمازون

استفاده از محتويات موجود بر روی سايت آمازون ، يك نمونه ديگر از برنامه های وب مبتنی بر فناوری Ajax را نشان می دهد . با استفاده از برنامه فوق می توان تمامی محتويات منتشر شده بر روی سايت آمازون را با يك ساختار درختی مشاهده كرد .با كليك بر روی هر گره می توان محصولات مربوط به آن را مشاهده كرد . شكل 6 ، نحوه عملكرد برنامه فوق را نشان می دهد .

شكل 6 : مشاهده محتويات سايت آمازون به كمك يك برنامه وب مبتنی بر فناوری Ajax

log in توسط Ajax

با استفاده از Ajax می توان فرآيند log in به يك سايت را ساده تر كرد . به عنوان نمونه با مراجعه به آدرس www.jamesdam.com/ajax_login/login.html صفحه ای را مشاهده خواهيم كرد كه اجازه log in اتوماتيك را با استفاده از Ajax به كاربران می دهد . در صورتی كه يك نام و رمز عبور صحيح توسط كاربر درج نشود و وی در هر مكانی از صفحه كليك نمايد ، يك پيام خطاء نمايش داده خواهد شد . به عبارت ديگر ، در صورتی كه كاربر نام و رمز عبور صحيح خود را وارد نمايد و در هر مكانی از صفحه كليك نمايد ، امكان log in به سايت در اختيار وی گذاشته می شود . شكل 7 عملكرد برنامه فوق را نشان می دهد .

شكل 7 : فرآيند log in به يك سايت با استفاده از فناوری Ajax

Drag و Drop با Ajax

به موازات افزايش چشمگير شباهت برنامه های وب و برنامه های desktop ، هم اينك می توان بسياری از عملياتی را كه در برنامه های desktop انجام می شود در برنامه های وب نيز انجام داد . فرآيند موسوم به drag & drop نمونه ای در اين زمينه است كه بكارگيری آن در برخی برنامه ها می تواند كار را برای كاربران ساده تر نمايد . سرويس دهنده بطور اتوماتيك از آيتم انتخاب شده توسط كاربر آگاه شده و متناسب با آن از خود واكنش نشان خواهد داد . با مراجعه به آدرس www.broken-notebook.com/magnetic ، می توان يك نمونه از اين نوع برنامه ها را مشاهده كرد.
زمانی كه يك magnet را به يك مكان جديد drag می نمائيد ، مكان جديد با استفاده از تكنولوژی Ajax برای سرويس دهنده ارسال و در آن مكان داده ذخيره می گردد . در ادامه ، ساير افرادی كه صفحه فوق را مشاهده خواهند كرد ، آن را در موقعيت و يا مكانی خواهند يافت كه قبلا" شما آن را مستقر كرده ايد ، مگر اين كه موقعيت آن توسط ساير كاربران تغيير يافته باشد . شكل 8 عملكرد برنامه فوق را نشان می دهد .

شكل 8 : عمليات Drag & Drop به كمك فناوری Ajax

يكی از متداولترين موارد استفاده از عمليات Drag & Drop به همراه Ajax ، پياده سازی Shopping cart است . زمانی كه خريدار قصد دارد يك آيتم را به يك shopping cart اضافه نمايد ، می بايست كاربر در چندين صفحه حركت نمايد تا در نهايت با كليك بر روی‌ دكمه Add to Cart كالای انتخاب شده را به سبد خريد اضافه نمايد و مجددا" برای دنبال نمودن فرآيند خريد به صفحات قبل برگردد . با استفاده از فناوری Ajax می توان به سادگی كالای مورد نظر خود را انتخاب و در ادامه با عمليات Drag & Drop آن را در سبد خريد قرار داد . زمانی كه با روش Drag & Drop يك آيتم به يك سبد خريد اضافه می گردد ، سرويس دهنده از اين موضوع مطلع شده و مبلغ كالای خريداری شده را به مجموع كالاهای خريداری شده موجود در سبد خريد اضافه می نمايد .

تغيير صفحات وب به صورت پويا

يكی از حوزه هائی كه Ajax در آن توانمند و حرف های زيادی برای گفتن دارد ، بهنگام سازی و يا تغيير محتويات يك صفحه وب به صورت پويا است . تاكنون هزاران نوع از اين برنامه ها در طی ساليان اخير و به كمك فناوری Ajax پياده سازی شده است .
SaneBull Market Monitor يك نمونه از كاربرد Ajax به منظور تغيير محتويات يك صفحه را نشان می دهد . همزمان با مشاهده صفحه ، اطلاعات مندرج در آن بهنگام و آخرين وضعيت سهام در اختيار مخاطبان قرار داده می شود . شكل 9 ، نحوه عملكرد برنامه فوق را نشان می دهد .

شكل 9 : بهنگام سازی محتويات يك صفحه وب به كمك فناوری Ajax

برنامه های واژه پرداز online يكی ديگر از نمونه كاربردهای Ajax در عرصه ارائه سرويس های online می باشند . يكی از اين نوع برنامه ها را می توانيد از طريق آدرس http://docs.google.com مشاهده نمائيد .

تعامل با نقشه ها

Google Map ، يكی از اولين برنامه هائی است كه در آن از Ajax استفاده شده است . پس از تمركز بر روی يك نقطه ، اطلاعات آن نقطه خاص از سرويس دهنده بازيابی و با يك فرمت مناسب نمايش داده می شود . شكل 10 ، نحوه عملكرد برنامه فوق را نشان می دهد .

شكل 10 : تعامل با نقشه ها به كمك فناوری Ajax

تاكنون سايت های متعددی با الهام از Google Maps ايجاد شده اند . يك نمونه آن را می توانيد در آدرس www.gtraffic.info مشاهده نمائيد كه در آن اطلاعات ترافيك حمل و نقل كشور انگلستان در اختيار كاربران قرار داده می شود
برنامه های نقشه online تنها برنامه های Ajax نمی باشند كه از Pop-up استفاده نمايند . به عنوان نمونه با مراجعه به آدرس www.netflix.com/Top100 سايـتی را مشاهده خواهيد كرد كه با قرار گرفتن بر روی عنوان يك فيلم ، اطلاعات مربوط به آن نمايش داده می شود ( بطور اتوماتيك داده از سرويس دهنده و با استفاده از Ajax بازيابی می گردد و در ادامه در يك pop up نمايش داده می شود ) .
شكل

E-mail مبتنی بر Ajax

يكی ديگر از موارد استفاده از Ajax ، حمايت آن از برنامه های پست الكترونيكی مبتنی بر مرورگرها است . يك نمونه آن را می توانيد در آدرس http://demo.nextapp.com/Email/app مشاهده نمائيد .
مشاهده نامه های الكترونيكی از طريق برنامه های وب مبتنی بر مرورگر دارای چالش های مختص به خود است . در اين نوع برنامه ها پس از مشاهده ليستی از نامه های دريافتی با كليك بر روی هر يك از آنها به صفحه ای هدايت خواهيم شد كه در آن متن نامه الكترونيكی جهت خواندن در اختيار ما قرار داده می شود . پس از اتمام مطالعه يك نامه ، می بايست جهت مطالعه ساير نامه های دريافتی به ليست نامه های الكترونيكی مراجعه كرد .
بكارگيری فناوری Ajax در برنامه های پست الكترونيكی باعث تغيير اساسی رفتار اينگونه برنامه ها شده است . در اين نوع برنامه ها ، پس از مشاهده ليستی از برنامه ها ، با كليك بر روی يك نامه دريافتی بطور اتوماتيك نامه مورد نظر دانلود و برای شما نمايش داده می شود بدون اين كه لازم باشد مرورگر refresh گردد . محتويات نامه دريافتی در انتهای صفحه نمايش داه می شود . شكل 11 ، نحوه عملكرد برنامه فوق را نشان می دهد .

شكل 11 :‌ يك برنامه وب پست الكترونيكی پياده سازی شده به كمك فناوری Ajax

Gmail ، يكی از سرويس های رايگان گوگل است كه در آن از فناوری Ajax در بخش های متعددی استفاده شده است . زمانی كه كاربران برای اولين مرتبه به برنامه فوق log in می نمايند ، يك engine رابط كاربر درون يك iframes لود می شود . در ادامه ، تمامی درخواست ها به سرويس دهنده از طريق اين engine و به كمك شی XMLHttp انجام می شود.

انتشار اخبار به كمك Ajax

Yahoo! News ، يك نمونه ديگر از بكارگيری فناوری Ajax در مشاهده اخبار را نشان می دهد . پس از استقرار موس بر روی يك عنوان خبری ، خلاصه خبر و يك تصوير مرتبط با آن در يك كادر كوچك نمايش داده می شود . اطلاعات فوق به صورت پويا و به كمك شی ‌XMLHttp از سرويس دهنده وب بازيابی و نمايش داده می شود . شكل 11 ، نحوه عملكرد برنامه فوق را نشان می دهد .

شكل 12 :‌ انتشار خبر به كمك فناوری Ajax

خلاصه

با اين كه Ajax دارای عمری كوتاه است ولی در زمانی اندك توانسته است در كانون توجه طراحان و پياده كنندگان برنامه های وب و سرويس های online قرار بگيرد . پياده سازی هزاران برنامه ، دليلی روشن بر موفقيت Ajax است . قطعا" در آينده ای نه چندان شاهد حضور موفقيت آميز برنامه های مبتنی بر Ajax در ساير عرصه های فناوری خواهيم بود .
در اين مقاله به ذكر نمونه هائی اندك از كاربرد Ajax در برنامه های وب اشاره گرديد با اين هدف كه بتوان در عمل كارآئی اين فناوری را مشاهده نمود . شناخت منطقی و اصولی هر فناوری به ما كمك خواهد كرد تا از آن به درستی و در جايگاه مناسب استفاده نمائيم .
در بخش چهارم به بررسی فريمورك های ارائه شده جهت بكارگيری فناوری Ajax خواهيم پرداخت .
منبع: http://www.srco.ir
/خ