Ajax تحولی بزرگ در عرصه وب ۳

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

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

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

 
شکل ۱ : عملکرد برنامه Google Suggest  

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

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

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

شکل ۳ : یک ماشین حساب ساده مبتنی بر فناوری Ajax

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

شکل ۴ : یک برنامه چت مبتنی بر فناوری Ajax

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

شکل ۵ : یک برنامه صفحه گسترده مبتنی بر فناوری Ajax

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

شکل ۶  : مشاهده محتویات سایت آمازون به کمک یک برنامه وب مبتنی بر فناوری Ajax

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

شکل ۷ : فرآیند log in به یک سایت با استفاده از فناوری Ajax

شکل ۶  : مشاهده محتویات سایت آمازون به کمک یک برنامه وب مبتنی بر فناوری Ajax

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

شکل ۷ : فرآیند log in به یک سایت با استفاده از فناوری Ajax

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

شکل ۸ :  عملیات Drag & Drop به کمک فناوری Ajax

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

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

شکل ۹ : بهنگام سازی محتویات یک صفحه وب به کمک فناوری Ajax

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

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

شکل ۱۰ : تعامل با نقشه ها به کمک فناوری 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 گردد . محتویات نامه دریافتی در انتهای صفحه نمایش داه می شود . شکل ۱۱ ، نحوه عملکرد برنامه فوق را نشان می دهد. 

شکل ۱۱ :‌ یک برنامه وب پست الکترونیکی پیاده سازی شده به کمک فناوری Ajax 

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

زمانی که کاربران برای اولین  مرتبه به برنامه فوق log in می نمایند ،  یک engine رابط کاربر درون یک  iframes لود می شود . در ادامه ، تمامی درخواست ها به سرویس دهنده از طریق این engine و به کمک شی XMLHttp انجام می شود.

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

شکل ۱۲ :‌  انتشار خبر به کمک فناوری Ajax

تهیه شده در شرکت سخا روش –  ۱۳۸۲