تبلیغات
تبلیغات متنی
محبوبترینها
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
پروازهای مشهد به دبی چه زمانی ارزان می‌شوند؟
تجربه غذاهای فرانسوی در قلب پاریس بهترین رستوران‌ها و کافه‌ها
دلایل زنگ زدن فلزات و روش های جلوگیری از آن
خرید بلیط چارتر هواپیمایی ماهان _ ماهان گشت
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1835209629
Ajax؛ تحولی بزرگ در عرصه وب (7)
واضح آرشیو وب فارسی:راسخون:
Ajax؛ تحولی بزرگ در عرصه وب (7) آنچه تاكنون گفته شده است : بخش اول: تاثير متقابل وب و نرم افزار بر يكديگربخش دوم: Ajax و فناوری های مرتبط با آن بخش سوم: بررسی نمونه برنامه های مبتنی بر Ajaxبخش چهارم :برنامه نويسی غيرهمزمان در برنامه های وببخش پنجم: بررسی معماری ASP. NET Ajaxبخش ششم :بررسی مدل پياده سازی با محوريت سرويس گيرنده و مدل پياده سازی با محوريت سرويس دهنده .تاکنون و در طی شش مقاله با مواردی نظیر شی XMLHttpRequest ، برخی الگوهای Ajax استفاده شده در زمان پیاده سازی برنامه های وب قدرتمند با توانائی ایجاد تعامل بیشتر ، معماری ASP.NET AJAX و سناریوهای مختلف پیاده سازی آشنا شدیم . در این بخش با استناد به موارد فوق با نحوه استفاده از این فریمورک آشنا خواهیم شد و صفحات وب مبتنی بر Ajax را با تبعیت از مدل پیاده سازی با محوریت سرویس دهنده ایجاد خواهیم کرد .مدل پیاده سازی با محوریت سرویس دهنده همانگونه که در بخش ششم اشاره گردید ، در این مدل ، منطق برنامه و اكثر عناصر بخش رابط كاربر بر روی سرويس دهنده باقی می مانند و در ادامه ، تغییرات مورد نیاز رابط کاربر برای برنامه مرورگر ارسال می گردد ( در مقابل این که تغییرات از طریق اجرای اسکریپت های سمت سرویس گیرنده ایجاد شوند) .برای آشنائی عملی با مدل فوق ، در ادامه یک نمونه مثال ساده و در عین حال کاربردی را با یکدیگر دنبال می نمائیم . مثال : ایجاد یک صفحه مبتنی بر 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 را در زمان ایجاد یک وب سایت نشان می دهد .
.jpg)
شکل 1 : انتخاب تمپلیت ASP.NET AJAX-Enabled Web Site در زمان ایجاد یک وب سایتمرحله دوم : طراحی و پیاده سازی کلاس Maghalat Maghalat یک کلاس ساده است که دارای صرفا" یک متد با نام GetNumberOfMaghalat است که گروه مقاله را به عنوان پارامتر ورودی گرفته و تعداد مقالات منشتر شده در آن گروه را برمی گرداند . بدین منظور از یک ساختار Select Case استفاده شده است تا بر اساس مقدار پارامتر ورودی ، یک عدد را بطور ایستا برگرداند ( برای سادگی کار نام گروه مقاله و تعداد آن مستقیما" در کد درج شده اند ) . شکل 2 ، ساختار کلاس Maghalat را نشان می دهد .
.jpg)
شکل 2 : ساختار کلاس Maghalatکد زیر ، کلاس فوق به همراه متد مربوطه را نشان می دهد . کلاس Maghalat.VBPublic Class MaghalatPublic 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 = CountEnd FunctionEnd 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:ScriptManagerID="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> ایجاد یک صفحه وب مبتنی برAjax<br /> (( پیاده سازی با محوریتپتانسیل های سمت سرویس دهنده فریمورکASP.NET Ajax )) </strong> <br /> </td> </tr> <tr> <td style="width: 150px"> لطفا" یک گروه مقاله را انتخابنمائید </td> <td align="right" colspan="2" dir="rtl"> <asp:ListBoxID="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:LabelID="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.SelectedValue) LblFinalResult.Text += " " LblFinalResult.Text += "مقاله تاکنون در گروه" LblFinalResult.Text += " " LblFinalResult.Text += ArticleGroup.SelectedValue LblFinalResult.Text += " " LblFinalResult.Text += "برروی سایت سخا روش منشتر شده است" End Sub مررحله چهارم : اجرای برنامه و بررسی نتایج پس از اجرای برنامه فوق از طریق مرورگر و انتخاب یک گروه مقاله ، خروجی آن به صورت زیر نمایش داده می شود .
.jpg)
شکل 3 : نمایش تعداد مقالات منتشر شده در هر گروه عملکرد برنامه فوق متناسب با انتظار ما است : با انتخاب یک گروه مقاله ، تعداد مقالات منتشر شده در آن گروه در قسمت پائین صفحه نمایش داده می شود . تنها مسئله مهم و قابل توجه بازخوانی مجدد تمامی صفحه پس از هر مرتبه ای است که کاربر یک گروه مقاله را انتخاب می نماید . برای حل این موضوع می توان از کنترل جادوئی UpdatePanel استفاده کرد . شکل زیر نحوه استفاده از کنترل فوق در مثال اشاره شده را نشان می دهد . ......<asp:UpdatePanelID="UpdatePanel1"runat="server"> <ContentTemplate> <asp:ListBoxID="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:LabelID="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 ، خروجی برنامه را به همراه نشانه دیداری نشان می دهد .
.jpg)
شکل 4 : ارائه یک نشانه دیداری در زمان تحقق یک postback غیرهمزمان در صورت اجرای برنامه فوق بر روی ماشین محلی ، به احتمال فراوان فرآیند بهنگام سازی صفحه به سرعت انجام خواهد شد و عملکرد کنترل UpdateProgress مشاهده نخواهد شد . برای کاهش سرعت و مشاهده نشانه دیداری می توان سرعت آن را به صورت زیر کاهش داد .Protected Sub ArticleGroup_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) LblFinalResult.Text = Maghalat.GetNumberOfMaghalat(ArticleGroup.SelectedValue) LblFinalResult.Text += " " LblFinalResult.Text += "مقاله تاکنون در گروه" LblFinalResult.Text += " " LblFinalResult.Text += ArticleGroup.SelectedValue LblFinalResult.Text += " " LblFinalResult.Text += "برروی سایت سخا روش منشتر شده است" System.Threading.Thread.Sleep(2000)End Sub توجه داشته باشید که نمی بایست از متد Sleep در کد تولید شده نهائی استفاده کرد . در مثال فوق با فرض این که برنامه بر روی یک ماشین محلی اجراء شده است و هدف مشاهده عملکرد کنترل UpdateProgress است ، از کنترل فوق استفاده شده است . خلاصه در این مقاله با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس دهنده فریمورک ASP. NET Ajax آشنا شدیم . بدین منظور یک نمونه مثال ساده را بررسی کردیم که در آن از کنترل های UpdatePanel و UpdateProgress به منظور نشان دادن قابلیت Ajax در صفحات ASP.NET استفاده شده بود . در بخش بعد با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس گیرنده فریمورک ASP. NET Ajax ، آشنا خواهیم شد . منبع:http://www.srco.ir /س
این صفحه را در گوگل محبوب کنید
[ارسال شده از: راسخون]
[مشاهده در: www.rasekhoon.net]
[تعداد بازديد از اين مطلب: 430]
-
گوناگون
پربازدیدترینها