Asp.Net Ajax 2.0 調用WebService 中的方法

Asp.Net ajax 2.0 調用WebService 非常方便,很多細節都被封裝好了，可以和asp.net無縫串連起來。Asp.Net Ajax2.0調用WebServiece的步驟如下：

1、建立一個WebService

2、將這個WebService類加上[ScriptService]Attribute

3、給需要暴露的方法前加上[WebMethod]Attribute

4、在需要調用WebService的頁面添加

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="AjaxServices.asmx" />
    </Services>
</asp:ScriptManager>控制項，並在控制項中引用需要調用的webService名稱

5、寫簡單的js代碼，在調用Webservice的js方法中需要使用如下格式：

[NameSpace].[ClassName].[Method]

6、寫回呼函數，並在回呼函數中處理webservice方法返回的結果；

下面通過一個執行個體來說明Asp.net Ajax2.0如何調用WebService：

1、WebService中的代碼：

 

Code
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Collections.Generic;

namespace WebAppTest.Ajax
{
    /// <summary>
    /// AjaxServices 的摘要說明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]   
    [ScriptService]
    public class AjaxServices : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]        
        public List<RedStarNetLibModel.Pager.Employee> GetEmployee()
        {
            return WebAppTestBLL.EmployeesADO.Instance.GetEmployees();
        }
    }
}

 

這裡暴露了兩個方法我們只用後面的那個方法：

public List<RedStarNetLibModel.Pager.Employee> GetEmployee()此方法返回的是人員的一個泛型列表

2、在頁面上調用WebService的代碼：

 

Code
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

 <script language="javascript" type="text/javascript">
    $(function(){
        $("#btngetdata").click(GetEmployees);
    })
    function GetEmployees()
    {        
        WebAppTest.Ajax.AjaxServices.GetEmployee(onSecess,onError,onTimeout);
    }
    function onSecess(result)
    {
        var s=String.format("<table class=\"tblClass\" ><tr><th>EmployeeId</th><th>FirstName</th><th>LastName</th><th>BirthDate</th></tr>");
        for(var i=0;i<result.length;i++)
        {
            s+=String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td>",result[i].EmployeeID,result[i].FirstName,result[i].LastName,result[i].BirthDate);
        }
        s+="</table>"; 
        $("#emp").html(s);
    }
    function onTimeout(result)
    {
        alert("timeout:"+result);
    }
    function onError(result)
    {
        var msg=result.get_exceptionType()+"\r\n";
        msg+=result.get_message()+"\r\n";
        msg+=result.get_stackTrace();        
        alert(msg);
    }
 </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="AjaxServices.asmx" />
    </Services>
    </asp:ScriptManager>
 <input type="button" value="載入資料" id="btngetdata" />
 <div id="emp">
 
 </div>
</asp:Content>

 

在頁面上放置了一個ScriptManager空間並引入WebService的地址：

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="AjaxServices.asmx" />
    </Services>
</asp:ScriptManager>

再放一個div和<input type="button" value="載入資料" id="btngetdata" />當點擊按鈕的時候將資料載入到div中，方法：

$(function(){
        $("#btngetdata").click(GetEmployees);
    })

使用jQuery將按鈕綁定到id="btngetdata"按鈕上當點擊按鈕時就調用GetEmployees（）方法；

方法：

function GetEmployees()
{       
        WebAppTest.Ajax.AjaxServices.GetEmployee(onSecess,onError,onTimeout);

}

這裡調用Webservice方法，提供js和Webservice的互動，也是整個代碼的核心，onSecces,是一個調用成功後的回呼函數，所有的現實邏輯都在這裡處理，onError,是一個調用失敗的回呼函數，onTimeout，是一個調用逾時的回呼函數。在onSecces中

function onSecess(result)
    {
        var s=String.format("<table class=\"tblClass\" ><tr><th>EmployeeId</th><th>FirstName</th><th>LastName</th><th>BirthDate</th></tr>");
        for(var i=0;i<result.length;i++)
        {
            s+=String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td>",result[i].EmployeeID,result[i].FirstName,result[i].LastName,result[i].BirthDate);
        }
        s+="</table>";
        $("#emp").html(s);
    }
我們將取到的資料格式化成Table然後通過jQuery的方法將資料顯示到頁面上。

onError(result)和onTimeout(result)將調用該方法時出現的異常和逾時資訊alert出來。看看啟動並執行效果：

總結：使用Asp.net Ajax2.0 調用WebService的方法非常簡單，關鍵步驟是建立WebService--->暴露WebService所在的類和外界調用的方法-->js通過C#中的FullName的方式來調用WebService中的方法-->在回調方法中處理返回的資料並顯示給使用者。