ASP.NET AJAX1.0嘗鮮試用：Web Service調用

系統內容：Windows Server 2003 + IIS6
開發環境：Visual Web Developer 2005速成版 + ASP.NET AJAX 1.0
使用目的：無重新整理調用伺服器端的Web Service
實現關鍵：ScriptManager + ScriptService

安裝ASP.NET AJAX1.0後，在VS中建立網站時多了一個選項：ASP.NET AJAX-Enabled Web Site，選擇這一個可以建立一個已經配置好使用AJAX的網站（主要是web.config）裡的配置，做個最簡單的：

1. 建立一個ASP.NET AJAX-Enabled Web Site（HTTP/FTP/檔案系統都可以），這時預設的Default.aspx已經包括了對ScriptManager的引用

2. 在項目中添加一個Web Service檔案，取名為TestService.asmx，代碼如下：

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;   //注意

[WebService(Namespace = "http://www.cnblogs.com/dingxue")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]     //注意
public class TestService : System.Web.Services.WebService {

    public TestService () {
    }

    [WebMethod]
    public string Merge(string a, string b)
    {
        return a + b;
    }
}

上面帶注釋的兩行是為了使此WEB服務可以被AJAX調用而加的，是必須的。這個WEB服務非常簡單，有一個Merge方法，接受兩個string類型的參數，並串連這兩個字串後返回。

3. 修改Default.aspx檔案中對ScriptManager的定義，以添加對剛才WEB Service的引用，代碼如下：

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

asp:ServiceReference實現了對一個Web Service的引用，Path屬性指示了Web Service檔案的位置

4. 添加測試用的HTML控制項，三個文字框，兩個用於輸入，一個用於顯示結果，還有一個按鈕是用來執行的，如下：

<input id="txt1" size="5" type="text" /> +
<input id="txt2" size="5" type="text" /> =
<input id="txt3" size="10" type="text" />
<input type="button" value="Merge" onclick="MergeIt()" />

5. 最後實現MergetIt()，用來實現最終調用：

<script type="text/javascript">
    function MergeIt(){
        new TestService().Merge($get("txt1").value,$get("txt2").value,MergeComplete);
    }
    function MergeComplete(result){
        $get("txt3").value = result;
    }
</script>

上面的按鈕調用了這裡的MergeIt()，這個函數實現了對TestService的調用，利用 new TestService() 來調用Web Service中的Merge方法，參數這裡有點要說明的，Web Service中的Merge方法只要兩個參數，而這裡卻是三個，其中前兩個和Web Service的參數是一致的，最後一個是另一個JS函數的名稱：MergeComplete，這個是用來接受所調用方法的結果的，執行時會自動將WEB Service返回的結果傳入MergeComplete，MergeComplete只接受一個參數，這裡命名為result。
PS: $get是 document.getElementById的縮寫，在ASP.NET AJAX中可以這樣寫，寫起來看起來都比較好一些

6. 現在好了，按下F5吧，如果不出意外的話，應該 可以看到結果了，在前兩個文字框輸入字元，點下按鈕看結果吧

項目來了人就太忙，好久不來，對不住大家了，附上本例源碼下載：http://files.cnblogs.com/dingxue/AJAXEnabledWebSite1.rar(2007.8.5)