การเรียกใช้งานเมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิสแบบ Ajax ด้วย jQuery (C#)

          ก่อนจะพูดถึงวิธีการเรียกใช้งานเมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิสแบบ Ajax ด้วย jQuery ผู้เขียนขอเกริ่นนำเกี่ยวกับที่มาที่ไปเกี่ยวกับแนวคิดแบบ Ajax เพื่อให้ผู้อ่านบางท่านที่ยังอาจงงๆได้ทำความเข้าใจเสียก่อน ว่าโดยปกติแล้วนั้น ในการพัฒนาเว็บไซต์(Web application)ของ ASP.NET จะประกอบด้วย 2 ส่วน คือ Client side และ Server side ซึ่งการทำงานในส่วนของ Client side จะหมายถึงส่วนของ browser หรือหน้าจอการทำงานของผู้ใช้ เช่น Google Chrome Firefox และ Internet explorer ส่วนในฝั่งเซิร์ฟเวอร์จะมีการรับคำร้องขอ(request) จากฝั่ง Client ทำการประมวลผลและส่งค่าผลลัพธ์คืนกลับมายังฝั่ง Client อีกครั้งเพื่อให้ผู้ใช้เห็นผลลัพธ์การตอบกลับนั้นได้ ซึ่งโดยปกติแล้วนั้นการพัฒนาจะประกอบด้วยโค้ด 2 ส่วน คือ

  • Server-side code ซึ่งเป็นเทคโนโลยีของการทำงานในการติดต่อไปยังฝั่งเซิร์ฟเวอร์ และถูกนำมาใช้ในการพัฒนา Web application ซึ่งใน ASP.NET นั้นนับว่าได้รับความนิยมเป็นอย่างมาก โดยจะมีการใช้งานผ่านทาง .NET Framework ในรูปแบบของภาษา C# VB หรือภาษาอื่นๆที่มีใน .NET ในการประมวลผลเพื่อติดต่อกับฐานข้อมูล หรือแหล่งข้อมูลอื่นๆจากคำร้องขอในฝั่ง Client และทำการส่งผลลัพธ์ที่ได้กลับมายังฝั่ง Client อีกครั้ง หลังจากมีการส่งผลลัพธ์ตอบกลับมาเรียบร้อยแล้วนั้น จะมีการ render หน้าจอดังกล่าวขึ้นอีกครั้งเพื่อแสดงผลลัพธ์ที่ได้ ทำให้เพจหรือหน้าจอที่ใช้งานมีการโหลดหรือ refresh เกิดขึ้น ซึ่งอาจส่งผลเสียทำให้ผู้ใช้รู้สึกล่าช้าในการรอการตอบกลับการประมวลผลพร้อมทั้งการแสดงผลจากฝั่งเซิร์ฟเวอร์ โดยโค้ดในลักษณะนี้ผู้พัฒนาบางท่านอาจรู้จักกันในนามของ code behind นั่นเอง
  • Client-side code อาจเรียกได้ว่าเป็น client-side script ที่ถูกฝังไว้ในฝั่ง client และมีการประมวลผลในส่วนของ Browser ของผู้ใช้ ซึ่งสคริปต์ที่นิยมใช้ในการพัฒนาโดยส่วนใหญ่จะเป็น JavaScript และโต้ตอบกลับมาโดยตรงด้วย element ที่มีใน HTML เช่น textbox ปุ่ม หรือตาราง เป็นต้น นอกจากนี้ยังมีการใช้งานของโค้ดภาษา HTML และ CSS(Cascading Style Sheets) ร่วมด้วย แต่การพัฒนาในส่วนนี้ต้องมีการคำนึงถึงภาษาและโค้ดที่รองรับในแต่ละ browser ของผู้ใช้ด้วย ซึ่งการพัฒนาด้วยโค้ดในส่วนนี้ จะทำให้การตอบโต้กับผู้ใช้งานเกิดขึ้นภายในเวลาอันสั้น เกิด overhead น้อย แต่ก็มีข้อเสียเกี่ยวกับการเลือกใช้ภาษาในการพัฒนาให้ครอบคลุมในความหลากหลายของ browser ที่ผู้ใช้ใช้งานในการเปิดเว็บไซต์ได้

Ajax (Asynchronous JavaScript and XML)
          เทคโนโลยีและแนวคิดแบบ Ajax ได้เข้ามามีบทบาทในการเปลี่ยนแปลงแนวคิดและหลักการทำงานโดยทั่วไปที่มีอยู่เดิมของ web application เล็กน้อย คือจะมีการส่งคำร้องขอจากฝั่ง Client ไปยังฝั่งเซิร์ฟเวอร์โดยตรงเพื่อตอบโต้กับ object ที่มีในฝั่งเซิร์ฟเวอร์ เช่น ฐานข้อมูล หรือไฟล์ เป็นต้น โดยปราศจากการ postback โดยแนวคิดของ Ajax จะเกี่ยวข้องกับเทคโนโลยีที่มีอยู่เดิม เช่น ข้อมูลในฝั่งเซิร์ฟเวอร์ เว็บเซอร์วิส และการเขียนสคริปต์ในฝั่ง client โดย client-side script จะใช้ในการเรียกใช้เว็บเซอร์วิสเพื่อประมวลผลกับฐานข้อมูลตามคำร้องขอ ซึ่งคำร้องขอดังกล่าวอาจเป็นการบันทึกหรืออ่านค่าข้อมูลจากฐานข้อมูล และการเรียกใช้แบบ Ajax นี้จะเป็นลักษณะ Asynchronous คือ เมื่อผู้ใช้มีการส่งคำร้องขอไปยังเว็บเซอร์วิส ในหน้าจอการทำงานจะไม่ถูกล็อคไว้ และสามารถทำงานในส่วนอื่นต่อได้โดยไม่จำเป็นต้องรอกระบวนการทำงานให้เสร็จทีละส่วน สามารถทำคู่ขนานกันไปได้ และหากส่วนใดเสร็จสิ้นการประมวลผลแล้วนั้นตัวเว็บเซอร์วิสก็จะส่งผลลัพธ์กลับมาให้แสดงยังฝั่งผู้ใช้เอง
          โดยเทคโนโลยีที่ถือว่ามีความสำคัญและจำเป็นสำหรับ client-side script นั่นก็คือ jQuery ที่เรารู้จักกันดี ซึ่งเป็นที่นิยม เนื่องจากประมวลผลได้เร็ว มีขนาดเล็ก และมีคุณสมบัติอีกหลายประการที่จะเข้ามาช่วยทำให้การพัฒนาโปรแกรมมีประสิทธิภาพมากยิ่ง
จากข้อความข้างต้น แสดงให้เห็นว่าการพัฒนาเว็บไซต์โดยหลีกเลี่ยงการ postback เมื่อมีการเรียกใช้งานไปยังฝั่งเซิร์ฟเวอร์ ถือเป็นอีกทางเลือกของนักพัฒนาที่จะหยิบมาใช้ เพื่อลด over head ให้กับตัว web server และสามารถตอบสนองต่อผู้ใช้ได้รวดเร็วขึ้น ลดจำนวนในการโหลดเพจ และรอการตอบสนองทุกครั้งที่มีการส่งคำร้องขอ ผู้เขียนจึงขอแนะนำวิธีการเรียกใช้หรือส่งคำร้องขอไปยังฝั่งเซิร์ฟเวอร์แบบ Ajax ด้วย jQuery ดังนี้

  • การเรียกใช้เมธอดในฝั่งเซิร์ฟเวอร์ตามแนวคิดของ Ajax ด้วย jQueryหลักการเขียนเพื่อเรียกใช้เมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิส
    CheckUserNameAvailability-2
    ที่มาของภาพ :http://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx
     

    • ตัวอย่างที่ 1 : การเรียกใช้งานเมธอดแบบส่งค่ากลับเป็น string แบบไม่มีการส่งค่าพารามิเตอร์
      ฝั่ง Client(aspx)
     function CallServerMethodString() {
                        $.ajax({
                            type: "POST", //ชนิดในการส่งค่า
                            contentType: "application/json",
                            ///ที่อยู่ของเมธอดที่ต้องการเรียก (ชื่อเพจ/ชื่อเมธอด)
                            url: "TestPageMethod.aspx/getDataRetString", 
                            dataType: "json", ///ส่งค่าแบบ json
                            beforeSend: function () {
                            ///  เป็นส่วนการแสดง loading progress bar ในขณะที่กำลังทำงานอยู่
                                $("#loadingmessage").show();
                            },
                           //////เป็นส่วนที่เกิดขึ้น เมื่อเกิดข้อผิดพลาดในการเรียกใช้เมธอด
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
                            },
                          //////เป็นส่วนที่เกิดขึ้น เมื่อการเรียกใช้เมธอดเสร็จสิ้นสมบูรณ์
                            success: function (response) {
    ///ล้างค่าข้อมูลใน div และนำผลลัพธ์ที่ได้จากการเรียกใช้(response.d) มาแสดงใน div ที่กำหนด
                                $("#dvResult").html("");
                                $("#dvResult").append(response.d);
    ///ซ่อน loading progress bar เมื่อเสร็จสิ้นการทำงาน
                                $("#loadingmessage").hide(); 
                            }
    
                        });
                    }
    

    ฝั่ง Server (c#)

     [System.Web.Services.WebMethod]
     public static string getDataRetString()
     {
         string Result = "";
         string[] digits = { "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" };
         var results = from p in digits
                          select p;
         foreach (var d in digits)
         {
             Result= Result+ "Result is :" + d.ToString() + "<br>";
         }
            return Result;
        }
     }
    

    คำอธิบาย : เป็นตัวอย่างการสร้างเมธอดในฝั่งเซิร์ฟเวอร์ โดยในการสร้างเมธอดต้องมีการกำหนด [System.Web.Services.WebMethod] ไว้ในส่วนบนของเมธอด และมีชนิดเป็น static โดยในส่วนนี้ตามความเป็นจริงจะเป็นส่วนที่อาจมีการดึงมาจากฐานข้อมูล เพื่อคืนค่ากลับไปให้ฝั่ง Client แสดงผล แต่ในที่นี้จะขอสร้างเป็นเพียงข้อมูลสมมุติของอาร์เรย์ที่เป็นข้อความขึ้นมาเท่านั้น

    ผลลัพธ์

    result1

    • ตัวอย่างที่ 2 : แบบส่งค่ากลับเป็น object โดยมีการส่งพารามิเตอร์มายังฝั่งเซิร์ฟเวอร์ด้วย
      ฝั่ง Client (aspx)
    <script type="text/javascript">
     function CallServerMethodObject() {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json",
                            url: "TestPageMethod.aspx/getDataRetObj",
             ///ส่งค่าพารามิเตอร์จากการเลือกประเภทสถานศึกษาให้กับเมธอดฝั่งเซิร์ฟเวอร์
                            data: "{'CategoryID' : " + ddlMain.val() + "}",
                            dataType: "json", ///ส่งค่าแบบ json
            /// เป็นส่วนการแสดง loading progress bar ในขณะที่กำลังทำงานอยู่
                            beforeSend: function () {
                                $("#loadingmessage").show();
                            }, 
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
                            },
            ///เป็นส่วนที่จะทำงานเมื่อมีการเรียกใช้เมธอดเสร็จสิ้นโดยไม่มีข้อผิดพลาดใดๆ
                            success: function (response) {
                ///ประกาศตัวแปรของคอนโทรล dropdownlist ที่ชื่อว่า ddlResult และล้างค่าข้อมูล
                                var ddlResult = $("[id*=ddlResult]");
                                ddlResult.empty().append('กรุณาเลือกชื่อสถานศึกษา');
                 ///วนรอบเพื่อดึงค่าจาก obj ที่ถูกส่งกลับมาเพื่อ populate ลงใน dropdownlist 
                               $.each(response.d, function (index, item) {
                           ddlResult.append($("").val(item.SubCategory).html(item.title));
                                });
                 ////ซ่อน loading progress bar เมื่อการทำงานสิ้นสุด
                              $("#loadingmessage").hide();
                            }
                        });
                    }
      </script>
     <asp:DropDownList ID="ddlMain" runat="server" onchange="CallServerMethodObject()" >
     <asp:ListItem Selected="True" Value="0">กรุณาเลือกประเภทสถานศึกษา</asp:ListItem>
     <asp:ListItem Value="1">มหาวิทยาลัย</asp:ListItem>
     <asp:ListItem Value="2">โรงเรียน</asp:ListItem>
     </asp:DropDownList>
     <asp:DropDownList ID="ddlResult" runat="server" >
    <asp:ListItem Value="0">กรุณาเลือกชื่อสถานศึกษา</asp:ListItem>
    </asp:DropDownList>
    

    คำอธิบาย : เป็นตัวอย่างการสร้าง Cascading dropdownlist อย่างง่าย โดยหากมีการเลือกประเภทสถานศึกษา จะมีการเรียกใช้ฟังก์ชั่น CallServerMethodObject() และส่งค่าที่เลือก(รหัสประเภทสถานศึกษา) ให้กับการเรียกใช้เมธอดในฝั่งเซิร์ฟเวอร์ในพารามิเตอร์ที่ชื่อว่า CategoryID เพื่อดึงค่าของชื่อสถานศึกษาตามประเภทที่เลือก

    ฝั่ง server (c#)

     [System.Web.Services.WebMethod]
        public static object getDataRetObj()
        {
    ///สมมุติให้ในส่วนนี้ เป็นการสร้างข้อมูลที่เป็น object และนำผลลัพธ์ที่ได้ส่งกลับไปยั่งฝั่ง Client เพื่อแสดงผล
      var obj = new { Category = 1, SubCategory=1, title = "มหาวิทยาลัยสงขลานครินทร์"};
      var objList = (new[] { obj }).ToList();
      objList.Add(new { Category = 1, SubCategory=2,  title = "มหาวิทยาลัยราชภัฎสงขลา" });
      objList.Add(new { Category = 2, SubCategory=3, title = "โรงเรียนมหาวชิราวุธ"});
      objList.Add(new { Category = 2, SubCategory=4, title = "โรงเรียนหาดใหญ่วิทยาลัย" });
    ////ดึงค่าชื่อสถานศึกษาตามรหัสประเภทสถานศึกษา CategoryID
            var results = from p in objList.Where(p=>p.Category==int.Parse(CategoryID))
                          select p;
    
            return results;
        }

    คำอธิบาย : เป็นตัวอย่างการสร้างเมธอดในฝั่งเซิร์ฟเวอร์ โดยในการสร้างเมธอดต้องมีการกำหนด [System.Web.Services.WebMethod] ไว้ในส่วนบนของเมธอด และมีชนิดเป็น static โดยในส่วนนี้ตามความเป็นจริงจะเป็นส่วนที่อาจมีการดึงมาจากฐานข้อมูลตามเงื่อนไขของพารามิเตอร์ที่ส่งมา เพื่อคืนค่ากลับไปให้ฝั่ง Client แสดงผล แต่ในที่นี้จะขอสร้างเป็นเพียงข้อมูลสมมุติของ object ขึ้นมาเท่านั้น

    ผลลัพธ์

    result3

  • การเรียกใช้เว็บเซอร์วิสตามแนวคิดของ Ajax ด้วย jQuery
    • ตัวอย่างที่ 1 : เป็นการเรียกใช้เมธอดจากเซอร์วิสในการแสดงผล

    ฝั่ง Client(aspx)

 <script type="text/javascript">
 function CallWebservice() {
                    var ddlMain = $("[id*=ddlMain]");

                    $.ajax({
                        type: "POST",
                        contentType: "application/json",
                        url: "WebServiceTest.asmx/getDataRetOddEven",
                        ///ส่งค่าพารามิเตอร์จากการเลือกประเภทชนิดข้อมูลตัวเลขให้กับเมธอดที่สร้างในเซอร์วิส
                        data: "{'CategoryID' : " + ddlMain.val() + "}",
                        dataType: "json",
                        beforeSend: function () {
                            $("#loadingmessage").show();
                        }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
                        },
                        success: function (response) {
                            $("#dvResult").html("");
                            $("#dvResult").append(response.d);
                            $("#loadingmessage").hide();
                        }

                    });
                }
 </script>
 <asp:DropDownList ID="ddlMain" runat="server" onchange="CallWebservice()" >
 <asp:ListItem Selected="True" Value="-1">กรุณาเลือกประเภทตัวเลข</asp:ListItem>
 <asp:ListItem Value="0">เลขคู่</asp:ListItem>
 <asp:ListItem Value="1">เลขคี่</asp:ListItem>
 </asp:DropDownList>

คำอธิบาย : เป็นตัวอย่างการเรียกใช้เมธอดจากเว็บเซอร์วิส เพื่อทำการดึงค่าข้อมูลตัวเลขตามประเภทของตัวเลขที่เลือกจาก dropdownlist ซึ่งในตัวอย่างนี้จะเป็นการเรียกใช้เมธอดที่มีชื่อว่า getDataRetOddEven ในเว็บเซอร์วิส WebServiceTest.asmx โดยลักษณะการเรียกใช้จะคล้ายกับตัวอย่างของการเรียกใช้เมธอดจากฝั่งเซิร์ฟเวอร์ที่กล่าวไว้แล้วก่อนหน้านี้ มีเพียงส่วนของการกำหนด url ที่เมธอดนั้นอยู่เท่านั้นที่ต้องให้มาอ้างจากเมธอดในเว็บเซอร์วิสแทน

ฝั่งเว็บเซอร์วิส (WebServiceTest.asmx)

 [WebMethod]
    public string getDataRetOddEven(string CategoryID)
    {
         string result = "";
         int[] numbers = { 0, 1, 2, 3,4, 5, 6, 7,8, 9 };

         var results = from p in numbers.Where(p => p % 2 == int.Parse(CategoryID))
                      select p;
         foreach (var d in results)
         {
             result = result + "Result is :" + d.ToString() + "
";
         }
         return result;
    }

คำอธิบาย : เป็นตัวอย่างการสร้างเมธอดในเว็บเซอร์วิสเพื่อรับค่าชนิดของตัวเลข(คู่/คี่) เพื่อนำมาใช้ในการดึงข้อมูลตามเงื่อนไข โดยในการสร้างเมธอดต้องมีการกำหนด [WebMethod] ไว้ในส่วนบนของเมธอด และมีเพิ่ม [System.Web.Script.Services.ScriptService] ในส่วนบนของไฟล์ เพื่อให้สามารถรันสคริปต์ผ่านเว็บเซอร์วิสได้ โดยในส่วนนี้ตามความเป็นจริงจะเป็นส่วนที่อาจมีการดึงมาจากฐานข้อมูล เพื่อคืนค่ากลับไปให้ฝั่ง Client แสดงผล แต่ในที่นี้จะขอสร้างเป็นเพียงข้อมูลสมมุติของอาร์เรย์ที่เป็นข้อความขึ้นมาเท่านั้น
หมายเหตุ : 

ผลลัพธ์

result4result5

เพิ่มเติม : 
Namespace ที่ต้องอ้างอิงเพิ่มเติมหากมีการใช้งานเกี่ยวกับ LINQ คือ using System.Linq;

          มาถึงตรงนี้ ผู้เขียนหวังเป็นอย่างยิ่งว่า เนื้อหาและตัวอย่างที่มีในบทความนี้ จะช่วยเพิ่มความเข้าใจในเบื้องต้นเกี่ยวกับการเรียกใช้งานเมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิสแบบ Ajax ด้วย jQuery เพื่อช่วยในการเพิ่มประสิทธิภาพทำงานของระบบที่พัฒนา และน่าจะช่วยให้การประมวลผลไปยังฝั่งเซิร์ฟเวอร์รวดเร็วขึ้น เกิดความพึงพอใจในการใช้งานของผู้ใช้มากยิ่งขึ้น อีกทั้งยังอาจเป็นอีกหนึ่งทางเลือกในการพัฒนาต่อยอดและประยุกต์ใช้ให้เหมาะกับงานของผู้พัฒนาแต่ละท่านได้ หากมีส่วนใดผิดพลาด ผู้เขียนขออภัยไว้ ณ ที่นี้ด้วย ขอบคุณค่ะ

แหล่งข้อมูลอ้างอิง :
http://www.seguetech.com/blog/2013/05/01/client-side-server-side-code-difference
http://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx

Leave a Reply