ก่อนจะพูดถึงวิธีการเรียกใช้งานเมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิสแบบ 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หลักการเขียนเพื่อเรียกใช้เมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิส
ที่มาของภาพ :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 แสดงผล แต่ในที่นี้จะขอสร้างเป็นเพียงข้อมูลสมมุติของอาร์เรย์ที่เป็นข้อความขึ้นมาเท่านั้น
ผลลัพธ์
- ตัวอย่างที่ 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 ขึ้นมาเท่านั้น
ผลลัพธ์
- ตัวอย่างที่ 1 : การเรียกใช้งานเมธอดแบบส่งค่ากลับเป็น string แบบไม่มีการส่งค่าพารามิเตอร์
- การเรียกใช้เว็บเซอร์วิสตามแนวคิดของ 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 แสดงผล แต่ในที่นี้จะขอสร้างเป็นเพียงข้อมูลสมมุติของอาร์เรย์ที่เป็นข้อความขึ้นมาเท่านั้น
หมายเหตุ :
ผลลัพธ์
มาถึงตรงนี้ ผู้เขียนหวังเป็นอย่างยิ่งว่า เนื้อหาและตัวอย่างที่มีในบทความนี้ จะช่วยเพิ่มความเข้าใจในเบื้องต้นเกี่ยวกับการเรียกใช้งานเมธอดในฝั่งเซิร์ฟเวอร์/เว็บเซอร์วิสแบบ 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