在微軟Ajax架構中異步調用WebService(JavaiScript中調用)

在園子裡看到關于Ajax調用WebService文章不再少數，也寫了幾個調用的執行個體，過兩天來看感覺理不清思路，今天加以小結:

WebService沒有什麼使用者界面，隻對外公開調用的方法，專注業務邏輯的實作，這恰好和ASP.NET AJAX用戶端程式設計模型所倡導的“将表現層和業務邏輯層徹底分開”的理念不謀而合。

微軟的Ajax架構用來處理用戶端的使用者界面，實作于使用者的具體互動，而伺服器端隻關心資料的處理，而無需理會用戶端表現樣式的變化。Ajax本身的異步通信層所自動生成的Web Service用戶端通路代理，WebService同樣也可以借用。

做出一個執行個體如下:業務需求—在界面的文本框中輸入使用者名，調用伺服器端的WebService中方法傳回伺服器端的時間并問候該使用者.顯示在界面上:

輸入chenkaige後顯示用戶端的結果:

調用的WebService代碼如下:

其中在WebService中編寫代碼前必須要導入System.Web.Script.Services空間支援，同時類前加上[ScriptService]的特性(為了生成用戶端調用代理)

using System;  

using System.Web;  

using System.Collections;  

using System.Web.Services;  

using System.Web.Services.Protocols;  

using System.Web.Script;  

using System.Web.Script.Services;  

/**//// <summary>  

/// 建立一個WebService用來實作通過Ajax的特殊異步通信層來調用該自定義方法  

/// Author：chenkai    Timer:2009年1月27日23:01:35  Document: A simple Demo  

/// </summary>  

[WebService(Namespace = "http://tempuri.org/")]  

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  

[ScriptService]//為了Asp.NET Ajax生成WebService用戶端調用代理  進而允許我們再javascript中調用WebService中自定義方法  

public class WebService : System.Web.Services.WebService {  

    public WebService () {  

        //如果使用設計的元件，請取消注釋以下行   

        //InitializeComponent();   

    }  

     /**//// <summary>  

     /// 自定義一個Webservice方法實作 傳回一個重新拼接的字元串  

     /// </summary>  

     /// <param name="clintname">用戶端字元竄</param>  

     /// <returns>服務端修改後的字元串</returns>  

    [WebMethod]  

    public string ClintSayHello(string clintname)  

    {  

        return DateTime.Now.ToString() + "Good Night!" + clintname;  

} 

用戶端調用代碼:

--調用WebService的JavaScript  

    <script type="text/javascript"> 

      //自定義通過javaScript調用伺服器端的WebService中的自定義方法  

      function ScriptFunction()  

     {  

         //獲得文本框中輸入的ClintName  

         var getname=document.getElementById("clintname").value;  

         alert(getname);  

         //開始調用Webservice同時還調用一個用戶端自定義的回調函數  

         //調用文法是[NameSpace].[ClassName].[MethodName](param1, param2 …, callbackFunction)  

         WebService.ClintSayHello(getname,CallBackFun);  

     }   

     //自定義一個回調函數  

     //該回調函數将在伺服器端異步調用成功傳回後由ASP.NET AJAX異步通訊層自動調用  

     //回調函數的result參數代表了本次異步調用的傳回結果—即調用WebService自定義方法傳回結果    

     //其result參數也會由ASP.NET AJAX異步通訊層傳遞進來，無需任何手工控制   

     function CallBackFun(result)  

        document.getElementById("DispayResult").innerHTML="<B>"+result+"</B>";  

        alert("Sucess To Transfer Server WebService！");  

     }     

    </script> 

   --頁面代碼:  

      <asp:ScriptManager ID="ScriptManager1" runat="server"> 

         <Services> 

           <asp:ServiceReference Path="WebService.asmx" /> 

         </Services> 

      </asp:ScriptManager> 

        <b>///通過Asp.net Ajax架構再用戶端調用WebService中方法  

         <br /> 

         ///Author:chenkai  Timer:2009年1月27日23:52:45</b> 

        <div> 

          InputClintName:<input type="text" id="clintname" /> 

          <input type="button" id="ClintBtnClick" onclick="return ScriptFunction()" value="SendToClint"/> 

        </div> 

        --div層用來顯示結果  

        <div id="DispayResult"></div> 

微軟Ajax架構中調用WebService的具體步驟如下:

(1)WebService類中導入System.Web.Script.Services命名空間，并在類前添加[ScriptService]屬性或者将Web Service類或需要暴露給用戶端的Web Service方法添加[ScriptService]屬性-根據需要來設定

(2)在頁面中的ScriptManager控件中添加對該Web Service的引用

(3)在用戶端使用如下JavaScript文法調用該Web Service：[NameSpace].[ClassName].[MethodName](param1, param2 ......, callbackFunction) 

(4)為用戶端異步調用指定回調函數，在回調函數中接收傳回值并進一步處理

本文轉自chenkaiunion 51CTO部落格，原文連結:http://blog.51cto.com/chenkai/765474