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

تبلیغات در سایت ما

شبکه و آنتی ویروس و نرم افزار و زبانهای برنامه نویسی

پشتيباني آنلاين
پشتيباني آنلاين
آمار
آمار مطالب
  • کل مطالب : 72
  • کل نظرات : 1
  • آمار کاربران
  • افراد آنلاین : 1
  • تعداد اعضا : 3
  • آمار بازدید
  • بازدید امروز : 307
  • بازدید دیروز : 47
  • ورودی امروز گوگل : 31
  • ورودی گوگل دیروز : 5
  • آي پي امروز : 102
  • آي پي ديروز : 16
  • بازدید هفته : 354
  • بازدید ماه : 527
  • بازدید سال : 8167
  • بازدید کلی : 335503
  • اطلاعات شما
  • آی پی : 3.15.206.105
  • مرورگر :
  • سیستم عامل :
  • امروز :
  • درباره ما
    شبکه و آنتی ویروس و نرم افزار و زبانهای برنامه نویسی
    به وبلاگ من خوش آمدید امیدوارم لحظات خوبی رو در این وب داشته باشین برای همکاری بیشتر می تونین به ایمیل بنده پیغام بدین
    خبرنامه
    براي اطلاع از آپدیت شدن سایت در خبرنامه سایت عضو شويد تا جديدترين مطالب به ايميل شما ارسال شود



    امکانات جانبی

    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  را در زمان ایجاد یک وب سایت نشان می دهد .

     انتخاب تمپلیت ASP.NET AJAX-Enabled Web Site

    شکل 1 : انتخاب تمپلیت ASP.NET AJAX-Enabled Web Site 
    در زمان ایجاد یک وب سایت

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


    شکل 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> ایجاد یک صفحه وب مبتنی بر 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.SelectedValue)
      LblFinalResult.Text +=
    "   "
     
    LblFinalResult.Text += "مقاله تاکنون در گروه "
     
    LblFinalResult.Text += "   "
     
    LblFinalResult.Text += ArticleGroup.SelectedValue
      LblFinalResult.Text +=
    "   "
     
    LblFinalResult.Text += "برروی سایت سخا روش منشتر شده است "
     

    End Sub

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

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

    شکل 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 ، خروجی برنامه را به همراه نشانه دیداری نشان می دهد .

    ارائه یک نشانه تصویری در زمان تحقق یک postback غیرهمزمان

    شکل 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 ، آشنا خواهیم شد .


    بخش نظرات این مطلب


    برای دیدن نظرات بیشتر روی شماره صفحات در زیر کلیک کنید

    نام
    آدرس ایمیل
    وب سایت/بلاگ
    :) :( ;) :D
    ;)) :X :? :P
    :* =(( :O };-
    :B /:) =DD :S
    -) :-(( :-| :-))
    نظر خصوصی

     کد را وارد نمایید:

    آپلود عکس دلخواه:







    تبلیغات
    نویسندگان
    ورود کاربران
    نام کاربری
    رمز عبور

    » رمز عبور را فراموش کردم ؟
    عضويت سريع
    نام کاربری
    رمز عبور
    تکرار رمز
    ایمیل
    کد تصویری
    تبادل لینک هوشمند

      تبادل لینک هوشمند
      برای تبادل لینک 

       ابتدا ما را با عنوان

      هاستینگ رایگان

      و آدرس

       http://www.iran2.net

      لینک نمایید سپس مشخصات

       لینک خود را در زیر نوشته

       . در صورت وجود لینک ما

      در سایت شما لینکتان

      به طور خودکار در سایت ما

      قرار میگیرد.






    آخرین نظرات کاربران
    Moohammad - سلام دوست گلم خوبی؟

    وبلاگت خیلی خوبه. به منم سر بزن خوشحال میشم نظر بدی

    تبادل لینک هم تو سایتم هست



    - 1393/9/15
    عنوان آگهی شما

    توضیحات آگهی در حدود 2 خط. ماهینه فقط 10 هزار تومان

    عنوان آگهی شما

    توضیحات آگهی در حدود 2 خط. ماهینه فقط 10 هزار تومان

    به شبکه و آنتی ویروس و نرم افزار و زبانهای برنامه نویسی امتیاز دهید