مثال : ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس گیرنده

[B@RBOD]

در این مثال می خواهیم تعداد مقالاتی را که بر روی سایت
سخا روش و در هر یک از گروه های مختلف منتشر شده است ، به اطلاع ملاقات کنندگان
سایت برسانیم .برای سادگی کار ، فرض می شود که تعداد مقالات منشتر شده بر روی
سایت از طریق بانک اطلاعاتی بازیابی نخواهد شد و در مقابل از یک کلاس
با نام 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,succeede dCallback, failedCallback,
userContext) {
return this._invoke(this._get_path(),
‘GetNumberOfMaghalat’,false,{articleGroup:arti cleGroup},succeededCallback,failedCallback,userCon text);
}}
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_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
  
• در نهایت ، به کمک
  نتایج برگردانده شده بخش رابط کاربر بطور پویا بهنگام خواهد شد .
  

خروجی برنامه فوق که
مشابه خروجی ارائه شده در بخش
هفتم
می باشد در شکل ۱ نشان داده شده است .

شکل ۱ :
نمایش تعداد مقالات منتشر شده در هر گروه

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