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

[Admin]

Ajax : تحولی بزرگ در عرصه وب ( بخش اول )

اينترنت و مهمترين سرويس آن وب علاوه بر اين كه حيات بشری را در هزاره سوم دستخوش تحولات فراوانی كرده است ، توانسته است منشاء تحولات گسترده ای در ساير حوزه های فناوری گردد . در واقع ، تحول در زندگی بشريت مديون پيشرفت در ساير حوزه های فناوری‌ است . يكی از اين حوزه ها ، صنعت نرم افزار است .
برای آشنائی با اين تحول بد نيست مروری سريع داشته باشيم به گذشته وب و نرم افزار تا از اين رهگذر بتوانيم ضرورت ايجاد فناورهای جديدی نظير Ajax ( برگرفته شده از Asynchronous JavaScript And XML ) را بهتر درك كنيم .



مروری بر وب ، نرم افزار و تاثير متقابل آنها بر يكديگر
موجودات جديدی كه ما امروزه آنها را با نام برنامه های وب می شناسيم ، ماحصل تاثير وب بر نرم افزار و رشد رو به فزاينده استفاده از اينترنت در متن زندگی ، ماحصل تاثير نرم افزار بر وب است . اجازه دهيد ببينيم موضوع از كجا و با چه مختصاتی شروع گرديد و هم اينك در چه وضعيتی به سر می بريم .
وب ايستا : زمانی كه تيم . برنرز لی در سال 1990 اولين پيشنهاد خود در رابطه با وب را ارائه كرد ، ايده كار بسيار ساده بود : ايجاد يك شبكه از اطلاعات متصل شده به يكديگر با استفاده از ابرمتن ها و URIs ( برگرفته شده از Uniform Resource Identifiers ) . وب در آغاز به عنوان يك رسانه اشتراك اطلاعات مطرح گرديد تا از طريق آن دانشمندان و محققين بتوانند دانش و اطلاعات را بين خود به اشتراك گذاشته و نتايج تحقيقات را با يكديگر مبادله نمايند . ارائه دهند گان با استفاده از يك استاندارد مستند سازی ، اطلاعات خود را تهيه و آنها را به مخاطبان خود ارائه می كردند . در آغاز برای استاندارد مستند سازی از ابزاری كه در آن زمان خود هنوز استاندارد نشده بود استفاده می گرديد . HTML ، ابزاری است كه با بكارگيری مجموعه ای از تگ ها ، استاندارد لازم جهت نمايش يك مستند در نرم افزارهای نمايش دهنده ( مرورگرها ) را فراهم می نمايد . نرم افزارهای نمايش دهنده ، مجهز به مفسرهائی جهت تفسير تگ ها و نمايش اطلاعات موجود در مستند بر اساس تعاريف از قبل تعريف شده شدند . در آن زمان كه به سال های ابتدائی دهه 90 ميلادی برمی گردد ، چيزی با نام برنامه های وب وجود نداشت و وب به عنوان رسانه ای جهت اشتراك و مبادله اطلاعات مطرح بود . تمامی تعاملات در عرصه وب محدود به درخواست يك مستند توسط سرويس گيرنده و ارسال آن توسط سرويس دهنده بود .
وب پويا با تمركز بر روی پردازش های سمت سرويس گيرنده : در ادامه ، نياز به انجام برخی پردازش های اوليه مطرح گرديد . با توجه به اين كه اينترنت از يك بستر سرويس گيرنده و سرويس دهنده ( client server based) به منظور دريافت درخواست كاربر و پاسخ به آن استفاده می كرد ، طراحان و پياده كنندگان برای تحقق پردازش ها بر روی دو گزينه متمركز شدند : انجام پردازش ها در سمت سرويس گيرنده و يا سمت سرويس دهنده . در آغاز ، برای انجام پردازش ها بر روی سرويس گيرنده متمركز شدند . با اين هدف كه بتوان پردازش های مورد نياز را ( با حوزه ای كه در آن زمان تعريف شده بود ) ، در سمت سرويس گيرنده انجام داد . برای تحقق خواسته فوق لازم بود كه بستر و ابزارهای لازم در بطن مرورگر ها ايجاد گردد . ظهور فناورهائی نظير Html-DOM ، جاوااسكريپت ، CSS ( برگرفته شده از cascading style sheets ) و DHTML ( برگرفته شده از Dynamic HTML ) از جمله مهمترين تلاش های انجام گرفته در آن زمان برای تحقق پردازش ها در سمت سرويس گيرنده بود . برای آشنائی بيشتر با تلاش های انجام گرفته در آن زمان بد نيست مروری سريع داشته باشيم به آنچه طی ساليان گذشته در عرصه وب اتفاق افتاده است .


عرضه جاوا اسكريپت : Netscape Navigator اولين مرورگر وبی بود كه پس از طراحی و پياده سازی موفقيت آميز توانست به عنوان كاتاليزوری در رشد وب و عرضه فناوری های مرتبط با آن نقش بسيار مثبتی را ايفاء‌ كند . اغلب سازمان ها و شركت ها از مرورگر فوق به عنوان معيار استاندارد خود برای پياده سازی فناوری های جديد استفاده می كردند . يكی از اين فناوری ها ، جاوا اسكريپت بود .
جاو ااسكريپت توسط Brendan Eich از نت اسكيپ ايجاد و نسخه شماره دو آن در سال 1995 عرضه گرديد . برای اولين مرتبه ، پياده كنندگان قادر به ايجاد صفحات وبی شدند كه می توانست با كاربر تعامل برخورد نمايد . استفاده از جاوا اسكريپت برای معتبر سازی داده در سمت سرويس گيرنده و حذف برخی مبادلات غيره ضروری بين سرويس گيرنده و سرويس دهنده از جمله مهمترين دستاورد بكارگيری جاوا اسكريپت در آن زمان بود . بدين ترتيب نطفه پردازش های ساده در سمت سرويس گيرنده به كمك جاوا اسكريپت بسته شد . قابليت فوق در زمانی كه اكثر كاربران اينترنت از طريق يك مودم با سرعت 8 . 28 ( Kbps ) به شبكه وصل می شدند ، باعث می شد كه تعداد دفعاتی كه كاربران مجبور به انتظار برای دريافت يك پاسخ از سرويس دهنده باشند ، كاهش يابد . تحول فوق اولين مرحله جدی به سمت رويكرد Ajax در آن زمان بود .

ايجاد فريم : در نسخه اوليه HTML با هر سند به عنوان يك موجوديت رفتار می شد تا اين كه در نسخه شماره چهار فريم ها معرفی گرديدند . با استفاده از فريم ها نمايش يك صفحه وب می توانست مشتمل بر بكارگيری مجموعه ای از ساير صفحات وب باشد . ايده فوق يك اصلاح ساختاری اساسی در خصوص نحوه نمايش يك صفحه وب بود . Netscape Navigator 2.0 اولين مرورگری بود كه از فريم ها و جاوا اسكريپت حمايت كرد . اين يك مرحله جدی به سمت رشد و توسعه Ajax در آن زمان بود .
با توجه به اين كه يك فريم ، يك درخواست مجزاء را برای سرويس دهنده ايجاد می كرد ، قابليت كنترل يك فريم و محتويات آن با استفاده از جاوا اسكريپت دنيای جديدی را پيش روی طراحان و پياده كنندگان صفحات وب قرار داد .

روش فريم مخفی : به موازات اين كه پياده كنندگان درگير نحوه استفاده از فريم ها شدند ، يك روش جديد با هدف تسهيل در امر ارتباط بين سرويس گيرنده و سرويس دهنده مطرح گرديد . روش فريم مخفی شامل تنظيم يك frameset با طول و يا عرض صفر پيكسل است كه هدف اساسی آن انجام فرآيند مقداردهی اوليه با سرويس دهنده بود . فريم مخفی شامل يك فرم HTML با فيلدهای خاصی است كه می توانست بطور اتوماتيك توسط جاوا اسكريپت تكميل و برای سرويس دهنده ارسال گردد . زمانی كه فريم از سرويس دهنده مراجعت می كرد ، يك تايع ديگر جاوا اسكريپت فراخوانده می شد تا اعلام نمايد كه داده از سمت سرويس دهنده برگردانده شده است . روش فريم مخفی ، اولين مدل درخواست و پاسخ غيرهمزمان را برای برنامه های وب به ارمغان آورد ( اولين رويكرد به مدل ارتباطی Ajax ) .

Dynamic HTML و DOM : تا سال 1996 ، وب يك دنيای ايستا را تجربه می كرد و برای تعامل محدود با كاربر از جاوا اسكريپت و روش فريم های مخفی استفاده می گرديد . همچنان امكان تغيير در محتويات يك صفحه بدون نياز به load مجدد آن از سرويس دهنده وجود نداشت . در ادامه IE 4.0 ( برگرفته شده از Internet Explorer ) توسط شركت مايكروسافت ارائه گرديد . در اين نسخه علاوه بر بكارگيری اكثر فناوری های استفاده شده در Netscape Navigator ، يك ويژگی مهم ديگر با نام DHTML ( برگرفته شده از Dynamic HTML ) نيز ارائه گرديد . DHTML به پياده كنندگان اجازه می داد تا بتوانند هر بخشی از يك صفحه مستقر شده در حافظه سرويس گيرنده را با استفاده از جاوا اسكريپت تغيير دهند . DHTML به همراه عرضه غيره منتظره CSS ( برگرفته شده از cascading style sheets ) به وب و نحوه پياده سازی صفحات وب يك نيروی تازه داد. پياده كنندگان توانستند با تركيب DHTML و روش فريم های مخفی هر بخشی از يك صفحه را با استفاده از اطلاعات دريافت شده از سرويس دهنده refresh نمايند . ويژگی فوق در زمان خود توانست يك تحول بزرگ در عرصه وب را ايجاد نمايد .
در ادامه ، DOM ( برگرفته شده از Document Object Model ) ارائه گرديد . برخلاف DHTML كه صرفا" امكان تغيير بخش هائی خاص از يك صفحه وب را فراهم می كرد ، DOM دارای يك هدف بلندپروازانه ديگر بود . هدف DOM ارائه يك ساختار برای تمامی صفحه بود . انجام عمليات و يا پردازش بر اساس ساختار فوق ، امكان تغيير يك صفحه را فراهم می آورد . اين مرحله بعدی به سمت Ajax بود .

Iframes : با اين كه روش فريم مخفی بطور غيرقابل پيش بينی متداول گرديد ، ولی دارای چالش های مختص به خود بود . افرادی می بايست زمان زيادی را صرف نوشتن يك frameset می كردند تا شرايط استفاده از فريم های مخفی فراهم گردد . زمانی كه عنصر </ iframe > در سال 1997 و به عنوان بخشی از نسخه رسمی HTML 4.0 ارائه گرديد ، يك قدم اساسی ديگر به سمت انقلاب بر روی وب حركت شد .
در مقابل تعريف frameset ، پياده كنندگان قادر به استفاده از فريم ها در هر مكانی از صفحه شدند . بدين ترتيب پياده كنندگان توانستند از iframe نامرئی ( با بكارگيری قابليت های CSS ) در يك صفحه استفاده نمايند و شرايط عملياتی لازم جهت مبادله داده بين سرويس گيرنده و سرويس دهنده را فراهم نمايند . زمانی كه نسخه نهائی DOM در IE 5.0 و Netscape 6.0 پياده سازی گرديد ، قابليت ايجاد فريم ها به صورت پويا نيز فراهم گرديد . در چنين حالتی از يك تابع جاوا اسكريپت به منظور ايجاد يك iframe ، ايجاد يك درخواست و دريافت پاسخ ( جملگی بدون نياز به اضافه كردن تگ های HTML اضافه در يك صفحه ) استفاده می گرديد . اين روش معروف به روش iframe مخفی گرديد .

XMLHttp : پياده كنندگان مرورگر شركت مايكروسافت پس از مشاهده عموميت استفاده از روش هائی‌ نظير فريم مخفی و iframe مخفی ، تصميم گرفتند يك ابزار بهتر جهت تعامل بين سرويس دهنده و سرويس گيرنده را ارائه نمايند . اين ابزار به شكل يك اكتيوايكس و با نام XMLHttp در سال 2001 ارائه گرديد .
زمانی كه مايكروسافت حمايت خود از XML را از طريق يك كتابخانه با نام MSXML آغاز كرد ، شی XMLHttp نيز به همراه آن ارائه گرديد .
با اين كه شی‌ فوق به همراه خود نام XML را يدك می كشيد ولی چيزی بمراتب بيشتر از روشی برای انجام عمليات بر روی داده XML بود . شی فوق همانند يك درخواست HTTP بود كه می توانست توسط جاوا اسكريپت كنترل گردد . پياده كنندگان دارای قدرت دستيابی به كدهای وضعيت HTTP و هدر همانند داده برگردانده شده از طريق سرويس دهنده بودند . داده می توانست به صورت XML ساختيافته ، اشياء سريال شده جاوا اسكريپت و يا ساير فرمت های مورد نظر پياده كننده باشد . در مقابل استفاده از فريم های مخفی و يا iframe ، اين امر ميسر گرديد كه به سرويس دهنده از طريق كد و توسط جاوا اسكريپت دستيابی داشت ( مستقل از چرخه load و reload صفحه ) . شی XMLHttp پس از مدتی به عنوان يك موفقيت بزرگ برای پياده كنندگان مرورگر IE عرض اندام كرد .
به موازات متداول شدن شی فوق ، پياده كنندگان در Mozilla نسخه اختصاصی از XMLHttp را پياده سازی كردند . در مقابل اجازه دستيابی از طريق اكتيو ايكس ، پياده كنندگان موزيلا متدها و خصلت ها را در يك شی ذاتی مرورگر و با نام objectXMLHttpRequest ارائه كردند . پس از اين كه دو مرورگر اصلی در بازار هر يك توانستند به نوعی از XMLHttp حمايت نمايند ، مرورگرهائی ديگر نظير Opera و Safari نيز هر يك به نوعی حمايت خود از شی فوق را اعلام كردند .


بدين ترتيب پياده كنندگان صفحات وب توانستند ، صفحاتی را خلق نمايند كه با تعبيه كدهای مورد نياز در آنها ، امكان پردازش در سمت سرويس گيرنده را فراهم نمايند . انجام پردازش های اوليه نظير تغيير رنگ و شكل ظاهری صفحات ، مديريت عناصر موجود بر روی يك صفحه و تغيير آنها در زمان اجراء متناسب با عمليات كاربر ، بررسی صحت داده ورودی توسط كاربر در يك فرم ساده اطلاعاتی ، دريافت داده در پس زمينه و عدم نياز به ارسال تمامی صفحه و بهنگام سازی بخش هائی خاص از آن ( با بكارگيری فريم ها ) ، نمونه هائی از تاثير فناوری هائی بود كه توان پردازش در سمت سرويس گيرنده را در اختيار پياده كنندگان قرار می داد .
وب پويا با تمركز بر روی پردازش های سمت سرويس دهنده
همزمان با گسترش اينترنت و وب ، ايجاد صفحات وب با محتويات پويا با اتكاء به منابع داده موجود در سمت سرويس دهنده و ساير شرايط تاثير گذار در فرآيند پاسخ به درخواست كاربران مطرح گرديد . همين موضوع باعث شد كه توجه به سرويس دهنده برای انجام برخی پردازش ها نيز در دستور كار قرار بگيرد . ظهور فناورهائی نظير ASP ( برگرفته شده از Active Server Page ) و PHP ( برگرفته شده از Hypertext Preprocessor ) از اوايل سال 1996 پاسخی به اين نياز بود . از آن زمان به بعد بود كه كم كم واژه برنامه های وب قدم در عرصه نرم افزار گذاشت . اگر به تعاريف آن زمان برگرديم مشاهده می كنيم كه در ابتدا از اين اصطلاح در خصوص صفحات وب پويا استفاده می گرديد .
نگرش جزيره ای به فناورهای مرتبط با برنامه های وب تا اوايل سال 1999 ادامه يافت . تا اين كه شركت های متعددی به فكر ارائه يك پلت فرم با در نظر گرفتن واقعيتی به نام اينترنت افتادند . دات نت ، پلت فرم ارائه شده توسط شركت مايكروسافت يك نمونه در اين زمينه است كه از صدر تا ذيل آن با در نظر گرفتن واقعيتی با نام اينترنت طراحی و پياده سازی شده است .
در اين دوران بود كه به برنامه های وب با يك نگاه جامع تر و سيستماتيك تر نگاه می شد . در طی پنج سال گذشته ، اين نوع برنامه ها توانستند با بكارگيری مجموعه ای از فناوری ها منشاء تحولات عمده ای در خصوص بردن اينترنت در متن زندگی (و نه حاشيه ! ) مردم جهان باشند . ايده " نرم افزار به عنوان سرويس " و يا برنامه نويسی سرويس گراء از نگرش های جديد به مقوله نرم افزار و دنيای برنامه نويس‍ی در عرصه وب است .
موج استفاده از اينترنت برای ارائه خدمات online ( ارائه شده به كاربران از طريق برنامه های وب ) باعث گرديد تا معماری و رفتار اينگونه برنامه ها با تامل بيشتر مطالعه و بررسی گردد . هدف ، ايجاد برنامه های وب با كارآئی مطلوب است تا ضمن ارائه خدمات خود دارای ويژگی هائی نظير : افزايش تعامل كاربر با برنامه ( همانند برنامه های desktop ) ، استفاده بهينه از محيط انتقال و به حداقل رساندن ترافيك آن ، مديريت بهينه منابع سمت سرويس گيرنده در پاسخ به رويدادهای محقق شده سمت سرويس گيرنده ، عدم ارسال اطلاعات غيره ضروری توسط سرويس گيرنده و ... باشند . ماحصل اين تفكرات ظهور فناوری جديدی با نام Ajax است كه شركت هائی نظير گوگل و مايكروسافت توانستند از سال 2005 با بكارگيری اين فناوری تحول بزرگی را در عرصه برخی از سرويس ها و خدمات خود ايجاد نمايند .
حمع بندی !
همزمان با بحث معماری سرويس گيرنده و سرويس دهنده دو واژه fat-client و thin-client قدم در ادبيات نرم افزار گذاشتند . در معماری فوق ، هدف استفاده از توان پردازشی سرويس گيرنده و سرويس دهنده برای اجرای يك برنامه است . استفاده از توان پردازشی هر يك از عناصر اصلی درگير در معماری فوق و تعريف سهمی خاص برای هر يك ( سرويس گيرنده و سرويس دهنده ) ، از اهداف اوليه و در عين حال بسيار مهم معماری فوق است .
پياده كنندگان برنامه های كامپيوتری خصوصا" برنامه های وب ، همواره با اين سوال مواجه بوده و هستند كه در تقسيم سهم پردازش ، چه ميزان سهم را می بايست به سرويس گيرنده داد ؟ چه پردازش هائی را می توان در سمت سرويس گيرنده انجام داد ؟ در پاسخ به اين سوال رويكردهای مختلفی مطرح شده است . fat client و thin client دو نمونه متداول در اين زمينه می باشند .
در fat client ، هدف بكارگيری پتانسيل های مرورگر برای انجام اكثر پردازش ها در يك برنامه وب است . رويكرد فوق در اواسط دهه 90 ميلادی در كانون توجه طراحان و پياده كنندگان وب قرار گرفت . علت اين امر به تلاش شركت های بزرگ نرم افزاری در جهت توليد و ارائه فناورهائی بود كه توانمندی مرورگر در انجام پردازش را افزايش می داد . ظهور فناورهائی نظير جاوا اسكريپت ، ايجاد يك اينترفيس برنامه نويسی در مرورگر ،‌ايجاد يك مدل شی گراء ( ولو ناقص ) برای يك سند HTML با هدف امكان دستيابی به هر يك از عناصر موجود در آن ، عرضه DHTML و CSS جملگی نشاندهنده تلاش هائی است كه در آن زمان با هدف افزايش توان پردازش در سمت سرويس گيرنده مطرح شد .
پس از گذشت مدت زمان كوتاهی ( از ابتدای سال 1996 ) ، تمايل به سمت برنامه های وب با ويژگی thin client مطرح گرديد . در مدل فوق ، هدف كاهش سهم پردازش در سمت سرويس گيرنده و افزايش پردازش های سمت سرويس دهنده بود . ظهور فناورهای متعددی نظير ASP و PHP تنها نمونه ای اندك از تلاش های انجام يافته در آن دوران برای افزايش توان پردازش در سمت سرويس دهنده است .
با اين كه در ساليان گذشته همچنان از پتانسيل های سمت سرويس گيرنده برای انجام پردازش در برنامه های وب استفاده می گرديد ، ولی رفتار اكثر برنامه های وب مبتنی بر اين واقعيت بود كه : " داده را وارد نمائيد ، صفحه را برای سرويس دهنده ارسال نمائيد و منتظر دريافت پاسخ باشيد " .
هم اينك ما شاهد يك تحول بزرگ ديگر در عرصه برنامه نويسی هستيم . تحولی كه مهمترين دستاورد آن ، تولد نسل جديدی از برنامه های وب است كه در آنها كاربر با برنامه دارای تعامل بمراتب بيشتری نسبت به نسل گذشته برنامه های وب است . اين تحول عظيم نرم افزاری به كمك مجموعه ای از فن آوری ها كه در مجموع به آنها Ajax گفته می شود ، محقق می گردد .
آيا Ajax قصد دارد با تغيير در الگوی رفتاری برنامه های وب فاصله آنها را با برنامه های desktop كاهش دهد ؟ آيا زمان آن رسيده است كه برای پردازش های سمت سرويس گيرنده از يك پلت فرم جامع ، همانند پلت فرم های ارائه شده سمت سرويس دهنده ، استفاده گردد ؟ آيا تاكنون از اين فناوری به منظور ايجاد برنامه های وب استفاده شده است ؟ با استفاده از چه مكانيزم هائی می توان مبادله اطلاعات بين سرويس گيرنده و سرويس دهنده را كاهش و از پهنای باند موجود استفاده بهينه كرد ؟
اجازه دهيد به اين سوال و سوالات بسيار ديگر در رابطه با Ajax ، فناورهای مرتبط با آن و از همه مهمتر كاربرد آن در بخش های بعدی پاسخ دهيم .

منبع: http://www.srco.ir

[Admin]

Ajax : تحولی بزرگ در عرصه وب ( بخش دوم )

در بخش اول (http://www.srco.ir/Articles/DocView.asp?ID=554) ضمن بررسی تاثير متقابل وب بر نرم افزار ، مروری داشتيم به وب ايستا و وب پويا و اين كه برای انجام پردازش های مورد نياز در برنامه های وب می توان از امكانات و فناوری های متعددی در سمت سرويس گيرنده و سرويس دهنده استفاده كرد . هدف از بيان مطالب فوق ، پاسخ به اين سوال بود كه چرا به وجود يك فناوری ديگر نظير Ajax نياز است ( گرچه Ajax يك فناوری نيست و مجموعه ای از فناوری ها را شامل می شود ) .
با اين كه ايده فناورهائی نظير Ajax در گذشته نيز وجود داشته است و پياده كنندگان برنامه های وب در زمان خود با بكارگيری برخی فناوری ها و ترفندها توانسته بودند مشكل خود را تا حدود زيادی برطرف نمايند ولی گذشت زمان و گسترش باور نكردنی اينترنت ، باعث شد تا استفاده از بستر فوق برای ارائه سرويس های online در دستور كار اكثر سازمان ها و شركت ها در اقصی نقاط جهان قرار بگيريد . همين موضوع باعث شد كه دگر باره جامعه بزرگ طراحان و پياده كنندگان برنامه های وب اين نياز را احساس كنند كه به يك راه حل جامع و سيستماتيك برای برخورد با مسائل خود ( خصوصا" تعامل با كاربر ) در دنيای نوين برنامه نويسی وب نياز دارند . دنيائی كه در آن دقت و سرعت در ارائه خدمات online با بكارگيری كمترين منابع و توليد بيشترين بهره وری ، رمز ماندگاری يك سازمان در مدار رقابت و پيشرفت است . همين امر باعث شد كه شركت های بزرگ توليد كننده نرم افزار و خدمات online نيز دست به كار شوند و چيزی را خلق كنند كه ما امروزه از آن با نام Ajax ياد می كنيم .
در اين بخش به بررسی موارد زير خواهيم پرداخت :


تولد Ajax و ريشه يابی علت انتخاب اين نام
Ajax و فناوری های مرتبط با آن
اصول حاكم بر فناوری Ajax .
نحوه كاركرد Ajax در برنامه های وب

تولد Ajax
در فوريه سال 2005 ، Jesse James Garrett از Adaptive Path مقاله ای را با عنوان " يك رويكرد جديد به برنامه های وب (http://www.adaptivepath.com/publications/essays/archives/000385.php) " بر روی وب سايت خود منشتر كرد . وی در اين مقاله ضمن اشاره به اين موضوع كه فاصله بين برنامه های وب و desktop در حال از بين رفتن است ، به بررسی دو نمونه از برنامه های وب جديد با نام Google Suggest و Google Maps پرداخته بود . Garrett پس از تشريح نحوه عملكرد برنامه های فوق ، برای اولين مرتبه از واژه Ajax در مقاله خود استفاده كرد .
وی در مقاله خود دنيائی را پيش بينی كرده بود كه در آن برنامه های وب از لحاظ قابليت دستيابی ، پاسخ گوئی و سادگی قابل مقايسه با برنامه های desktop خواهند شد .
Ajax چيست ؟


Ajax برگرفته شده از Asynchronous JavaScript XML است و مشتمل بر مجموعه ای از فناوری ها است ، نه صرفا" يك فناوری .

Ajax ، اساس و پايه چيزی است كه امروزه از آن با نام وب 2 نام برده می شود ( نسل جديد وب ) . ايده اصلی ، ايجاد برنامه های وبی است كه دارای شكل ظاهری و توانمندی هائی مشابه با برنامه های desktop باشند .

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

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

- فن آوری های استاندارد presentation نظير XHTML و CSS
- بهنگام سازی پويای يك صفحه مستقر شده در حافظه با استفاده از DOM ( برگرفته شده از Document Object Model )
- مبادله و پردازش داده با استفاده از XML (فرمت مبادله داده ) و XSLT ‌( تبديل XML به XHTML )
- بازيابی داده غيرهمزمان با استفاده از XMLHttpRequest ( كارگزار اوليه مبادله اطلاعات )
و جاوا اسكريپت كه همه چيز را به يكديگر مرتبط می نمايد و از آن برای برنامه نويسی Ajax engine استفاده می گردد .

در دنيای واقعی ، از تمامی فناوری های فوق در Ajax استفاده می گردد ولی به وجود HTML/XHTML ، DOM و Javascript بيش از همه نياز است چون :
از XHTML برای نمايش اطلاعات استفاده می گردد .
از DOM برای تغيير بخش هائی از يك صفحه XHTML بدون نياز به load مجدد صفحه استفاده می گردد.
از جاوا اسكريپت ، برای مقداردهی اوليه ارتباط بين سرويس گيرنده و سرويس دهنده و بهنگام سازی صفحات وب به كمك DOM استفاده می گردد .

يك عنصر اساسی و مهم ديگر كه در مقاله Garrett به آن اشاره نشده است ، ضرورت انجام پردازش های سمت سرويس دهنده است . تمامی فناوری های اشاره شده ( در پاراگراف قبل ) ، در ارتباط مستقيم با Ajax engine سمت سرويس گيرنده می باشند . بدون وجود يك سرويس دهنده مطمئن و پاسخگو به منظور ارسال محتويات برای Ajax engine ، در عمل Ajax فاقد كارآئی لازم خواهد بود . صرفنظر از فناوری استفاده شده در سمت سرويس دهنده ( نظير PHP و يا ASP.NET ) ، می بايست اين اطمينان حاصل گردد كه داده با فرمت صحيح برای Ajax engine ارسال می گردد .

از شی XMLHttpRequest درون جاوا اسكريپت برای ارتباط با سرويس دهنده استفاده می گردد تا در ادامه بتوان داده برگردانده شده از سرويس دهنده ( با فرمت Xml و يا متن معمولی ) را پردازش كرد .

از DHTML و CSS برای نمايش نتايج در مرورگر استفاده می گردد .

هدف از كنارهم قرار گرفتن تمامی فناوری های اشاره شده ، اين است كه شكل ظاهری برنامه های وب و نحوه پاسخ گوئی آنها به خواسته كاربران مشابه برنامه های desktop گردد .


همانگونه كه در نام اين فناوری مشخص است ، Ajax مشتمل بر مجموعه ای از فناوری ها است : Asynchronous JavaScript XML


غيرهمزمان و يا asynchronous بدين معنی است كه مرورگر لازم نيست منتظر بماند تا داده از سرويس دهنده برگردانده شود و می تواند به محض دريافت داده آن را پردازش نمايد . به عبارت ديگر ، انتقال داده در پس زمينه انجام شده و مرورگر مجبور به توقف و انتظار برای تحقق اتفاقی نخواهد بود .
رويكرد فوق نشاندهنده يكی از ويژگی های مهم و حياتی Ajax است . در چنين مواردی‌، می توان داده را پس از ارسال توسط سرويس دهنده ، پردازش كرد . لازم نيست تمامی برنامه را معطل رسيدن داده از سمت سرويس دهنده كرد .
در صورتی كه لازم است پردازش های سمت سرويس گيرنده منتظر دريافت داده بمانند ، مكانيرم دريافت و پردازش داده می بايست بطور همزمان انجام شود . در صورتی كه يك ارتباط ضعيف بين سرويس گيرنده و سرويس دهنده برقرار شده باشد اين موضوع می تواند عملكرد و موفقيت يك برنامه وب را با مشكل مواجه نمايد .

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

بخش xml واژه Ajax دارای چه مسئوليتی است ؟ XML به عنوان يك استاندارد جهانی در عرصه وب مطرح است و به كمك آن می توان از يك روش مبتنی بر متن برای مبادله داده در عرصه اينترنت استفاده كرد . يكی از دلايل مهم گسترش xml ، ماهيت مبتنی بر متن آن است . با توجه به اين كه طراحی اينترنت بگونه ای انجام شده بود تا بتواند مستندات مبتنی بر متن نظير اسناد HTML را نمايش دهد ، وجود xml به منزله قلابی است كه می توان آن را دور اينترنت انداخت و به صيد داده پرداخت. داده ئی كه به همراه ساختار خود می تواند امكان پردازش را در ساير سيستم ها فراهم نمايد . به همين دليل است كه برنامه های Ajax بگونه ای نوشته می گردند تا بتوانند بر روی داده برگردانده شده از سرويس دهنده با فرمت xml ، عمليات مورد نظر را انجام دهند . به عبارت ديگر ، پس از برقراری ارتباط با سرويس دهنده ، داده با فرمت xml برگردانده خواهد شد .
xml ، صرفا" يكی از روش های برگرداندن داده است و در صورت لزوم می توان از فرمت هائی ديگر نظير متن معمولی نيز استفاده كرد .

در كنار جاوا اسكريپت و XML ، فناوری Ajax با فناوری های ديگری نظير DHTML و CSS نيز كار می كند . به كمك فناورهای فوق می توان داده موجود در يك صفحه وب را بدون نياز به load تمامی صفحه بهنگام كرد ( صرفا" load بخشی كه ضرورت آن احساس می شود ) . پتانسيل فوق يكی از اهداف و ويژگی های مهم برنامه های وب مبتنی بر فناوری Ajax محسوب می گردد .

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


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


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

عدم سردرگمی كاربر : برنامه های وب مبتنی بر فناوری Ajax مدل تعامل با كاربر مختلفی را نسبت به برنامه های وب سنتی معرفی كرده اند . در مقابل وب استاندارد ( كليك كن و منتظر باش ) ، برخی برنامه های Ajax از يك رويكرد ديگر برای پياده سازی بخش رابط كاربر خود نظير drag-and-drop و يا double-clicking استفاده می نمايند . صرفنظر از نوع مدل انتخاب شده برای پياه سازی تعامل با كاربر ، مهم ارائه امكانات بخش رابط كاربر بگونه ای است كه همواره كاربر در سريع ترين زمان بتواند در خصوص انجام حركت بعدی خود تصميم گيری نمايد .

استفاده منطقی از تجارب مثبت گذشته : وقت خود را بی خودی به ابداع مدل های تعامل با كاربر جديد كه كاربران شما با آنها آشنا نيستند ، هدر ندهيد . استفاده از تجارب برنامه های وب سنتی و desktop می تواند پياده كنندگان را در طراحی يك مدل مناسب جهت تعامل با كاربر كمك نمايد .

اجتناب از بكارگيری عناصر غيرضروری : از بكارگيری عناصر غير ضروری نظير تكرار انيميشن و بخش هائی نظير blinking page اجتناب كنيد. بكارگيری اين چنين عناصری باعث می شود تا كاربران در زمان انجام فعاليت های مورد نظر دچار سردرگمی شوند .

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

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

توجه به نياز كاربران قبل از هر چيز : برنامه های Ajax را قبل از هر چيز با كاربران خيالی در ذهن طراحی نمائيد . سهولت در انجام عمليات متداول می بايست در دستور كار قرار بگيرد . كمتر در انديشه انجام كارهای تبليغاتی و يا افكت های غيرضروری باشيد .


نقطه مشترك بين تمامی اصول اشاره شده ، قابليت استفاده از يك برنامه با حداكثر ظرفيت و رضايتمندی كاربران است . هدف اوليه Ajax ، بهبود و ارتقاء بخش رابط كاربر برنامه ها با هدف رضايتمندی بيشتر كاربران است .
نحوه كار Ajax
در برنامه های وب سنتی مرورگر مسئوليت مقداردهی اوليه درخواست ها و پردازش آنها جهت ارسال به سرويس دهنده وب را برعهده دارد . در مقابل ، در Ajax يك لايه ميانی ( كه Garrett آن را Ajax engine ناميد ) مسئوليت مديريت ارتباط برقرار شده را برعهده می گيرد . Ajax engine در واقع يك شی جاوا اسكريپت و يا تابع است و زمانی كه به اطلاعاتی از سرويس دهنده نياز باشد ،‌ از آن استفاده خواهد شد .
در مقابل برنامه های وب سنتی كه يك لينك به يك منبع ديگر ارائه می گردد ( نظير يك صفحه وب ديگر ) ، در برنامه های وب مبتنی بر Ajax ، هر لينك باعث فراخوانی Ajax engine می گردد كه وظيفه آن زمانبندی و انجام درخواست بطور غيرهمزمان است .
سرويس دهنده ( كه از لحاظ سنتی اسناد HTML ، تصاوير ، CSS و جاوا اسكريپت را ارائه می نمايد ) ، بگونه ای پيكربندی می گردد تا داده مورد نياز را در اختيار Ajax Engine قرار دهد. اين داده می تواند متن معمولی ، XML و يا ساير فرمت های مورد نياز داده باشد. بديهی است در چنين مواردی ، Ajax engine می بايست قادر به خواندن و تفسير داده باشد .
پس از دريافت پاسخ لازم از سرويس دهنده ، Ajax engine عمليات خود را كه اغلب بررسی داده و ايجاد تغييرات لازم در بخش رابط كاربر است ، آغاز می نمايد . با توجه به اين كه در فرآيند فوق به اطلاعات كمتری نسبت به برنامه های وب سنتی نياز است ، بخش رابط كاربر با سرعت بيشتری بهنگام می گردد و كاربر قادر به انجام كارهای خود با سرعت بيشتری است .
در شكل 1 ، عملكرد برنامه های وب سنتی نسبت به برنامه های وب مبتنی بر Ajax نشان داده شده است .

http://www.srco.ir/Articles/images/Ajax1.jpg

شكل 1 : عملكرد برنامه های وب سنتی نسبت به برنامه های وب مبتنی بر Ajax
منبع : Adaptive Path
خلاصه
فناوری های مرتبط با Ajax در طی ساليان گذشته مطرح و از آنها در مجموعه ای از نرم افزارها استفاده می گرديد . Jesse James Garrett در مقاله خود تمامی فناوری های اشاره شده را در زير يك سقف و با نام Ajax كنار هم قرار داد . با بكارگيری فناوری Ajax در نرم افزارهای برجسته ای نظير Google Suggest در سال 2005 ، Ajax در كانون توجه جهانی قرار گرفت . وب 2 ، برای نيل به اهداف خود به Ajax دل بسته است و Ajax می تواند تصويری جديد از برنامه های وب را در عرصه اينترنت به نمايش بگذارد .
وجود برخی خصايص خاص در بخش رابط كاربر برنامه های desktop و نحوه تعامل كاربران با اينگونه برنامه ها ، حلقه گمشده ای در برنامه های وب است. حلقه ای كه Ajax سعی دارد خلاء آن را پر كند . قطعا" در آينده ای نه چندان دور شاهد حضور بيشتر برنامه های وبی خواهيم بود كه دارای شكل ظاهری و عملكردی مشابه (خصوصا" تعامل با كاربر ) با برنامه های desktop می باشند .
شايد روزی فرا رسد كه يكی از واژه های برنامه های desktop و برنامه های وب به نفع ديگری كنار برود و يا هر دو بر يك نام مشترك ديگر به توافق برسند .
در بخش سوم به بررسی نمونه برنامه هائی خواهيم پرداخت كه در آنها از فناوری Ajax استفاده می گردد .

[Admin]

Ajax : تحولی بزرگ در عرصه وب ( بخش سوم )

در بخش اول (http://www.srco.ir/Articles/DocView.asp?ID=554) ضمن بررسی تاثير متقابل وب بر نرم افزار ، مروری داشتيم به وب ايستا و وب پويا و اين كه برای انجام پردازش های مورد نياز در برنامه های وب می توان از امكانات و فناوری های متعددی در سمت سرويس گيرنده و سرويس دهنده استفاده كرد . هدف از بيان مطالب فوق ، پاسخ به اين سوال بود كه چرا به وجود يك فناوری ديگر نظير Ajax نياز است ( گرچه Ajax يك فناوری نيست و مجموعه ای از فناوری ها را شامل می شود ) .
در بخش دوم (http://www.srco.ir/Articles/DocView.asp?ID=555) با Ajax و فناوری های مرتبط با آشنا شديم . در اين بخش به بررسی نمونه برنامه هائی خواهيم پرداخت كه در آنها از فناوری Ajax استفاده می گردد .
Google Suggest
اجازه دهيد كار خود را با نمونه ای آغاز نمائيم كه برای شما كاملا" آشنا است . در زمان استفاده از اينترنت هر يك از ما بدفعات از موتورهای جستجو جهت يافتن اطلاعات مورد نياز حود استفاده می كنيم . Google يكی از محبوبترين و قدرتمندترين موتورهای جستجو در اينترنت است . پس از تايپ كليد واژه مورد نظر و فشردن كليد Google Search ، كليد واژه مورد نظر برای سرويس دهنده ارسال می گردد . در ادامه ،‌ با توجه به ايجاد زيرساخت اطلاعاتی لازم در سمت سرويس دهنده ، نتايج استخراج و برای شما ارسال می گردد .
Google Suggest (http://www.google.com/webhp?complete=1) ، يكی از اولين نمونه برنامه هائی است كه در آن از Ajax استفاده شده است .برنامه فوق دارای اينترفيسی مشابه صفحه اصلی گوگل است ( يك text box جهت تايپ كليد واژه مورد نظر به همراه يك button جهت جستجو ) . همه چيز مشابه صفحه اصلی و قديمی گوگل است تا زمانی كه شروع به تايپ متن مورد نظر خود در text box نكرده ايد . به موازات تايپ متن در محل مربوطه ، گوگل پيشنهادات و يا اطلاعاتی را از سرويس دهنده دريافت و به شما ارائه می نمايد ( يك ليست از واژه ها به همراه تعداد نتايج مربوط به هر يك ) .
به عنوان نمونه فرض كنيد عبارت srco.ir را در بخش مربوطه تاپپ نمائيم ، به موازات تايپ هر يك از حروف ، گوگل پيشنهادات خود را ارائه می نمايد . نحوه عملكرد Google Suggest در شكل 1 نشان داده شده است .

http://www.srco.ir/Articles/images/introajx02.jpg
شكل 1 : عملكرد برنامه Google Suggest
Gollum
يكی از متداولترين موارد استفاده از Ajax ، ايجاد live search است . Google Suggest كه در بخش قبل به آن اشاره گرديد ، يك نمونه متداول در اين زمينه است . تاكنون تعداد زيادی از اينگونه برنامه ها پياده سازی شده است . به عنوان مثال می توان به برنامه Gollum (http://gollum.easycp.de/en) اشاره كرد ، كه يك live search برای Wikipedia (http://www.wikipedia.org/) ( بزرگترين دايره المعارف موجود در اينترنت ) را ارائه می نمايد . نحوه عملكرد اين برنامه در شكل 2 نشان داده شده است .

http://www.srco.ir/Articles/images/introajax3.jpg
شكل 2 : عملكرد برنامه Gollum با هدف جستجو در Wikipedia

ايجاد يك ماشين حساب مبتنی بر Ajax
هر برنامه ای كه در آن لازم است داده برای سرويس دهنده ارسال تا پس از انجام پردازش های لازم در سمت سرويس دهنده ، نتايج برای سرويس گيرنده برگردانده شود ، می تواند شرايط اوليه مورد نياز جهت استفاده از فناوری Ajax را دارا باشد . پياده سازی يك ماشين حساب (http://www.funwithjustin.com/ajax-toybox-demo/calculator.html) ساده يك نمونه در اين زمينه است .
برای استفاده از ماشين حساب فوق ، كاف‍ی است دو عدد ( و يا اپراند ) را در فيلدهای مربوطه درج و در ادامه بر روی دكمه عملگر ( جمع ، تفريق ، ضرب ، تقسيم ) مورد نظر كليك نمائيم . برنامه فوق با استفاده از Ajax ، اطلاعات خود را ( شامل اپراندها و نوع عملگر انتخابی ) برای سرويس دهنده ارسال می نمايد تا پس از انجام عمليات ، نتايج برای سرويس گيرنده برگردانده شود . تمامی عمليات بدون نياز به refresh صفحه انجام می شود . عملكرد برنامه فوق از منظر كاربر ،‌ شباهت بسيار زيادی به برنامه های desktop دارد.
شكل 3 ، نحوه عملكرد برنامه فوق را نشان می دهد .

http://www.srco.ir/Articles/images/introajax4.jpg
شكل 3 : يك ماشين حساب ساده مبتنی بر فناوری Ajax

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

http://www.srco.ir/Articles/images/introajax5.jpg
شكل 4 : يك برنامه چت مبتنی بر فناوری Ajax
پردازش بر روی صفحات گسترده
يكی ديگر از كاربردهای متداول Ajax استفاده از آن در برنامه های صفحه گسترده و يا همان spreadsheet است . برنامه Num Sum (http://numsum.com/spreadsheet/new) يك نمونه در اين زمينه است . با استفاده از برنامه فوق می توان يك صفحه گسترده واقعی ( بكارگيری فرمول ها و ذخيره آن بر روی سرويس دهنده مورد نظر ) را ايجاد كرد . به موازات درج داده ، فرآيند بهنگام سازی بدون نياز به انجام يك refresh توسط مرورگر انجام خواهد شد . شكل 5 ، نحوه عملكرد برنامه فوق را نشان می دهد .

http://www.srco.ir/Articles/images/introajax6.jpg
شكل 5 : يك برنامه صفحه گسترده مبتنی بر فناوری Ajax
استفاده از سايت آمازون
استفاده از محتويات موجود بر روی سايت آمازون ، يك نمونه ديگر از برنامه های وب مبتنی بر فناوری Ajax را نشان می دهد . با استفاده از برنامه فوق (http://lmap.co.nr/Amazon1.htm) می توان تمامی محتويات منتشر شده بر روی سايت آمازون را با يك ساختار درختی مشاهده كرد .با كليك بر روی هر گره می توان محصولات مربوط به آن را مشاهده كرد . شكل 6 ، نحوه عملكرد برنامه فوق را نشان می دهد .

http://www.srco.ir/Articles/images/introajax7.jpg
شكل 6 : مشاهده محتويات سايت آمازون به كمك يك برنامه وب مبتنی بر فناوری Ajax
log in توسط Ajax
با استفاده از Ajax می توان فرآيند log in به يك سايت را ساده تر كرد . به عنوان نمونه با مراجعه به آدرس www.jamesdam.com/ajax_login/login.html (http://www.jamesdam.com/ajax_login/login.html) صفحه ای را مشاهده خواهيم كرد كه اجازه log in اتوماتيك را با استفاده از Ajax به كاربران می دهد . در صورتی كه يك نام و رمز عبور صحيح توسط كاربر درج نشود و وی در هر مكانی از صفحه كليك نمايد ، يك پيام خطاء نمايش داده خواهد شد . به عبارت ديگر ، در صورتی كه كاربر نام و رمز عبور صحيح خود را وارد نمايد و در هر مكانی از صفحه كليك نمايد ، امكان log in به سايت در اختيار وی گذاشته می شود . شكل 7 عملكرد برنامه فوق را نشان می دهد .

http://www.srco.ir/Articles/images/introajax8.jpg
شكل 7 : فرآيند log in به يك سايت با استفاده از فناوری Ajax
Drag و Drop با Ajax
به موازات افزايش چشمگير شباهت برنامه های وب و برنامه های desktop ، هم اينك می توان بسياری از عملياتی را كه در برنامه های desktop انجام می شود در برنامه های وب نيز انجام داد . فرآيند موسوم به drag & drop نمونه ای در اين زمينه است كه بكارگيری آن در برخی برنامه ها می تواند كار را برای كاربران ساده تر نمايد . سرويس دهنده بطور اتوماتيك از آيتم انتخاب شده توسط كاربر آگاه شده و متناسب با آن از خود واكنش نشان خواهد داد . با مراجعه به آدرس www.broken-notebook.com/magnetic (http://www.broken-notebook.com/magnetic) ، می توان يك نمونه از اين نوع برنامه ها را مشاهده كرد.
زمانی كه يك magnet را به يك مكان جديد drag می نمائيد ، مكان جديد با استفاده از تكنولوژی Ajax برای سرويس دهنده ارسال و در آن مكان داده ذخيره می گردد . در ادامه ، ساير افرادی كه صفحه فوق را مشاهده خواهند كرد ، آن را در موقعيت و يا مكانی خواهند يافت كه قبلا" شما آن را مستقر كرده ايد ، مگر اين كه موقعيت آن توسط ساير كاربران تغيير يافته باشد . شكل 8 عملكرد برنامه فوق را نشان می دهد .

http://www.srco.ir/Articles/images/introajax9.jpg
شكل 8 : عمليات Drag & Drop به كمك فناوری Ajax
يكی از متداولترين موارد استفاده از عمليات Drag & Drop به همراه Ajax ، پياده سازی Shopping cart است . زمانی كه خريدار قصد دارد يك آيتم را به يك shopping cart اضافه نمايد ، می بايست كاربر در چندين صفحه حركت نمايد تا در نهايت با كليك بر روی‌ دكمه Add to Cart كالای انتخاب شده را به سبد خريد اضافه نمايد و مجددا" برای دنبال نمودن فرآيند خريد به صفحات قبل برگردد . با استفاده از فناوری Ajax می توان به سادگی كالای مورد نظر خود را انتخاب و در ادامه با عمليات Drag & Drop آن را در سبد خريد قرار داد . زمانی كه با روش Drag & Drop يك آيتم به يك سبد خريد اضافه می گردد ، سرويس دهنده از اين موضوع مطلع شده و مبلغ كالای خريداری شده را به مجموع كالاهای خريداری شده موجود در سبد خريد اضافه می نمايد .
تغيير صفحات وب به صورت پويا
يكی از حوزه هائی كه Ajax در آن توانمند و حرف های زيادی برای گفتن دارد ، بهنگام سازی و يا تغيير محتويات يك صفحه وب به صورت پويا است . تاكنون هزاران نوع از اين برنامه ها در طی ساليان اخير و به كمك فناوری Ajax پياده سازی شده است .
SaneBull Market Monitor (http://www.sanebull.com/test.html) يك نمونه از كاربرد Ajax به منظور تغيير محتويات يك صفحه را نشان می دهد . همزمان با مشاهده صفحه ، اطلاعات مندرج در آن بهنگام و آخرين وضعيت سهام در اختيار مخاطبان قرار داده می شود . شكل 9 ، نحوه عملكرد برنامه فوق را نشان می دهد .

http://www.srco.ir/Articles/images/introajax10.jpg
شكل 9 : بهنگام سازی محتويات يك صفحه وب به كمك فناوری Ajax
برنامه های واژه پرداز online يكی ديگر از نمونه كاربردهای Ajax در عرصه ارائه سرويس های online می باشند . يكی از اين نوع برنامه ها را می توانيد از طريق آدرس http://docs.google.com (http://docs.google.com/) مشاهده نمائيد .
تعامل با نقشه ها
Google Map (http://maps.google.com/) ، يكی از اولين برنامه هائی است كه در آن از Ajax استفاده شده است . پس از تمركز بر روی يك نقطه ، اطلاعات آن نقطه خاص از سرويس دهنده بازيابی و با يك فرمت مناسب نمايش داده می شود . شكل 10 ، نحوه عملكرد برنامه فوق را نشان می دهد .

http://www.srco.ir/Articles/images/introajax11.jpg
شكل 10 : تعامل با نقشه ها به كمك فناوری Ajax
تاكنون سايت های متعددی با الهام از Google Maps ايجاد شده اند . يك نمونه آن را می توانيد در آدرس www.gtraffic.info (http://www.gtraffic.info/) مشاهده نمائيد كه در آن اطلاعات ترافيك حمل و نقل كشور انگلستان در اختيار كاربران قرار داده می شود
برنامه های نقشه online تنها برنامه های Ajax نمی باشند كه از Pop-up استفاده نمايند . به عنوان نمونه با مراجعه به آدرس www.netflix.com/Top100 (http://www.netflix.com/Top100) سايـتی را مشاهده خواهيد كرد كه با قرار گرفتن بر روی عنوان يك فيلم ، اطلاعات مربوط به آن نمايش داده می شود ( بطور اتوماتيك داده از سرويس دهنده و با استفاده از Ajax بازيابی می گردد و در ادامه در يك pop up نمايش داده می شود ) .
شكل
E-mail مبتنی بر Ajax
يكی ديگر از موارد استفاده از Ajax ، حمايت آن از برنامه های پست الكترونيكی مبتنی بر مرورگرها است . يك نمونه آن را می توانيد در آدرس http://demo.nextapp.com/Email/app مشاهده نمائيد .
مشاهده نامه های الكترونيكی از طريق برنامه های وب مبتنی بر مرورگر دارای چالش های مختص به خود است . در اين نوع برنامه ها پس از مشاهده ليستی از نامه های دريافتی با كليك بر روی هر يك از آنها به صفحه ای هدايت خواهيم شد كه در آن متن نامه الكترونيكی جهت خواندن در اختيار ما قرار داده می شود . پس از اتمام مطالعه يك نامه ، می بايست جهت مطالعه ساير نامه های دريافتی به ليست نامه های الكترونيكی مراجعه كرد .
بكارگيری فناوری Ajax در برنامه های پست الكترونيكی باعث تغيير اساسی رفتار اينگونه برنامه ها شده است . در اين نوع برنامه ها ، پس از مشاهده ليستی از برنامه ها ، با كليك بر روی يك نامه دريافتی بطور اتوماتيك نامه مورد نظر دانلود و برای شما نمايش داده می شود بدون اين كه لازم باشد مرورگر refresh گردد . محتويات نامه دريافتی در انتهای صفحه نمايش داه می شود . شكل 11 ، نحوه عملكرد برنامه فوق را نشان می دهد .

http://www.srco.ir/Articles/images/introajax12.jpg
شكل 11 :‌ يك برنامه وب پست الكترونيكی پياده سازی شده به كمك فناوری Ajax
Gmail ، يكی از سرويس های رايگان گوگل است كه در آن از فناوری Ajax در بخش های متعددی استفاده شده است . زمانی كه كاربران برای اولين مرتبه به برنامه فوق log in می نمايند ، يك engine رابط كاربر درون يك iframes لود می شود . در ادامه ، تمامی درخواست ها به سرويس دهنده از طريق اين engine و به كمك شی XMLHttp انجام می شود.
انتشار اخبار به كمك Ajax
Yahoo! News ، يك نمونه ديگر از بكارگيری فناوری Ajax در مشاهده اخبار را نشان می دهد . پس از استقرار موس بر روی يك عنوان خبری ، خلاصه خبر و يك تصوير مرتبط با آن در يك كادر كوچك نمايش داده می شود . اطلاعات فوق به صورت پويا و به كمك شی ‌XMLHttp از سرويس دهنده وب بازيابی و نمايش داده می شود . شكل 11 ، نحوه عملكرد برنامه فوق را نشان می دهد .

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

[Admin]

Ajax : تحولی بزرگ در عرصه وب ( بخش چهارم )

آنچه تاكنون گفته شده است :

بخش اول (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fwww.srco.ir%2FArti cles%2FDocView.asp%3FID%3D554)
تاثير متقابل وب و نرم افزار بر يكديگر
بخش دوم (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fwww.srco.ir%2FArti cles%2FDocView.asp%3FID%3D555) Ajax و فناوری های مرتبط با آن بخش سوم (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fwww.srco.ir%2FArti cles%2FDocView.asp%3FID%3D556) بررسی نمونه برنامه های مبتنی بر Ajax
در اين بخش قرار بود كه در رابطه با فريمورك های مختلف ارائه شده جهت بكارگيری فناوری Ajax آشنا شويم . ولی به دليل درخواست تعداد زيادی از خوانندگان مبنی بر آشنائی بيشتر با معماری Ajax ، برنامه نويسی غيرهمزمان در برنامه های وب و شی XMLHttpRequest ، اين بخش را به بررسی موارد فوق اختصاص داديم تا علاقه مندان بتوانند قبل از پرداختن به اصل موضوع با برخی مفاهيم كليدی و مهم بيشتر آشنا شوند .
مقدمه
Ajax يك رويكرد و يا الگوی جديد برای پياده سازی برنامه های وب است كه در آن از اسكريپت های سمت سرويس گيرنده برای مبادله داده با سرويس دهنده وب استفاده می گردد. رويكرد فوق باعث می شود كه صفحات وب بدون نياز به refresh كامل بتوانند بطور پويا بهنگام گردند ( رويائی برای پياده كنندگان برنامه های وب ) . مهمترين دستاورد رويكرد فوق ، ارتباط بدون وقفه و پيوسته كاربران با برنامه های وب است .
برخی از كارشناسان بر اين اعتقاد هستند كه رويكرد فوق بيش از آن كه يك الگو باشد يك فناوری است . در واقع ، Ajax تركيبی از مجموعه فناوری های مرتبط به هم است كه از آنها با يك نگرش جديد در جهت توليد نسل جديدی از برنامه های وب استفاده می گردد .
نام بردن از فناورهائی كه در Ajax از آنها استفاده می گردد كار مشكلی نيست ولی مهم اين است كه بدانيم اين فناورها در كنار يكديگر به چه صورت كار می كنند و هر يك از آنها در Ajax دارای چه مختصاتی است .شكل 1 ، نحوه تعامل و ارتباط اين فناوری ها را از منظر مرورگر نشان می دهد .

http://www.srco.ir/Articles/images/introajax014.jpg
شكل 1 : عناصر Ajax

جاوا اسكريپت در Ajax دارای يك نقش محوری و تعيين كننده است و می توان آن را به منزله يك نيروی چسبنده در نظر گرفت كه ساير فناوری ها را با هم مرتبط می نمايد . زمانی كه يك برنامه به داده نياز داشته باشد ، از شی XMLHttpRequest به منظور ايجاد درخواست به سرويس دهنده استفاده می گردد . پس از برگرداندن داده توسط سرويس دهنده ، از فناورهای DOM ( برگرفته شده از Document Object Model ) و CSS ( برگرفته شده از cascading style sheets ) برای بهنگام سازی رابط كاربر مرورگر به صورت پويا استفاده می گردد .
برنامه نويسی وب غيرهمزمان
حرف A موجود در Ajax از Asynchronous گرفته شده است كه در زبان فارسی به غيرهمزمان و يا ناهمگام ترجمه می شود و بيانگر يكی از قابليت های مهم و كليدی الگوی برنامه نويسی Ajax است .
در برنامه های وب سنتی ، تعامل كاربر با برنامه بطور پيوسته نبوده و در مقاطع زمانی خاصی لازم است كاربر در انتظار اتمام يك عمليات باشد . زمانی كه كاربر عمليات خاصی نظير كليك بر روی دكمه موجود بر روی يك فرم را انجام می دهد ، يك درخواست مبتنی بر پروتكل HTTP برای سرويس دهنده وب ارسال می گردد . در ادامه ، سرويس دهنده درخواست را پردازش ( به عنوان نمونه ، انجام برخی محاسبات و يا عمليات مرتبط با بانك های اطلاعاتی ) و نتايج توليد شده را در قالب يك صفحه وب با محتويات جديد برای سرويس گيرنده ارسال می نمايد .
نحوه عملكرد صفحات وب متاثر از ماهيت stateless بودن پروتكل HTTP است . با توجه به اين كه تمامی منطق برنامه معمولا" بر روی سرويس دهنده قرار می گيرد ، نقش مرورگرها صرفا" نمايش بخش رابط كاربر و يا اصطلاحا" اينترفيس برنامه است . سرويس دهنده ، چرخه حيات يك صفحه وب را بطور كامل طی می نمايد و برای مرورگر تگ های HTML ، كدهای CSS و ساير منابع مورد نياز را جهت بازخوانی و نمايش مجدد صفحه ارسال می نمايد . ماهيت فرآيند فوق بگونه ای است كه در دراز مدت نمی تواند رضايت خاطر كامل كاربران را حداقل در سطح بخش رابط كاربر برنامه تامين نمايد . در اين مدل كاربران از يك الگوی stop-start-stop تبعيت می نمايند . كاربران در برخی موارد و با توجه به شرايط حاكم بر برنامه بطور موقت و از روی ناچار ارتباط خود را با برنامه از دست داده و می بايست در انتظار بهنگام سازی صفحه وب درخواستی بمانند .
شكل 2 ، نحوه عملكرد برنامه های وب در يك فرآيند همزمان را نشان می دهد .


http://www.srco.ir/Articles/images/introajax14.jpg
شكل 2 : نحوه عملكرد برنامه های وب در يك فرآيند همزمان
( عدم تعامل كاربر با برنامه در زمان درخواست های HTTP )
در ASP.NET زمانی كه يك صفحه داده را برای خود و يا حتی صفحه ای ديگر ارسال می نمايد ، يك postback اتفاق می افتد . در حين اين فرآيند ، وضعيت جاری صفحه به همراه كنترل های موجود بر روی آن جهت پردازش برای سرويس دهنده ارسال می گردند . مكانيزم postback با هدف تامين خواسته هائی نظير نگهداشت وضعيت صفحه و كنترل های سرويس دهنده موجود بر روی آن دنبال می شود . فرآيند فوق گرچه در نهايت می تواند منجر به refresh صفحه وب و نمايش محتويات جديد برای كاربر گردد ولی هزينه انجام آن زياد خواهد بود چراكه اولا" يك حجم داده می بايست برای سرويس دهنده ارسال گردد و ثانيا" ارتباط منطقی كاربر با برنامه از بين خواهد رفت .

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

http://www.srco.ir/Articles/images/introajax15.jpg
شكل 3 : نحوه عملكرد برنامه های وب در يك فرآيند غيرهمزمان
(ارسال درخواست های HTTP از طريق Ajax engine برای سرويس دهنده)
در هسته Ajax engine ، شی مهم و كليدی XMLHttpRequest قرار دارد كه در ادامه با آن بيشتر آشنا می شويم .
شی XMLHttpRequest
شی ‌ XMLHttpRequest به منزله قلب برنامه نويسی Ajax مطرح می گردد چراكه شی فوق باعث می شود جاوا اسكريپت بتواند درخواست هائی را ايجاد تا برای سرويس دهنده ارسال و نتايج ارسالی از سرويس دهنده را نيز پردازش نمايد .
شی فوق اولين مرتبه و به صورت يك شی اكتيوايكس در Internet Explorer 5 عرضه گرديد و هم اينك از آن در اكثر مرورگرها حمايت می گردد . ساير مرورگرها نظير Safari ، Opera ، Mozilla و فايرفاكس پتانسيل های XMLHttpRequest را به صورت يك شی ذاتی جاوا اسكريپت ارائه كرده اند ( در IE 7.0 شی فوق بطور ذاتی در جاوا اسكريپت تعبيه شده است ) .
با توجه به اين كه تاكنون نسخه های مختلفی از شی فوق در مرورگرها پياده سازی شده است ، پياده كنندگان می بايست كد لازم به منظور تشخيص نوع شی فوق را در زمان ايجاد يك نمونه از آن را در برنامه خود پيش بينی نمايند . برای تعيين نسخه در دسترس شی XMLHttpRequest می توان از روشی موسوم به " تشخيص شی " استفاده كرد .




ايجاد يك نمونه از شی XMLHttpRequest با توجه به نوع مرورگر

var xmlHttp = null;
if (window.XMLHttpRequest) { //IE7 , Mozilla ,...
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 5.x, 6
}
catch(e) {}
}

مثال
برای آشنائی با نحوه عملكرد شی فوق و برنامه نويسی وب غيرهمزمان ، در ادامه به بررسی يك نمونه مثال ساده خواهيم پرداخت . فرض كنيد قصد داريم يك درخواست غيرهمزمان به يك منبع موجود بر روی سرويس دهنده (در اين مثال خاص يك صفحه html كه حاوی يك متن ساده است ، صفحه ArticleSummery.htm ) را ايجاد نمائيم . صفحه فوق يك صفحه وب با حداقل اطلاعات و شامل يك متن ايستا است .



صفحه ArticleSummery.htm

<htmlxmlns="http://www.w3.org/1999/xhtml"dir="rtl">
<head>
<metacontent="text/html; charset=utf-8" http-equiv="content-type"/>
<title>تست برنامه نويسی وب غيرهمزمان </title>
</head>
<bodystyle="font-family: Tahoma;">
<div>در اين مقاله با برنامه نويسی وب همزمان و غيرهمزمان آشنا شديم </div>
</body>
</html>

مسئوليت ارسال يك درخواست غيرهمزمان به تابع SendRequest سپرده شده است .




http://uc-njavan.ir/uploder/files/y88/10-11-12/ajax1.JPG


توضيحات



متد sendRequest ،‌ يك پارامتر كه در واقع URL مربوطه به درخواست HTTP است را دريافت می نمايد .
مرحله اول : يك ارتباط غيرهمزمان ايجاد می گردد ( در نظر گرفتن مقدار true به عنوان سومين پارامتر در زمان فعال كردن ارتباط نشان دهنده يك ارتباط غيرهمزمان است ).
مرحله دوم : پس از مقداردهی اوليه ارتباط مورد نظر ، به خصلت onreadystatechange شی XMLHttpRequest يك تابع محلی با نام onCallback نسبت داده می شود . توجه داشته باشيد كه فراخوانی تابع فوق به صورت غيرهمزمان است . تابع Callback مشخص می نمايد كه چه زمانی درخواست تكميل و يا بهنگام شده است .
مرحله سوم : پس از مشخص كردن نوع محتوا در هدر درخواست ، با استفاده از متد Send شی XMLHttpRequest ، درخواست HTTP برای سرويس دهنده ارسال می گردد .

فراخوانی تابع onCallback
هر مرتبه ای كه وضعيت ready تغيير می يابد ، از تابع callback جهت ايجاد يك درخواست غيرهمزمان استفاده می گردد . در مرحله نهائی ، وضعيت بررسی و بخش رابط كاربر به همراه محتويات برگردانده شده از صفحه ArticleSummery.htm ، بهنگام می گردد.




http://uc-njavan.ir/uploder/files/y88/10-11-12/ajax2.JPG


توضيحات



وضعيت درخواست از طريق خصلت readyState برگردانده می شود .
مرحله اول : در صورتی كه مقدار خصلت readyState شی XMLHttpRequest برابر با مقدار 4 باشد ، درخواست به اتمام رسيده است .
مرحله دوم : در ادامه ، پاسخ برگردانده شده از سرويس دهنده بررسی می شود تا اين اطمينان حاصل گردد كه همه چيز با موفقيت انجام شده است .مقدار كد وضعيت 200 مربوط به پروتكل HTTP ، نشان دهنده اين موضوع است كه درخواست با موفقيت انجام شده است .
مرحله سوم : در نهايت ، خصلت innerHTML مربوط به عنصر span متاثر از محتويات برگردانده شده ، بهنگام می گردد .

كد زير ، محتويات صفحه Ajax1.aspx را بطور كامل نشان می دهد .




صفحه Ajax1.aspx



<%@Page Language="VB"Culture="fa-IR" %>
<scriptrunat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml"dir="rtl">
<headid="Head1"runat="server">
<title>نحوه استفاده از شی XMLHttpRequest</title>
</head>
<bodystyle="font-family: Tahoma">
<formid="form1"runat="server">
<div>
<spanid="results">بارگذاری صفحه ...</span>
</div>
</form>
<scripttype="text/javascript">
var xmlHttp = null;
window.onload = function() {
loadXmlHttp();
sendRequest("ArticleSummery.htm");
}
function loadXmlHttp() {
if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera, etc.
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.x and 6
}
catch (e){}
}
}
function sendRequest(url) {
if (xmlHttp) {
xmlHttp.open("GET", url, true); // true = async
xmlHttp.onreadystatechange = onCallback;
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// Send request without any additional parameters
xmlHttp.send(null);
}
}
function onCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200){
var r = document.getElementById('results');
r.innerHTML = xmlHttp.responseText;
}
else { // HTTP error
alert('Error: ' + xmlHttp.status);
}
}
}
</script>
</body>
</html>
شكل 4 خروجی مثال فوق را نشان می دهد .

http://www.srco.ir/Articles/images/introajax16.jpg
شكل 4 : ايجاد يك درخواست Http غيرهمزمان توسط شی XMLHttpRequest
در اين مثال با نحوه ايجاد يك درخواست HTTP غيرهمزمان توسط شی XMLHttpRequest به صفحه ديگر موجود بر روی سرويس دهنده آشنا شديم . پس از اتمام درخواست ، كاربران صفحه نهائی را كه محتويات عناصر رابط كاربر موجود در آن (يك span ) به صورت پويا بهنگام شده اند ، مشاهده خواهند كرد .
خلاصه
در اين مقاله با برنامه نويسی وب همزمان و غيرهمزمان و نحوه عملكرد شی XMLHttpRequest آشنا شديم . هدف از بيان موارد فوق ، صرفا" آشنائی با الگوی برنامه نويسی وب مبتنی بر Ajax بود . تمامی داستان به اين نقطه ختم نمی شود و در مقالات آتی به ساير پتانسيل های Ajax به منظور پياده سازی برنامه های وب اشاره خواهيم كرد .

[Admin]

Ajax : تحولی بزرگ در عرصه وب ( بخش پنجم )

پس از آشنائی با اصول اوليه Ajax در طی چهار مقاله ، پياده كنندگانی كه علاقه مند به استفاده از اين فناوری در برنامه های وب می باشند اين پرسش را مطرح می نمايند كه آيا برای استفاده از پتانسيل های Ajax می بايست از يك فريمورك و يا toolkit خاص استفاده كرد ؟ در ادامه ضمن پاسخ به اين سوال ، به بررسی معماری ASP.NET Ajax خواهيم پرداخت .
چرا به يك فريمورك Ajax نياز داريم ؟ بدون بهره گيری از پتانسيل های يك toolkit و يا يك فريمورك ، پياد ه سازی برنامه های مبتنی بر Ajax كار ساده ای نخواهد بود و پياده كنندگان با مسائل متعددی مواجه خواهند شد :



سازگاری بين مرورگرها : گذشته از پياده سازی نسخه های متعدد و مختلف از شی XMLHttpRequest ، هر مرورگر يك نسخه متفاوت از DOM را پياده سازی كرده است . به روز نگه داشتن تغييرات بين مرورگرها و مديريت تشخيص مرورگرها می تواند يك فرآينده مشكل و خسته كننده را برای پياده كنندگان به دنبال داشته باشد .يكی از اهداف مهم يك toolkit و يا فريمورك ، تفكيك پيچيدگی ها و تفاوت ها است تا پياده كنندگان بتوانند با بكارگيری مجموعه ای از امكانات رابط برنامه نويسی ( API ) ، عمليات مشابه و يكسانی را انجام دهند .
ضرورت درك عميق تر از جاوا اسكريپت : جاوا اسكريپت ذاتا" يك زبان پيچيده نيست ، گرچه ، تعداد زيادی از پياده كنندگان برنامه های وب اين عقيده را ندارند. جاوا اسكريپت ويژگی هائی نظير شی گراء و يا Type safe را كه بتواند انتظار برنامه نويسان را تامين نمايد ، ارائه نمی نمايد . مفاهيمی نظير توارث ، اينترفيس ها و رويدادها را می توان در جاوا اسكريپت شبيه سازی كرد ولی پياده سازی آنها برای پياده كنندگان كار مشكلی خواهد بود . اشكال زدائی و عدم حمايت از زبان های اسكريپت نويسی سمت سرويس گيرنده در محيط های IDE ( برگرفته شده از integrated development environments ) نيز به پيچيدگی كار می افزايد .

با توجه به موارد فوق ، توصيه می گردد در زمان پياده سازی برنامه های وب مبتنی بر Ajax از يك فريمورك و يا toolkit استفاده شود و پياده كنندگان خود را درگير برخی كارهای پيچيده و تكراری ننمايند .
ASP. NET Ajax يكی از فريمورك های ارائه شده در اين خصوص است كه در ادامه با معماری آن بيشتر آْشنا می شويم .
معماری فريمورك ASP. NET Ajax
فريمورك ASP. NET Ajax ، به پياده كنندگان اين امكان را می دهد كه بتوانند برنامه های وب قدرتمندتر ، با توان پاسخگوئی بيشتر و سازگار با مرورگرهای مختلف را ايجاد نمايند . در نگاه اول ممكن است اين گونه برداشت شود كه فريمورك يك كتابخانه Ajax است . با اين كه استنباط فوق درست است ولی تصويری واقعی از آنچه وجود دارد را در ذهن ايجاد نمی كند.
با بررسی معماری فريمورك فوق و آشنائی با نحوه عملكرد هر يك از عناصر موجود در اين ساختار ، با قابليت های فريمورك ASP. NET Ajax بيشتر خواهيم شد .
شكل 1 ، ساختار معماری فريمورك ASP. NET Ajax را نشان می دهد . اولين چيزی كه در شكل فوق مشهود است ، پوشش اين فريمورك در دو سمت سرويس گيرنده و سرويس دهنده است . علاوه بر مجموعه ای از كتابخانه های سمت سرويس گيرنده و عناصر ، با مجموعه ای از امكانات در سمت سرويس دهنده مواجه هستيم كه امكان بكارگيری آنها توسط كنترل های سرويس دهنده ASP. NET و سرويس ها وجود دارد .


http://www.srco.ir/Articles/images/introajax17.jpg

شكل 1 : ساختار معماری فريمورك ASP. NET Ajax
فريمورك سمت سرويس گيرنده
يكی از نكات جالب در ارتباط با فريمورك سمت سرويس گيرنده ، عدم وابستگی كتابخانه مركزی به عناصر سرويس دهنده است . از كتابخانه فوق می توان جهت پياده سازی برنامه های نوشته شده توسط PHP و يا ColdFusion و ساير زبان های برنامه نويسی و يا پلت فرم ها نيز استفاده كرد .
با توجه به انعطاف پذيری معماری فوق ،‌ می توان آن را بطور منطقی به دو بخش تقسيم كرد : فريمورك سرويس دهنده و فريمورك سرويس گيرنده تقسيم نمود .
آگاهی از نحوه عملكرد معماری فوق در سمت سرويس گيرنده ، برای پياده كنندگان سمت سرويس دهنده نيز ضروری است چراكه اين بخش آغازگر حيات يك صفحه وب می باشد .

Microsoft Ajax Library
در هسته فريمورك سمت سرويس دهنده Microsoft Ajax Library قرار دارد كه از آن با نام كتابخانه مركزی و يا هسته نام برده می شود .اين كتابخانه شامل مجموعه ای از فايل های جاوا اسكريپت است كه می توان از آنها صرفنظر از ويژگی های سرويس دهنده استفاده كرد . در ادامه به بررسی هر يك از اجزاء و يا لايه های كتابخانه فوق خواهيم پرداخت .
كار خود را با بررسی لايه Type system كه زيربنای تمامی لايه های ديگر است ، آغاز می نمائيم . ( در نسخه های قبلی ASP. NET Ajax با كد نام Atlas ، به كتابخانه مركزی Client Script Library گفته می شد ) .



Type System : هدف از لايه فوق ، معرفی مفاهيم برنامه نويسی شی گراء نظير كلاس ها ، توارث ، اينترفيس ها و event handling برای جاوا اسكريپت است . اين لايه همچنين نوع های موجود جاوا اسكريپت را توسعه می دهد . مثلا" نوع String و Array در جاوا اسكريپت توسعه يافته اند تا قابليت هائی مشابه را برای پياده كنندگان برنامه های وب ASP. NET ايجاد نمايند . type system اساس كار ساير اجزاء اين كتابخانه را فراهم می نمايد .

Component: در لايه بعدی كتابخانه مركزی ، لايه component قرار دارد كه بر روی زيرساخت type system ايجاد شده است . لايه فوق عمليات حياتی و مهمی را برای كتابخانه مركزی انجام می دهد . اين لايه امكانات حمايتی لازم برای سريال سازی JSON ( برگرفته شده از JavaScript Object Notation ) ، ارتباطات شبكه ای ، محلی سازی ، تعامل با DOM ( برگرفته شده از Document Object Model ) و سرويس هائی نظير تائيد و پروفايل را برای برنامه های ASP.NET ارائه می نمايد . اين لايه همچنين ، امكان توليد و ايجاد ماژول هائی با قابليت استفاده مجدد را كه می توان آنها را در گروه هائی به عنوان كنترل ها و رفتارها تقسيم نمود ، فراهم می نمايد .

Application : لايه فوق بالاترين لايه در كتابخانه مركزی است كه می توان برای آن از يك عنوان تشريحی و توصيفی بهتر استفاده كرد : Application model . همانند چرخه حيات يك صفحه در ASP.NET ، اين لايه يك مدل برنامه نويسی مبتنی بر رويداد را ارائه می نمايد كه شما می توانيد از آن به منظور كار با عناصر DOM ، عناصر نرم افزاری و چرخه حيات يك برنامه در مرورگر استفاده نمائيد .

HTML ، جاوا اسكريپت و اسكريپت XML
صفحات وب مبتنی بر Ajax در ASP. NET با استفاده از HTML ، جاوا اسكريپت و يك گرامر تعريفی مبتنی بر XML كه به آن XML script گفته می شود ، نوشته می گردند . بدين ترتيب پياده كنندگان دارای گزينه های متعددی برای نوشتن كد صفحات وب در سمت سرويس گيرنده می باشند . می توان كد را به صورت اخباری و با استفاده از XML Script و يا به صورت دستوری با جاوا اسكريپت پياده سازی كرد . عناصر تعريف شده در XML Script شامل يك تگ اسكريپت جديد به صورت زير می باشند .

<script type="text/xml-script">

مرورگر قادر به تشخيص تگ Script است ولی دارای يك مكانيزم برای پردازش نوع xml-script نمی باشد . در مقابل ، فايل های جاوا اسكريپت از فريمورك ASP.NET Ajax می توانند اسكريپت را تفسير و يك نمونه از عناصر و كنترل های موجود بر روی صفحه را ايجاد نمايند . كد زير ، نحوه استفاده از XML Script به منظور نمايش يك پيام پس از استقرار صفحه در حافظه مرورگر را نشان می دهد .

XML-Script : گزينه ای برای پياده سازی صفحات مبتنی بر Ajax

<script type="text/xml-script">
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
<components>
<application load="page_load" />
</components>
</page>
</script>
<script type="text/javascript">
function page_load(sender, e) {
alert("Hello from XML-Script!");
}
</script>
در مثال فوق ، يك تابع نوشته شده به زبان جاوا اسكريپت با نام Page_load به صورت تعريفی به رويداد Load در چرخه حيات صفحه نسبت داده شده است . با اجرای اين صفحه ، تابع Page_Load فراخوانده می شود تا يك پيام برای سرويس گيرنده نمايش داده شود .
شايد برای شما اين سوال مطرح شده باشد كه چرا در مقابل جاوا اسكريپت می بايست از XML Script استفاده كرد ؟ ( عكس اين سوال نيز می تواند مطرح شود ) . در پاسخ می توان به تمايل پياده كنندگان و توانمندی آنها اشاره كرد . برخی از پياده كنندگان ترجيح می دهند كه از يك زبان نشانه گذاری در مقابل اسكريپت استفاده نمايند . در مقابل تعداد ديگری از پياده كنندگان استفاده از زبان جاوا اسكريپت را در مقابل يك زبان نشانه گذاری ، ترجيح می دهند . به هر حال از دو رويكرد فوق می توان استفاده كرد و هر يك دارای مزايا و محدوديت های مختص به خود می باشند.
ASP.NET AJAX service proxies
فريمورك در سمت سرويس گيرنده قابليت فراخوانی سرويس های وب را از طريق جاوا اسكريپت و به كمك مجموعه ای از پروكسی های سمت سرويس گيرنده كه از طريق سرويس دهنده ايجاد شده اند ، فراهم می نمايد .پروكسی ها را می توان به منزله يك مرجع وب در كد مديريت يافته دات نت در نظر گرفت . يك پروكسی كلاسی است كه به عنوان يك اينترفيس برای آيتم ديگر عمل می نمايد . در اين حالت ، يك سرويس وب .
جمع بندی فريمورك سمت سرويس گيرنده
تا اين جا يك ديد كلی و اوليه نسبت به فريمورك سمت سرويس گيرنده پيدا كرديم . اجازه دهيد سفری داشته باشيم به سمت سرويس دهنده و ببينيم كه اين فريمورك در سمت سرويس دهنده چه حرفی برای گفتن دارد و از چه نوع معماری تبعيت می كند .
فريمورك در سمت سرويس دهنده
در بالاترين سطح ASP. NET 2.0 ، مجموعه ای از كنترل ها و سرويس های ارزشمند وجود دارد كه فريمورك دات نت را جهت حمايت از Ajax تحت تاثير قرار می دهد . اين لايه از فريمورك سرويس دهنده ، ASP.NET AJAX server extensions ناميده شده و مشتمل بر سه بخش مجزا است :



كنترل های سرويس دهنده Ajax
web services bridge
application services bridge

در ادامه هر يك از امكانات فوق را به اختصار توضيح می دهيم .
كنترل های سرويس دهنده Ajax
مجموعه ای جديد از كنترل های سرويس دهنده می باشند كه به جعبه ابزار ASP. NET اضافه می شوند . دو كنترل آنها شاخص تر از ساير كنترل ها می باشند . اولين كنترل ، ScriptManager است كه به عنوان مغز يك صفحه وب مبتنی بر Ajax تلقی می گردد . يكی از چندين مسئوليت كنترل فوق ، مديريت ناحيه ای از صفحه است كه در حين Postback غيرهمزمان می بايست بطور پويا بهنگام گردد.
دومين كنترل ، UpdatePanel است كه از آن به منظور تعريف ناحيه ای بر روی صفحه كه می بايست به صورت جزئی بهنگام گردد ، استفاده می شود . با تلفيق توانمندی دو كنترل اشاره شده وضعيت بخش رابط كاربر يك برنامه وب بطرز محسوسی بهبود خواهد يافت ( در واقع Postback سنتی جای خود را به Postback غيرهمزمان می دهد ) . پيامد بكارگيری كنترل های فوق ، بهنگام سازی نواحی خاص و مشخص شده ای بر روی صفحه ، در مقابل refresh تمامی صفحه است .
ساير عناصر server extension ، سرويس هائی را شامل می شوند كه به منزله يك پل ارتباطی بين سرويس گيرنده و سرويس دهنده رفتار می نمايند .
web services bridge
برنامه های وب عموما" ، محدود به منابع موجود بر روی سرويس دهنده محلی می باشند . گذشته از منابع خارجی اندكی نظير فايل های تصوير و CSS ، برنامه ها مجاز به دستيابی به منابع در حوزه برنامه سرويس گيرنده نمی باشند . به منظور غلبه بر اين موانع ، server extensions در فريمورك ASP. NET Ajax شامل يك web service bridge است كه يك gateway برای فراخوانی سرويس های وب از طريق اسكريپت های سمت سرويس گيرنده را فراهم می نمايد . تامين داده از سمت سرويس دهنده برای استفاده در سمت سرويس گيرنده يكی از موارد كاربرد اين فناوری است .
Application Service bridge
با توجه به ارتباط تنگاتنگ ASP. NET Ajax با ASP. NET ، دستيابی به برخی از سرويس های application نظير تائيديه و يا پروفايل را می توان به يك برنامه موجود اضافه نمود . اين ويژگی باعث می شود بتوان عملياتی نظير بررسی اطلاعات حساس يك كاربر و دستيابی به اطلاعات پروفايل را كه توسط اسكريپت های سمت سرويس گيرنده ارسال شده اند را انجام داد .
خلاصه
در اين مقاله ضمن اشاره به ضرورت استفاده از يك فريمورك در برنامه های وب مبتنی بر Ajax ، با عناصر موجود در سمت سرويس دهنده و سرويس گيرنده فريمورك ASP.NET AJAX آشنا شديم . در بخش بعد با نحوه تعامل اين عناصر در جهت تامين خواسته پياده كنندگان برنامه های وب مبتنی بر Ajax آشنا خواهيم شد . بدين منظور به بررسی دو سناريوی مختلف خواهيم پرداخت : مدل پياده سازی با محوريت سرويس گيرنده و مدل پياده سازی با محوريت سرويس دهنده .

[Admin]

Ajax : تحولی بزرگ در عرصه وب ( بخش ششم )

آنچه تاكنون گفته شده است :

بخش اول (http://www.srco.ir/Articles/DocView.asp?ID=554)
تاثير متقابل وب و نرم افزار بر يكديگر
بخش دوم (http://www.srco.ir/Articles/DocView.asp?ID=555) Ajax و فناوری های مرتبط با آن بخش سوم (http://www.srco.ir/Articles/DocView.asp?ID=556) بررسی نمونه برنامه های مبتنی بر Ajax بخش چهارم (http://www.srco.ir/Articles/DocView.asp?ID=558) برنامه نويسی غيرهمزمان در برنامه های وب بخش پنجم (http://www.srco.ir/Articles/DocView.asp?ID=559) بررسی معماری ASP. NET Ajax
در بخش پنجم (http://www.srco.ir/Articles/DocView.asp?ID=559) ضمن اشاره به ضرورت استفاده از يك فريمورك در برنامه های وب مبتنی بر Ajax ، با عناصر موجود در سمت سرويس دهنده و سرويس گيرنده فريمورك ASP.NET AJAX آشنا شديم . در این بخش با نحوه تعامل اين عناصر در جهت تامين خواسته پياده كنندگان برنامه های وب آشنا خواهيم شد . بدين منظور به بررسی دو سناريوی مختلف خواهيم پرداخت : مدل پياده سازی با محوريت سرويس گيرنده و مدل پياده سازی با محوريت سرويس دهنده .
طراحی انعطاف پذیر معماری ASP. NET Ajax ، دو رویکرد و یا مدل پیاده سازی مختلف را ارائه می نماید . به اولین سناریو که در سمت سرویس گیرنده پیاده سازی می گردد ، "مدل پیاده سازی با محوریت سرویس گیرنده" و به دومين رويكرد که مبتنی بر سرويس دهنده است ، "مدل پياده سازی با محوريت سرويس دهنده " گفته می شود .
قبل از هر چيز لازم است با نحوه عملکرد هر یک از مدل های فوق بیشتر آشنا شویم تا بتوانیم از هر یک در زمان مناسب استفاده کنیم .
مدل پياده سازی با محوريت سرويس گيرنده
در این مدل ، لايه Presentation متاثر از اسكريپت های سمت سرويس گيرنده با بکارگیری DHTML و جاوا اسکریپت است. این بدان معنی است که یک برنامه با هوشمندی و تعامل بیشتر ، از طریق سرویس دهنده برای سرویس گیرنده ارسال می گردد ( در زمان استقرار صفحه در حافظه برای مرتبه اول ) . پس از آن ، تعامل بین برنامه مرورگر و سرویس دهنده محدود به بازیابی داده مورد نیاز جهت بهنگام سازی صفحه است . در این مدل کاربران با برنامه تعامل زیادی خواهند داشت ( برنامه ای که در سمت سرویس گیرنده و در مرورگر کاربر اجراء شده است ) .
شکل 1 ، مدل پیاده سازی با محوریت سرویس گیرنده را نشان می دهد .

http://www.srco.ir/Articles/images/introajax18.jpg
شکل 1 : مدل پیاده سازی با محوریت سرویس گیرنده
مدل فوق برای برنامه هائی که اشتیاق زیادی به استفاده همه جانبه از ویژگی های DHTML دارند مناسب تر می باشد ( نظیر برنامه های mashup ). برنامه های mashup ، برنامه های وبی می باشند که محتویات خود را از بیش از یک منبع خارجی دریافت و آنها را با یک مکانیزم مطلوب در اختیار کاربران قرار می دهند . سایت Pageflakes.com یک نمونه در این رابطه است . این نوع سایت ها در تعامل مستمر با کاربر می باشند . با توجه به این که لازم است از یک طرف صفحه سبک و با کارائی مطلوب باشد و از طرف دیگر از منابع سمت سیستم بطور هوشمندانه استفاده گردد ، پیاده سازی این نوع برنامه ها با محوریت سرویس گیرنده ، یک گزینه مطلوب می باشد.
مدل پياده سازی با محوريت سرويس دهنده
در این مدل ، منطق برنامه و اكثر عناصر بخش رابط كاربر بر روی سرويس دهنده باقی می مانند . در ادامه ، تغییرات مورد نیاز رابط کاربر برای برنامه مرورگر ارسال می گردد ، در مقابل این که تغییرات از طریق اجرای اسکریپت های سمت سرویس گیرنده ایجاد شوند . رویکرد فوق ما را به یاد مدل سنتی صفحات ASP.NET می اندازد . مدلی که بر اساس آن ، سرویس دهنده بخش رابط کاربر را در هر مرتبه postback ایجاد و آن را برای مرورگر و به منظور تفسیر و نمایش یک صفحه جدید ارسال می نماید .
تفاوت مدل فوق با مدل سنتی صفحات ASP. NET در این است که صرفا" قسمت هائی از بخش رابط کاربر که می بایست تفسیر گردند برای برنامه مرورگر ارسال می شوند ( در مقابل تمام صفحه ) . مهمترین دستاورد رویکرد فوق ، بهبود محسوس میزان تعامل و تاخیر در برنامه های وب است .
شکل 2 ، ماهیت مدل پیاده سازی با محوریت سرویس دهنده را نشان می دهد .

http://www.srco.ir/Articles/images/introajax19.jpg
شكل 2 : مدل پیاده سازی با محوریت سرویس دهنده
رویکرد فوق برای بسیاری از پیاده کنندگان ASP. NET جالب است . چراکه در این مدل به پیاده کنندگان امکان نگهداری هسته رابط کاربر به همراه منطق برنامه بر روی سرویس دهنده داده می شود .عدم تاثیر پذیری این نوع برنامه ها از عملیاتی نظیر غیرفعال کردن جاوا اسکریپت در مرورگر ، باعث شده است که ادامه حیات و سرویس دهی آنها مستقل از پارامترهای تاثیرگذار در سمت سرویس گیرنده باشد .
در زمان کار با کنترل هائی نظیر GridView و Repeater در ASP. NET ، مدل فوق ساده ترین و مطمئن ترین روش را ارائه می نماید .
اهداف ASP. NET Ajax
پس از آشنائی اولیه با معماری و برخی از ويژگی های ASP. NET Ajax ، بد نیست به اهداف و دستاوردهای این فريمورك برای پیاده کنندگان برنامه های وب نیز اشاره ای داشته باشیم .


استفاده ساده ، فريموركی با كارآئی بالا : پیاده کنندگان برنامه های وب تمایل دارند که به سادگی و با صرف وقت اندک بتوانند از پتانسیل های Ajax در برنامه های خود استفاده نمایند . فریمورک ASP. NET Ajax با ارائه یک کتابخانه قدرتمند در سمت سرویس گیرنده و یک مجموعه از کنترل های سرویس دهنده این امکان را در اختیار پیاده کنندگان برنامه های وب قرار می دهد که بتوانند به سادگی از امکانات فوق در جهت تامین خواسته های خود ( برنامه های گذشته و برنامه های جدید ) استفاده نمایند .

یکپارچگی مدل برنامه نویسی سرویس دهنده : کنترل های سرویس دهنده ارائه شده به همراه فریمورک ASP. NET Ajax برای پیاده کنندگان برنامه های وب یک الگوی کاملا" شناخته شده می باشد . چراکه پیش از این پیاده کنندگان از کتترل های سرویس دهند متعددی در برنامه های وب ASP. NET استفاده کرده اند .

عناصر و ابزارهائی با کلاس جهانی : عناصر و ابزارهائی که بر روی فریمورک ایجاد شده اند ، نه تنها قابلیت و توانمندهای فریمورک را توسعه داده اند ، بلکه مجموعه ای از ابزارهای قدرتمند ( نظیر اشکال زدائی ، tracing و profiling ) را در اختیار جامعه بزرگ پیاده کنندگان قرار می دهد .

حمایت از پلت فرم های متعدد : حمايت در IE ، فايرفاكس ، Safari و ساير مرورگرها اين اطمينان را ايجاد می نمايد كه در زمان كار با مرورگرهای مختلف درگير مشكلات مربوطه نخواهيم شد .


سادگی ، قابليت توسعه ، ابزارهای قدرتمند و وجود هزاران پياده كننده از مشخصه های مثبت فریمورک ASP. NET Ajax محسوب می گردد.
خلاصه
تاکنون و در طی شش مقاله با مواردی نظیر شی XMLHttpRequest ، برخی الگوهای Ajax استفاده شده در زمان پیاده سازی برنامه های وب قدرتمند با توانائی ایجاد تعامل بیشتر ، معماری ASP.NET AJAX و سناریوهای مختلف پیاده سازی آشنا شدیم .
در بخش بعد با استناد به موارد فوق با نحوه استفاده از این فریمورک آشنا خواهیم شد و صفحاتی را ایجاد خواهیم کرد که در آنها از Ajax استفاده شده باشد.

[Admin]

Ajax : تحولی بزرگ در عرصه وب ( بخش هفتم )

تاکنون و در طی شش مقاله با مواردی نظیر شی XMLHttpRequest ، برخی الگوهای Ajax استفاده شده در زمان پیاده سازی برنامه های وب قدرتمند با توانائی ایجاد تعامل بیشتر ، معماری ASP.NET AJAX و سناریوهای مختلف پیاده سازی آشنا شدیم .
در این بخش با استناد به موارد فوق با نحوه استفاده از این فریمورک آشنا خواهیم شد و صفحات وب مبتنی بر Ajax را با تبعیت از مدل پیاده سازی با محوریت سرویس دهنده ایجاد خواهیم کرد .
مدل پیاده سازی با محوریت سرویس دهنده
همانگونه که در بخش ششم (http://www.srco.ir/Articles/DocView.asp?ID=561) اشاره گردید ، در این مدل ، منطق برنامه و اكثر عناصر بخش رابط كاربر بر روی سرويس دهنده باقی می مانند و در ادامه ، تغییرات مورد نیاز رابط کاربر برای برنامه مرورگر ارسال می گردد ( در مقابل این که تغییرات از طریق اجرای اسکریپت های سمت سرویس گیرنده ایجاد شوند) .
برای آشنائی عملی با مدل فوق ، در ادامه یک نمونه مثال ساده و در عین حال کاربردی را با یکدیگر دنبال می نمائیم .
مثال : ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس دهنده فریمورک ASP. NET Ajax
در این مثال می خواهیم تعداد مقالاتی را که بر روی سایت سخا روش و در هر یک از گروه های مختلف منتشر شده است ، به اطلاع ملاقات کنندگان سایت برسانیم .برای سادگی کار ، فرض می شود که تعداد مقالات منشتر شده بر روی سایت از طریق بانک اطلاعاتی بازیابی نخواهد شد و در مقابل از یک کلاس با نام Maghalat برای بازیابی تعداد مقالات منشتر شده در هر گروه استفاده خواهیم کرد . کلاس فوق دارای صرفا" یک متد با GetNumberOfMaghalat است که وظیفه آن برگرداندن تعداد مقالات منتشر شده در هر گروه است .
پس از آشنائی اولیه با صورت مسئله ، مراحل زیر را برای پیاده سازی یک صفحه وب مبتنی بر Ajax با محوریت سرویس دهنده ، دنبال می نمائیم .
مرحله اول : ایجاد سایت
اولین مرحله در پیاده سازی هر نوع برنامه وب مبتنی بر ASP. NET ، ایجاد وب سایت اولیه است . بدین منظور از برنامه ویژوال استودیو نسخه های 2005 و یا 2008 استفاده کرده ( و یا نسخه Visual Web Developer ) و برای وب سایت خود تمپلیت ASP.NET AJAX-Enabled Web Site را انتخاب می کنیم . بدین ترتیب ، یک وب سایت با قابلیت استفاده از اسمبلی ASP. NET AJAX ( با نام System.Web.Extensions.dll ) از طریق GAC ( برگرفته شده از Global Assembly Cache ) ایجاد می گردد . این کار همچنین باعث ایجاد یک فایل web.config پیچیده می گردد که شامل تنظیمات اضافه دیگر برای ارتباط با فریمورک ASP. NET AJAX است .
شکل 1 ، نحوه انتخاب تمپلیت ASP.NET AJAX-Enabled Web Site را در زمان ایجاد یک وب سایت نشان می دهد .

http://www.srco.ir/Articles/images/introajax20.jpg

شکل 1 : انتخاب تمپلیت ASP.NET AJAX-Enabled Web Site
در زمان ایجاد یک وب سایت
مرحله دوم : طراحی و پیاده سازی کلاس Maghalat
Maghalat یک کلاس ساده است که دارای صرفا" یک متد با نام GetNumberOfMaghalat است که گروه مقاله را به عنوان پارامتر ورودی گرفته و تعداد مقالات منشتر شده در آن گروه را برمی گرداند . بدین منظور از یک ساختار Select Case استفاده شده است تا بر اساس مقدار پارامتر ورودی ، یک عدد را بطور ایستا برگرداند ( برای سادگی کار نام گروه مقاله و تعداد آن مستقیما" در کد درج شده اند ) .
شکل 2 ، ساختار کلاس Maghalat را نشان می دهد .

http://www.srco.ir/Articles/images/introajax21.jpg
شکل 2 : ساختار کلاس Maghalat

کد زیر ، کلاس فوق به همراه متد مربوطه را نشان می دهد .


کلاس Maghalat.VB
Public Class Maghalat
Public Shared Function GetNumberOfMaghalat(ByVal ArticleGroup As String) As Integer
Dim Count As Integer = 0
Select Case ArticleGroup
Case "Software"
Count = 11
Case "Hardware"
Count = 12
Case "Security"
Count = 13
Case "Network"
Count = 14
Case "other"
Count = 15
End Select
GetNumberOfMaghalat = Count
End Function
End Class
مرحله سوم : ایجاد یک صفحه وب ASP.NET
در زمان ایجاد وب سایت ، بطور اتوماتیک یک صفحه Default.aspx نیز ایجاد می گردد . کد اولیه این صفحه به صورت زیر است .

<%@ Page Language="VB" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head runat="server">
<title>تست شماره یک /title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
</form>
</body>
</html>
تنها تفاوت صفحه فوق با سایر صفحات Default.aspx ایجاد شده توسط ویژوال استودیو ، اضافه شدن کنترل ScriptManager است . همانگونه که قبلا" اشاره گردید ، کنترل فوق به عنوان مغز متفکر یک صفحه مبتنی بر Ajax ایفای وظیفه می نماید . کنترل فوق ، مسئولیت توزیع کدهای سمت سرویس گیرنده برای مرورگر و مدیریت بهنگام سازی جزئی ( نه تمامی صفحه ) صفحه را برعهده دارد .
پس از ایجاد اولیه صفحه وب ، از کنترل های دیگری برای طراحی بخش رابط کاربر متناسب با خواسته های موجود استفاده می کنیم . در این مثال خاص از یک کنترل ListBox جهت نمایش گروه مقاله با قابلیت AutoPostBack و یک کنترل Label به منظور نمایش نتایج استفاده شده است .

<%@ Page Language="VB" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head runat="server">
<title>تست شماره یک </title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="text-align: center">
<table>
<tr>
<td colspan="3">
<strong>&nbsp;ایجاد یک صفحه وب مبتنی بر Ajax<br />
(( پیاده سازی با محوریت پتانسیل های سمت سرویس دهنده فریمورک ASP.NET Ajax )) </strong>
<br />
</td>
</tr>
<tr>
<td style="width: 150px">
لطفا" یک گروه مقاله را انتخاب نمائید
</td>
<td align="right" colspan="2" dir="rtl">
<asp:ListBox ID="ArticleGroup" runat="server" AutoPostBack="True" Font-Names="Tahoma"
Font-Size="Small" ForeColor="#C04000">
<asp:ListItem> نرم افزار </asp:ListItem>
<asp:ListItem> سخت افزار </asp:ListItem>
<asp:ListItem> امنیت اطلاعات </asp:ListItem>
<asp:ListItem> شبکه </asp:ListItem>
<asp:ListItem> سایر </asp:ListItem>
</asp:ListBox></td>
</tr>
<tr>
<td style="width: 150px"> </td>
<td style="width: 100px"> </td>
<td style="width: 131px"> </td>
</tr>
<tr>
<td colspan="3" style="height: 18px">
<asp:Label ID="LblFinalResult" runat="server" Font-Names="Tahoma" Font-Size="Small"
ForeColor="Black" Text="Label"></asp:Label></td>
</tr>
</table>
</span>
</div>
</form>
</body>
</html>
از ListBox برای نمایش لیست گروه مقالات استفاده شده است . مقدار خصلت AutoPostBack کنترل فوق ، True در نظر گرفته شده است تا بلافاصله پس از انتخاب یکی از آیتم های موجود در لیست ، یک PostBack به سمت سرویس دهنده تحقق یابد . این کار از طریق رویداد SelectedIndexChanged محقق خواهد شد که متعاقب آن روتین ArticleGroup_SelectedIndexChanged فراخوانده می شود . در انتهای صفحه از یک کنترل Label استفاده شده است تا به کمک آن بتوان نتایج را در خروجی نمایش داد .
از طریق کد نوشته شده در روتین ArticleGroup_SelectedIndexChanged ، انتخاب کاربر تشخیص و متد مربوط به کلاس maghalat صدا زده می شود تا پس از برگرداندن نتایج ، ماحصل کار از طریق کنترل Label نمایش داده شود .
کد روتین ArticleGroup_SelectedIndexChanged در جدول زیر نشان داده شده است .

Protected Sub ArticleGroup_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)

LblFinalResult.Text = Maghalat.GetNumberOfMaghalat(ArticleGroup.Selected Value)
LblFinalResult.Text += "&nbsp;&nbsp;&nbsp;"
LblFinalResult.Text += "مقاله تاکنون در گروه "
LblFinalResult.Text += "&nbsp;&nbsp;&nbsp;"
LblFinalResult.Text += ArticleGroup.SelectedValue
LblFinalResult.Text += "&nbsp;&nbsp;&nbsp;"
LblFinalResult.Text += "برروی سایت سخا روش منشتر شده است "

End Sub
مررحله چهارم : اجرای برنامه و بررسی نتایج
پس از اجرای برنامه فوق از طریق مرورگر و انتخاب یک گروه مقاله ، خروجی آن به صورت زیر نمایش داده می شود .

http://www.srco.ir/Articles/images/introajax022.jpg

شکل 3 : نمایش تعداد مقالات منتشر شده در هر گروه
عملکرد برنامه فوق متناسب با انتظار ما است : با انتخاب یک گروه مقاله ، تعداد مقالات منتشر شده در آن گروه در قسمت پائین صفحه نمایش داده می شود . تنها مسئله مهم و قابل توجه بازخوانی مجدد تمامی صفحه پس از هر مرتبه ای است که کاربر یک گروه مقاله را انتخاب می نماید . برای حل این موضوع می توان از کنترل جادوئی UpdatePanel استفاده کرد . شکل زیر نحوه استفاده از کنترل فوق در مثال اشاره شده را نشان می دهد .

...
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate >
<asp:ListBox ID="ArticleGroup" runat="server" AutoPostBack="True" Font-Names="Tahoma"
Font-Size="Small" ForeColor="#C04000">
<asp:ListItem> نرم افزار </asp:ListItem>
<asp:ListItem> سخت افزار </asp:ListItem>
<asp:ListItem> امنیت اطلاعات </asp:ListItem>
<asp:ListItem> شبکه </asp:ListItem>
<asp:ListItem> سایر </asp:ListItem>
</asp:ListBox></td>
</tr>
<tr>
<td style="width: 150px"> </td>
<td style="width: 100px"> </td>
<td style="width: 131px"> </td>
</tr>
<tr>
<td colspan="3" style="height: 18px">
<asp:Label ID="LblFinalResult" runat="server" Font-Names="Tahoma" Font-Size="Small"
ForeColor="Black" Text="Label"></asp:Label></td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
...
به صورت پیش فرض ، محتویات موجود بین تگ ContentTemplate مربوط به کنترل UpdatePanel در زمان بروز یک postback غیرهمزمان بطور اتوماتیک بهنگام خواهند شد. Postback فوق بطور غیرهمزمان اتفاق می افتد و رفتار آن با postback عادی متفاوت است . ( در postback عادی ، یک درخواست برای سرویس دهنده ارسال می گردد تا پس از انجام پردازش های ضروری در سمت سرویس دهنده ، رابط کاربر جدید برای مرورگر ارسال گردد ) .
و اما یک سوال مهم که ممکن است در ذهن شما مطرح شده باشد . یک postback غیرهمزمان چیست ؟ اکثر پیاده کنندگان برنامه های وب به کمک فناوری ASP.NET صرفا" با یک نوع postback آشنا می باشند . با بکارگیری UpdatePanel ، صفحه روال طبیعی حیات خود را طی می نماید ، ولی PostBack به عنوان یک postBack غیرهمزمان شناخته می شود . که در آن از روش های هوشمندانه تری استفاده می گردد و صفحه با مدلی متفاوت تر در حین چرخه حیات خود پردازش می گردد .
در ادامه ، همزمان با اجرای صفحه و انتخاب یک گروه مقاله ، بخش رابط کاربر بطور اتوماتیک و بدون نیاز به بازخوانی کامل صفحه بهنگام خواهد شد . بطور خلاصه ، با اضافه کردن یک مجموعه اندک از کنترل های سرویس دهنده بر روی صفحه ، از بازخوانی مجدد تمامی صفحه ممانعت بعمل آمده و همچنین در تعامل کاربر با برنامه وقفه ای ایجاد نخواهد شد .
مرحله پنجم : بهینه سازی خروجی و ضرورت استفاده از کنترل UpdateProgress
در صورتی که با یک خط سرعت پائین برنامه فوق اجراء گردد ، مشاهده خواهیم کرد که زمان نسبتا" زیادی بطول خواهد انجامید تا نتایج نمایش داده شود . این موضوع ( تاخیر محسوس در مشاهده خروجی کار ) باعث می شود کاربری که برنامه را اجراء کرده است ، نگران عملکرد صحیح برنامه باشد و اینگونه برداشت کند که برنامه دچار اختلال شده است .
قبل از معرفی Ajax ، برای صفحاتی که بازخوانی مجدد می گردیدند از علامتی استفاده می شد که کاربران متوجه این موضوع می شدند که فرآیندی در حال انجام است و یا درخواست آنان مورد پذیرش قرار گرفته شده است . هم اینک با توقف postback طبیعی ، کاربران متوجه این موضوع نمی شوند که عملیاتی در شرف انجام است تا این که فرآیند مورد نظر به اتمام برسد ( از علامتی برای نشان دادن این که فرآیندی در حال انجام است ، استفاده نمی شود ) . در چنین مواردی ، کاربران نیازمند یک فیدبک دیداری ( ویژوال ) هستند تا نسبت به انجام یک فرآیند در پس زمینه آگاه گردند .
کنترل UpdateProgress یک راه حل جهت مشکل فوق را ارائه می نماید . هدف کنترل فوق ، نشان دادن یک نشانه دیداری به کاربران در زمان بروز یک postback غیرهمزمان است . بدین منظور می توان کد زیر را به انتهای صفحه اضافه نمود .


<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate >
<img src=" images/ajax1.gif " /> در حال بارگذاری ...
</ProgressTemplate>
</asp:UpdateProgress>

پس از اجرای برنامه ( با لحاظ کردن کنترل UpdateProgress ) ، پس از انتخاب یک گروه مقاله توسط کاربر یک نشانه دیداری نمایش داده خواهد شد . شکل 4 ، خروجی برنامه را به همراه نشانه دیداری نشان می دهد .

http://www.srco.ir/Articles/images/introajax023.jpg

شکل 4 : ارائه یک نشانه دیداری در زمان تحقق یک postback غیرهمزمان
در صورت اجرای برنامه فوق بر روی ماشین محلی ، به احتمال فراوان فرآیند بهنگام سازی صفحه به سرعت انجام خواهد شد و عملکرد کنترل UpdateProgress مشاهده نخواهد شد . برای کاهش سرعت و مشاهده نشانه دیداری می توان سرعت آن را به صورت زیر کاهش داد .

Protected Sub ArticleGroup_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)

LblFinalResult.Text = Maghalat.GetNumberOfMaghalat(ArticleGroup.Selected Value)
LblFinalResult.Text += "&nbsp;&nbsp;&nbsp;"
LblFinalResult.Text += "مقاله تاکنون در گروه "
LblFinalResult.Text += "&nbsp;&nbsp;&nbsp;"
LblFinalResult.Text += ArticleGroup.SelectedValue
LblFinalResult.Text += "&nbsp;&nbsp;&nbsp;"
LblFinalResult.Text += "برروی سایت سخا روش منشتر شده است "
System.Threading.Thread.Sleep(2000) End Sub

توجه داشته باشید که نمی بایست از متد Sleep در کد تولید شده نهائی استفاده کرد . در مثال فوق با فرض این که برنامه بر روی یک ماشین محلی اجراء شده است و هدف مشاهده عملکرد کنترل UpdateProgress است ، از کنترل فوق استفاده شده است .
خلاصه
در این مقاله با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس دهنده فریمورک ASP. NET Ajax آشنا شدیم . بدین منظور یک نمونه مثال ساده را بررسی کردیم که در آن از کنترل های UpdatePanel و UpdateProgress به منظور نشان دادن قابلیت Ajax در صفحات ASP.NET استفاده شده بود .
در بخش بعد با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس گیرنده فریمورک ASP. NET Ajax ، آشنا خواهیم شد .

[Admin]

Ajax : تحولی بزرگ در عرصه وب ( بخش هشتم )

آنچه تاكنون گفته شده است :

بخش اول (http://www.srco.ir/Articles/DocView.asp?ID=554)
تاثير متقابل وب و نرم افزار بر يكديگر
بخش دوم (http://www.srco.ir/Articles/DocView.asp?ID=555) Ajax و فناوری های مرتبط با آن بخش سوم (http://www.srco.ir/Articles/DocView.asp?ID=556) بررسی نمونه برنامه های مبتنی بر Ajax بخش چهارم (http://www.srco.ir/Articles/DocView.asp?ID=558) برنامه نويسی غيرهمزمان در برنامه های وب بخش پنجم (http://www.srco.ir/Articles/DocView.asp?ID=559) بررسی معماری ASP. NET Ajax بخش ششم (http://www.srco.ir/Articles/DocView.asp?ID=561) بررسی مدل پياده سازی با محوريت سرويس گيرنده و مدل پياده سازی با محوريت سرويس دهنده . بخش هفتم (http://www.srco.ir/Articles/DocView.asp?ID=562) ایجاد صفحات وب مبتنی بر Ajax با تاکید بر روی پتانسيل های سمت سرویس دهنده فريمورک ASP.NET Ajax
در بخش هفتم (http://www.srco.ir/Articles/DocView.asp?ID=562) با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس دهنده فریمورک ASP. NET Ajax آشنا شدیم . بدین منظور یک نمونه مثال ساده را بررسی کردیم که در آن از کنترل های UpdatePanel و UpdateProgress به منظور نشان دادن قابلیت Ajax در صفحات ASP. NET استفاده شده بود .
در اين بخش با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس گیرنده فریمورک ASP. NET Ajax ، آشنا خواهیم شد .
مقدمه
رويکرد مبتنی بر سرویس دهنده در عین سادگی و شفافیت دارای چالش های مختص به خود با توجه به اصول اولیه تعریف شده در خصوص برنامه های مبتنی بر Ajax است . پياده سازی نرم افزارهای مبتنی بر Ajax زمانی که فرصت و یا بهتر بگوئیم شرایط اجرای اکثر ماژول های برنامه در مرورگر ( در مقابل سرویس دهنده ) فراهم گردد ، نتایج بمراتب موثرتری را به دنبال خواهند داشت .
فراموش نکنيم یکی از مهمترین اصول برنامه های Ajax ، عرضه هوشمندانه تر برنامه ها توسط مرورگر می باشد و به همین دلیل است که نقش سرویس دهنده به ارسال داده مورد نیاز جهت بهنگام سازی بخش رابط کاربر محدود شده است . بدیهی است تفکر فوق و تحقق عملی آن در زمان طراحی و پیاده سازی اینگونه برنامه ها ، کاهش محسوس مبادله داده بين سرویس دهنده و مرورگر را به دنبال خواهد داشت .
مدل پياده سازی با محوريت سرويس گيرنده
همانگونه که در بخش ششم (http://www.srco.ir/Articles/DocView.asp?ID=561) اشاره گردید ، در این مدل ، لايه Presentation متاثر از اسكريپت های سمت سرويس گيرنده با بکارگیری DHTML و جاوا اسکریپت می گردد. این بدان معنی است که یک برنامه با هوشمندی و تعامل بیشتر ، از طریق سرویس دهنده برای سرویس گیرنده ارسال می گردد ( در زمان استقرار صفحه در حافظه برای مرتبه اول ) . پس از آن ، تعامل بین برنامه مرورگر و سرویس دهنده محدود به بازیابی داده مورد نیاز جهت بهنگام سازی صفحه است . در این مدل کاربران با برنامه تعامل زیادی خواهند داشت ( برنامه ای که در سمت سرویس گیرنده و در مرورگر کاربر اجراء شده است ) .
برای آشنائی عملی با مدل فوق ، در ادامه یک نمونه مثال ساده و در عین حال کاربردی را بررسی خواهيم کرد. در اين مثال با فراخوانی یک سرویس وب از طریق کد سمت سرویس گيرنده ، داده مورد نياز جهت بهنگام سازی بخش رابط کاربر از سرويس دهنده دريافت خواهد شد .
قبل از تشريح مثال فوق ، بد نیست در ابتدا با برخی از مفاهيم کليدی و مهم در رابطه با بکارگيری سرویس های وب از طریق کد سمت سرویس گيرنده در برنامه های وب مبتنی بر Ajax آشنا شويم .
دستيابی به سرویس های وب از طریق کد سمت سرویس گيرنده
ASP. NET Ajax روش های متعددی را به منظور فراخوانی سرويس های وب ارائه می نمايد . جاوا اسکريپت ، XML Script و AutoCompleteExtender نمونه هائی در این زمينه می باشند . با استفاده از امکانات ارائه شده در فريمورک فوق ، پياده کنندگان می توانند سرویس های وب را ( فايل هائی با انشعاب asmx . ) از طریق مرورگر و به کمک کدهای سمت سرویس گيرنده فراخوانده و از پتانسیل های آنها در برنامه های وب با هدف بهبود بخش رابط کاربر استفاده نمایند .
در چنين مواردی ، یک صفحه می تواند متدهای سمت سرویس دهنده را بدون انجام postback و نیاز به بازخوانی تمامی صفحه فراخوانده و از آنها استفاده نماید ، چراکه صرفا" داده بين مرورگر و سرويس دهنده وب مبادله خواهد شد .
بکارگيری کلاس های پراکسی جاوا اسکريپت یکی از روش های فریمورک ASP.NET Ajax برای فراخوانی سرویس های وب است .بدین ترتيب می توان یک متد از سرویس وب موجود در سمت سرویس دهنده را با فراخوانی متد کلاس پراکسی جاوا اسکريپت مرتبط با آن فراخواند .
ASP. NET Ajax ، همچنين امکانات لازم برای جاوا اسکريپت به منظور فراخوانی سرویس هائی نظیر پروفايل و membership را ارائه می نماید .
در مثالی که در ادامه بررسی خواهیم کرد ، از طریق جاوا اسکريپت در سمت سرویس گيرنده ، متد مورد نياز سرویس وب در سمت سرویس دهنده صدا زده می شود .
آشنائی با پراکسی های ASP.NET AJAX Web Service
کد پراکسی دارای یک نقش مهم و حياتی در ارسال و دريافت پيام از سرویس های وب است . فراخوانی یک سرویس وب با استفاده از پراکسی سمت سرویس گیرنده يکی از ويژگی های مهم فريمورک ASP. NET Ajax در سمت سرویس گيرنده است . در دات نت ، با استفاده از wsdl.exe و يا بکارگيری گزينه Add Web Reference در ويژوال استوديو ، امکان ايجاد پراکسی فراهم می گردد . پراکسی های ASP. NET Ajax با روش های فوق توليد نخواهند شد و برای ایجاد آنها می بایست از خصلت Service کنترل ScriptManager استفاده کرد .

فعال کردن قابليت فراخوانی سرویس های وب به کمک جاوا اسکريپت
برای فراخوانی سرويس های وب از طریق اسکريپت می بايست پيکربندی لازم را به کمک فایل web.config انجام داد . بدين منظور لازم است ScriptHandlerFactory HTTP handler را از طریق فایل web.config ، ريجستر کرد تا قادر به پردازش درخواست هائی باشد که از سمت سرویس گیرنده و به کمک اسکریپت ها قصد استفاده از سرویس های وب را دارند. در مواردی که فراخوانی یک سرویس وب توسط ASP.NET Ajax صورت نمی پذیرد ، درخواست مربوطه به هندلر پیش فرض ارجاع داده می شود.
کد زیر ، يک نمونه فایل web.config به همراه handler مربوطه را نشان می دهد .

<system.web>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory" validate="false"/>
</httpHandlers>
<system.web>

توجه داشته باشید در زمان ایجاد یک وب سایت مبتنی بر Ajax در ويژوال استوديو نسخه های 2005 و یا 2008 ، تنظیمات فوق بطور اتوماتیک در فایل web.config اعمال خواهد شد .
پس از اعمال تغييرات فوق ، برای فعال کردن قابلیت فراخوانی یک سرویس وب از طریق اسکريپت در يک صفحه ASP.NET ، مراحل زیر را می بایست انجام داد :


مرحله اول : اضافه کردن کنترل ScriptManager بر روی صفحه

مرحله دوم : اضافه کردن یک مرجع به سرویس وب توسط عنصر asp:ServiceReference و تنظيم خصلت path آن به گونه ای که به سرویس وب اشاره نماید . شی ServiceReference به ASP.NET Ajax اعلام می نماید که یک کلاس پراکسی جاوا اسکريپت را برای فراخوانی سرویس وب مورد نظر توسط اسکريپت ، توليد نماید .


کد زیر ، نحوه فراخوانی یک سرویس وب با نام Test.asmx توسط اسکريپت را نشان می دهد .

<asp:ScriptManager runat="server" ID="scriptManager">
<Services>
<asp:ServiceReference path="~/WebServices/Test.asmx" />
</Services>
</asp:ScriptManager>

در زمان تفسير صفحه ای که شامل عنصر <asp:ScriptManager> می باشد ، یک کلاس پراکسی جاوا اسکريپت برای سرویس وب Test.asmx ایجاد می گردد . کلاس پراکسی ، دارای متدهای مرتبط با هر یک از متدهای موجود در سرویس وب Test.asmx می باشد . صفحه همچنين شامل کلاس های پراکسی جاوا اسکريپت مرتبط با نوع های داده سرویس دهنده است که به عنوان پارامتر ورودی و یا مقادیر برگردانده شده توسط متدهای سرویس وب مورد استفاده قرار می گیرد . بدین ترتیب ، اسکریپت قادر به مقداردهی اولیه پارامترها و برگرداندن مقادیر خواهد بود .
پس از این مقدمه نسبتا" طولانی و شاید هم خسته کننده ! ولی ضروری ، اجازه دهید در ادامه به منظور آشنائی با قابلیت های فريمورک ASP.NET Ajax در سمت سرویس گیرنده ، یک نمونه مثال کاربردی را با یکدیگر دنبال نمائیم .
مثال : ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس گيرنده
در این مثال می خواهیم تعداد مقالاتی را که بر روی سایت سخا روش و در هر یک از گروه های مختلف منتشر شده است ، به اطلاع ملاقات کنندگان سایت برسانیم .برای سادگی کار ، فرض می شود که تعداد مقالات منشتر شده بر روی سایت از طریق بانک اطلاعاتی بازیابی نخواهد شد و در مقابل از یک کلاس با نام Maghalat برای بازیابی تعداد مقالات منشتر شده در هر گروه استفاده خواهیم کرد . کلاس فوق دارای صرفا" یک متد با GetNumberOfMaghalat است که وظیفه آن برگرداندن تعداد مقالات منتشر شده در هر گروه است . برای دستیابی به خدمات این متد از یک سرویس وب با نام MaghalatService.asmx استفاده خواهیم کرد که از طریق کد سمت سرویس گیرنده فعال خواهد شد .
پس از آشنائی اولیه با صورت مسئله ، مراحل زیر را برای پیاده سازی یک صفحه وب مبتنی بر Ajax با محوریت سرویس گيرنده ، دنبال می نمائیم .
مراحل اول ( ایجاد سایت ) و دوم ( طراحی و پیاده سازی کلاس Maghalat ) همانند مثال ارائه شده در بخش هفتم (http://www.srco.ir/Articles/DocView.asp?ID=562) است .
مرحله سوم : تعریف یک سرویس وب
برای جستجو و یافتن تعداد مقالات منتشر شده در هر گروه از یک سرویس وب با نام MaghalatService.asmx استفاده خواهیم کرد که متد GetNumberOfMaghalat کلاس Maghlat را فرامی خواند . کد سرویس وب فوق در جدول زیر نشان داده شده است .


<%@ WebService Language="VB" Class="MaghalatService" %>
Imports System
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services

<ScriptService()> _
Public Class MaghalatService
Inherits System.Web.Services.WebService
<ScriptMethod()> _
<WebMethod()> _
Public Function GetNumberOfMaghalat(ByVal articleGroup As String) As Integer
System.Threading.Thread.Sleep(1000)
Return Maghalat.GetNumberOfMaghalat(articleGroup)
End Function
End Class

توضيحات :


namespace با نام System.Web.Script.Services بخشی از هسته فريمورک ASP.NET Ajax است که برخی از عملیات مبادله داده در شبکه و اسکريپت نويسی را کپسوله می نماید .

از دو خصلت جديد ScriptService و ScriptMethod در زمان تعريف متد و کلاس سرویس وب استفاده شده است . با استفاده از خصلت های فوق ، فريمورک ASP.NET Ajax تشخیص می دهد که کدام بخش از سرویس ها توسط پراکسی های جاوا اسکریپت بکار گرفته شده است . وجود خصلت ScriptMethod ضروری نیست ولی با استفاده از آن می توان برخی تنظيمات متد را انجام داد .

پرداختن به این موضوع که پراکسی چه چيزهائی را تولید می نماید ، خارج از حوصله این مقاله است. با نگاهی به انتهای پراکسی تعريف شده در سرویس وب فوق ،در انتها با متد GetNumberOfMaghalat مواجه می شویم . متد فوق به اسکريپت سمت سرویس گيرنده مکانيزمی را ارائه می نماید که بتواند متدهای وب موجود در سرویس وب را استفاده نماید . در زمان فراخوانی سرویس وب از مجموعه پارامترهای بمراتب بیشتری استفاده خواهد شد که پياده کنندگان آنها را در سرویس وب تعریف نکرده اند .

در صورت مشاده فایل ASMX در مرورگر به همراه سوئيچ js/ ، پراکسی جاوا اسکريپت توليد شده توسط فريمورک برای سرویس فوق نشان داده می شود .



var MaghalatService=function() {
MaghalatService.initializeBase(this);
this._timeout = 0;
this._userContext = null;
this._succeeded = null;
this._failed = null;
}
MaghalatService.prototype={
_get_path:function() {
var p = this.get_path();
if (p) return p;
else return MaghalatService._staticInstance.get_path();},
GetNumberOfMaghalat:function(articleGroup,succeede dCallback, failedCallback, userContext) {
return this._invoke(this._get_path(), 'GetNumberOfMaghalat',false,{articleGroup:articleG roup},succeededCallback,failedCallback,userContext ); }}
MaghalatService.registerClass('MaghalatService',Sy s.Net.WebServiceProxy);
MaghalatService._staticInstance = new MaghalatService();
MaghalatService.set_path = function(value) { MaghalatService._staticInstance.set_path(value); }
MaghalatService.get_path = function() { return MaghalatService._staticInstance.get_path(); }
MaghalatService.set_timeout = function(value) { MaghalatService._staticInstance.set_timeout(value) ; }
MaghalatService.get_timeout = function() { return MaghalatService._staticInstance.get_timeout(); }
MaghalatService.set_defaultUserContext = function(value) { MaghalatService._staticInstance.set_defaultUserCon text(value); }
MaghalatService.get_defaultUserContext = function() { return MaghalatService._staticInstance.get_defaultUserCon text(); }
MaghalatService.set_defaultSucceededCallback = function(value) { MaghalatService._staticInstance.set_defaultSucceed edCallback(value); }
MaghalatService.get_defaultSucceededCallback = function() { return MaghalatService._staticInstance.get_defaultSucceed edCallback(); }
MaghalatService.set_defaultFailedCallback = function(value) { MaghalatService._staticInstance.set_defaultFailedC allback(value); }
MaghalatService.get_defaultFailedCallback = function() { return MaghalatService._staticInstance.get_defaultFailedC allback(); }
MaghalatService.set_path("/Ajax1/MaghalatService.asmx");
MaghalatService.GetNumberOfMaghalat= function(articleGroup,onSuccess,onFailed,userConte xt) {MaghalatService._staticInstance
مرحله چهارم : ایجاد یک صفحه ASP.NET
در ادامه یک صفحه aspx . را به منظور استفاده از امکانات ارائه شده در سرویس فوق ایجاد می نمائیم . در اولین گام می بایست قابلیت استفاده از Ajax در صفحه فعال گردد . بدین منظور از کنترل ScriptManager استفاده خواهیم کرد . در ادامه ، یک مرجع به سرویس وب توسط عنصر asp:ServiceReference اضافه کرده و مقدار خصلت path آن را MaghalatService.asmx در نظر می گیریم .

<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="MaghalatService.asmx" />
</Services>
</asp:ScriptManager>
در بخش ويژوال صفحه ASP.NET از عناصر سرویس دهنده استفاده نشده است و صرفا" از عناصر HTML که امکان دستیابی به آنها از طریق کدهای سمت سرویس گیرنده وجود دارد ، استفاده شده است .


<div align="center">
<span style="font-size: 10pt; font-family: Tahoma">
<strong dir="rtl" style="text-align: center">ایجاد یک صفحه وب مبتنی بر Ajax <br />
(( پیاده سازی با محوریت پتانسیل های سمت سرویس گيرنده فریمورک ASP.NET Ajax )) </strong>
<br />
</span>
<br />
<select id="ArticleGroup" size="5" style="font-size: 12pt; width: 146px; color: navy; font-family: Tahoma">
<option value="Software"> نرم افزار </option>
<option value="Hardware" >سخت افزار </option>
<option value="Security"> امنیت اطلاعات </option>
<option value="Network"> شبکه </option>
<option value="others">سایر </option>
</select>
</div>
<br/>
<div align="center" style ="font-family :Tahoma ; font-size :small ">
<span id="maghalatResults"></span>
<span id="loading" style="display:none;">
<img src="images/ajax1.gif" alt="" />
&nbsp;&nbsp; در حال بارگذاری...
</span>
</div>

با توجه به اين که برای ایجاد بخش رابط کاربر به امکانات موجود در سمت سرویس دهنده نیاز نمی باشد ، صرفا" از عناصر HTML معمولی در مقابل کنترل های سرویس دهنده استفاده شده است . در صفحه فوق از عناصری نظیر Select ( جهت ارائه لیست گروه مقالات ) و Span ( جهت نمایش فيدبک دیداری به کاربر در زمان بازيابی داده از سرویس دهنده ) استفاده شده است .
برای دمیدن روح حيات در کالبد صفحه فوق از کد جاوا اسکریپت زير استفاده شده است .


<script type="text/javascript">
<!--
var articleGroup = null;
Sys.Application.add_load(page_load);
Sys.Application.add_unload(page_unload);

function page_load(sender, e){
articleGroup = $get("ArticleGroup");
$addHandler(articleGroup, "change", articleGroup_onchange);
}

function page_unload(sender, e){
$removeHandler(articleGroup, "change", articleGroup_onchange);
}

function articleGroup_onchange(sender, e){
$get("maghalatResults").innerHTML = "";
$get("loading").style.display = "block";
var selectedValue = articleGroup.value;
MaghalatService.GetNumberOfMaghalat(selectedValue, onSuccess);
}

function onSuccess(result){
$get("loading").style.display = "none";
$get("maghalatResults").innerHTML = " تعداد مقالات در گروه : " + result;
}
//-->
</script>

توضيحات :


با استفاده از دستورات ( Sys.Application.add_load(page_load و ( Sys.Application.add_unload(page_unload ، توابع مربوط به رویدادهای Load و Unload در مرورگر ريجستر شده است .

فريمورک سمت سرویس گیرنده یک چرخه حيات مشابه با چرخه حيات صفحات ASP.NET را ارائه می نماید . در چنين مواردی می توان از رویداد Load به عنوان فرصتی جهت ریجستر کردن یک handler به منظور کنترل هر گونه تغییرات در لیست مقالات استفاده کرد.
($addHandler(articleGroup, "change", articleGroup_onchange

از متد unload برای سلب مسئوليت از handler ريجستر شده استفاده شده است
($removeHandler(articleGroup, "change", articleGroup_onchange

در کد فوق به دستورات جديدی برخورد می کنیم که با علامت $ شروع شده اند . دستورات فوق ، اسامی مستعار و یا کوتاه شده ای می باشند که در نهایت به کد جاوا اسکريپت ترجمه خواهند شد . به عنوان نمونه، دستور $get همانند بکارگیری document.getElementById می باشد . یکی از مزایای این روش ، استقلال کدها از تفاوت های موجود بین مرورگرهای مختلف است .

در ادامه ، به هندلر ريجستر شده ای برخورد می کنیم که پس از هر مرتبه انتخاب يک گروه مقاله توسط کاربر ، صدا زده می شود . در چنين مواردی ، سرویس وب MaghalatService.asmx صدا زده شده تا تعداد مقالات منتشر شده در گروه مقالات انتخاب شده توسط کاربر را برگرداند . اولين پارامتر ، گروه مقاله انتخاب شده توسط کاربر است و دومين پارامتر نام تابع callback است که در صورت اجرای موفقيت آمیز متد مربوطه در سرویس وب ، فراخوانده می شود .
(MaghalatService.GetNumberOfMaghalat(selectedValue ,onSuccess

در نهایت ، به کمک نتايج برگردانده شده بخش رابط کاربر بطور پويا بهنگام خواهد شد .


خروجی برنامه فوق که مشابه خروجی ارائه شده در بخش هفتم (http://www.srco.ir/Articles/DocView.asp?ID=562) می باشد در شکل 1 نشان داده شده است .


http://www.srco.ir/Articles/images/introajax24.jpg
شکل 1 : نمایش تعداد مقالات منتشر شده در هر گروه
جمع بندی
به منظور آشنائی اولیه علاقه مندان با Ajax و تاثير آن در دنيای برنامه نویسی وب ، هشت مقاله بر روی سایت منتشر گردید . در مجموعه مقالات فوق ، پس از بررسی تاثیر متقابل نرم افزار بر وب و بالعکس ، Ajax را معرفی کردیم و این که از کجا آمده است و قصد آن پوشش چه مسائلی در عرصه برنامه های وب است . در ادامه با کنترل XMLHttpRequest آشنا شدیم و به ضرورت استفاده از یک فريمورک برای بکارگيری قابلیت های Ajax در برنامه های وب اشاره کرديم . در ادامه ، فريمورک ASP.NET Ajax را معرفی و با معماری آن آشنا شدیم . در نهايت به منظور آشنائی عملی با فريمورک فوق دو نمونه مثال کاربردی را با هدف آشنائی با پتانسیل های سمت سرویس دهنده و سرویس گيرنده بررسی کرديم .
هدف از ارائه مقالات فوق ، آشنائی اوليه با فريمورک ASP.NET Ajax بود . هم اينک علاقه مندانی که مطالب منتشر شده را مطالعه کرده اند دارای یک شناخت مناسب از فريمورک فوق بوده و می توانند از آن به عنوان یک زیرساخت علمی مناسب در ادامه راه خود استفاده نمایند .
قطعا" تمامی داستان به این نقطه ختم نخواهد شد و اميدواريم در آينده بتوانیم با انتشار مقالاتی دیگر با مزايای بکارگیری فریمورک فوق در برنامه های وب بطور کاملا" کاربردی آشنا شويم .


منبع مطالب: http://www.srco.ir