由基礎觸類旁通–Ajax調用WebService的簡單例子

在Ajax中，瀏覽器通過javascript可以直接調用WebService，下面具體講解如何?：

 

第一步：在WS目錄下建立一個名為AjaxService的asmx檔案。

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
///AjaxService 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允許使用 ASP.NET AJAX 從指令碼中調用此 Web 服務，請取消對下行的注釋。
[System.Web.Script.Services.ScriptService]
public class AjaxService : System.Web.Services.WebService {

    public AjaxService () {

        //如果使用設計的組件，請取消注釋以下行
        //InitializeComponent();
    }

 

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

 

第二步：需要為Default.aspx版面設定ScriptManager的Service屬性：

 

有兩種方法可以實現：

（一）、在Default.aspx頁面為ScriptManager直接添加(注意ScriptManager要放在其它所有Ajax控制項的最前面)

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

（二）、通過編程方式實現，在Default.aspx.cs檔案的Page_Load事件中寫如下代碼

         ServiceReference sr = new ServiceReference ();

         sr.Path = "~/WS/AjaxService.asmx";

         ScriptManager1.Services.Add(reference);

 

第三步：為Default.aspx頁面添加顯示元素及js函數

    

    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WS/AjaxService.asmx" />
            </Services>
        </asp:ScriptManager>
        <input id="Button1" type="button" value="Ajax調用WebService"  onclick="callAjax()"/>
        <input id="tbmsg" type="text" />
        <input id="tbShow" type="text" />
    </div>

    js調用ws的一個<script></script>

    <script type="text/javascript" language="javascript">
        function callAjax() {
            ws = AjaxService.HelloWorld(document.getElementById("tbmsg").value, OnEnd);
            return false;
        }

 

        function OnEnd(result) {
            document.getElementById("tbShow").value = result;
        }
    </script>

     說明：AjaxService.HelloWorld()方法是關鍵，可以根據實際需要，在ws檔案裡書寫需要的代碼；可以發現在頁面中並沒有發現定義過AjaxService.HelloWorld()這個js函數，其實這個方法是有ScriptManager自動產生的，在運行時，ScriptManager將為每一個ServiceReference對象產生一個用戶端代理，AjaxService就是AjaxService.asmx.cs中定義的AjaxService類的代理。

    

      HelloWorld()方法是AjaxService.asmx.cs中定義的HelloWorld方法的遠程調用。但是AjaxService.asmx.cs檔案中的HelloWorld只有一個string的參數，在用戶端，JS程式訪問時，還要加上另外一個參數，這個參數是對另外一個函數的引用，表示當調用結束時，自動調用的方法名稱，並將HelloWorld的傳回值作為這個方法的參數。於是才會有了OnEnd（Result）這個方法的定義。