-
مدیر بازنشسته
مثال : ایجاد یک صفحه مبتنی بر 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,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=”"
/>
در حال بارگذاری…
</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 را معرفی و با
معماری آن آشنا شدیم . در نهایت به منظور آشنائی عملی با فریمورک فوق دو نمونه مثال
کاربردی را با هدف آشنائی با پتانسیل های سمت سرویس دهنده و سرویس گیرنده بررسی
کردیم .
کلمات کلیدی این موضوع
مجوز های ارسال و ویرایش
- شما نمیتوانید موضوع جدیدی ارسال کنید
- شما امکان ارسال پاسخ را ندارید
- شما نمیتوانید فایل پیوست کنید.
- شما نمیتوانید پست های خود را ویرایش کنید
-
مشاهده قوانین
انجمن