در بخش هفتم با نحوه ايجاد يک صفحه مبتني بر Ajax با تمرکز بر روي پتانسيل هاي سمت سرويس دهنده فريمورک ASP. NET Ajax آشنا شديم . بدين منظور يک نمونه مثال ساده را بررسي کرديم که در آن از کنترل هاي UpdatePanel و UpdateProgress به منظور نشان دادن قابليت Ajax در صفحات ASP. NET استفاده شده بود .
در اين بخش با نحوه ايجاد يک صفحه مبتني بر Ajax با تمرکز بر روي پتانسيل هاي سمت سرويس گيرنده فريمورک ASP. NET Ajax ، آشنا خواهيم شد .
مقدمه
رويکرد مبتني بر سرويس دهنده در عين سادگي و شفافيت داراي چالش هاي مختص به خود با توجه به اصول اوليه تعريف شده در خصوص برنامه هاي مبتني بر Ajax است . پياده سازي نرم افزارهاي مبتني بر Ajax زماني که فرصت و يا بهتر بگوئيم شرايط اجراي اکثر ماژول هاي برنامه در مرورگر ( در مقابل سرويس دهنده ) فراهم گردد ، نتايج بمراتب موثرتري را به دنبال خواهند داشت .
فراموش نکنيم يکي از مهمترين اصول برنامه هاي Ajax ، عرضه هوشمندانه تر برنامه ها توسط مرورگر مي باشد و به همين دليل است که نقش سرويس دهنده به ارسال داده مورد نياز جهت بهنگام سازي بخش رابط کاربر محدود شده است . بديهي است تفکر فوق و تحقق عملي آن در زمان طراحي و پياده سازي اينگونه برنامه ها ، کاهش محسوس مبادله داده بين سرويس دهنده و مرورگر را به دنبال خواهد داشت .
مدل پياده سازي با محوريت سرويس گيرنده
همانگونه که در بخش ششم اشاره گرديد ، در اين مدل ، لايه 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 ) همانند مثال ارائه شده در بخش هفتم است .
مرحله سوم : تعريف يک سرويس وب
براي جستجو و يافتن تعداد مقالات منتشر شده در هر گروه از يک سرويس وب با نام 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,succeededCallback, failedCallback, userContext) {
return this._invoke(this._get_path(), 'GetNumberOfMaghalat',false,{articleGroup:articleGroup},succeededCallback,failedCallback,userContext); }}
MaghalatService.registerClass('MaghalatService',Sys.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_defaultUserContext(value); }
MaghalatService.get_defaultUserContext = function() { return MaghalatService._staticInstance.get_defaultUserContext(); }
MaghalatService.set_defaultSucceededCallback = function(value) { MaghalatService._staticInstance.set_defaultSucceededCallback(value); }
MaghalatService.get_defaultSucceededCallback = function() { return MaghalatService._staticInstance.get_defaultSucceededCallback(); }
MaghalatService.set_defaultFailedCallback = function(value) { MaghalatService._staticInstance.set_defaultFailedCallback(value); }
MaghalatService.get_defaultFailedCallback = function() { return MaghalatService._staticInstance.get_defaultFailedCallback(); }
MaghalatService.set_path("/Ajax1/MaghalatService.asmx");
MaghalatService.GetNumberOfMaghalat= function(articleGroup,onSuccess,onFailed,userContext) {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="" />
در حال بارگذاري...
</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
-
در نهايت ، به کمک نتايج برگردانده شده بخش رابط کاربر بطور پويا بهنگام خواهد شد .
خروجي برنامه فوق که مشابه خروجي ارائه شده در بخش هفتم مي باشد در شکل 1 نشان داده شده است .
شکل 1 : نمايش تعداد مقالات منتشر شده در هر گروه
جمع بندي
به منظور آشنائي اوليه علاقه مندان با Ajax و تاثير آن در دنياي برنامه نويسي وب ، هشت مقاله بر روي سايت منتشر گرديد . در مجموعه مقالات فوق ، پس از بررسي تاثير متقابل نرم افزار بر وب و بالعکس ، Ajax را معرفي کرديم و اين که از کجا آمده است و قصد آن پوشش چه مسائلي در عرصه برنامه هاي وب است . در ادامه با کنترل XMLHttpRequest آشنا شديم و به ضرورت استفاده از يک فريمورک براي بکارگيري قابليت هاي Ajax در برنامه هاي وب اشاره کرديم . در ادامه ، فريمورک ASP.NET Ajax را معرفي و با معماري آن آشنا شديم . در نهايت به منظور آشنائي عملي با فريمورک فوق دو نمونه مثال کاربردي را با هدف آشنائي با پتانسيل هاي سمت سرويس دهنده و سرويس گيرنده بررسي کرديم .
هدف از ارائه مقالات فوق ، آشنائي اوليه با فريمورک ASP.NET Ajax بود . هم اينک علاقه منداني که مطالب منتشر شده را مطالعه کرده اند داراي يک شناخت مناسب از فريمورک فوق بوده و مي توانند از آن به عنوان يک زيرساخت علمي مناسب در ادامه راه خود استفاده نمايند .
قطعا" تمامي داستان به اين نقطه ختم نخواهد شد و اميدواريم در آينده بتوانيم با انتشار مقالاتي ديگر با مزاياي بکارگيري فريمورک فوق در برنامه هاي وب بطور کاملا" کاربردي آشنا شويم .
برگرفته از سايت سخا روش