jQuery กับการเรียก ASP.net Web Service

ต่อเนื่องจากบทความที่แล้ว เราได้ใช้ ScriptManager ในการ add Service Reference เพื่อที่จะให้ VS ทำการสร้าง Proxy สำหรับเรียกใช้ Web Service ซึ่งก็สะดวกดีครับ แต่ทีนี้ตัว jquery เองมีความสามารถของ ajax มาด้วย เราจะมาลองเขียน jQuery สำหรับเรียก Web Service โดยตรง ไม่ต้องผ่าน ScriptManager ดูครับ

วิธีการก็ไม่ยาก แค่เราเรียกใช้ $.ajax(option) แค่นี้เอง ส่วน option นั้นเรากำหนดค่าในรูปแบบของ json ซึ่งมี member อะไรที่กำหนดได้บ้างนั้น ไปดูได้จาก document ของ jQuery ครับ ดังนั้นเราลอง comment โค้ดเดิมที่เรียก proxy ของ Web Service แล้วมาเขียนคำสั่งของ jQuery ดู

        function txtEmpName_OnKeyUp(e) {
            if (e.keyCode != 13 || e.keyCode != 9) {
                $("#txtEmpId").val("");
                var empName = $("#txtEmpName").val();
                if (empName.length > 2) {
                    //BAS.Web.Services.wsFiling.GetStaffsByKeyword(empName, GetStaffSuccess);
                    $.ajax({
                        type: "POST",
                        url: "../wsFiling.asmx/GetStaffsByKeyword",
                        data: "{keyWord:'" + empName + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(data) { GetStaffSuccess(data.d, "", "") }
                    });
                } else {
                    $("#divStaff").hide();
                }
            }       
        }

ก็ไม่ยากอย่างที่คิดครับ ตรง success เราก็ไปเรียก GetStaffSuccess function ตัวเดิมนั่นแหละ ส่วน error ผมไม่ได้ใส่ไว้เหมือนเดิม และในการใช้งานจริงก็ควรสร้าง OnError function ไว้ด้วยครับ

แต่โดยส่วนตัวขอใช้ผ่าน ScriptManager เหมือนเดิมครับ

Reference:
Using jQuery with ASP.NET Web Services and JSON, www.prettycode.org
Using jQuery to Consume ASP.NET JSON Web Services, www.encosia.com