ASP.NET AJAX初學體驗之用戶端訪問WebService(2)

今天要說的是用戶端訪問WebService--序列化與還原序列化

我還是第一次在ASP.NET AJAX裡聽到序列化

==========================Demo1=====================

Demo1示範的是在用戶端用JSON字元

先添加引用

<asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="ColorService.asmx" InlineScript="true" />
            </Services>
        </asp:ScriptManager>看看Javascript如何調用WebService，這裡的資料類型為Complex <script language="javascript" type="text/javascript">
            function ReverseColor()
            {
                //JSON序列化字元
                var color = {"Red" : 50, "Green" : 100, "Blue" : 200};
                ColorService.Reverse(color, onSucceeded);
            }
            
            function onSucceeded(result)
            {
                alert(String.format(
                    "Red: {0}\nGreen: {1}\nBlue: {2}",
                    result.Red,
                    result.Green,
                    result.Blue));
            }            
        </script>

var color = {"Red" : 50, "Green" : 100, "Blue" : 200}，這行就是以JSON字元賦予color類型，這種寫法似乎
有點不習慣啊！不過沒關係，下一個Demo是我們熟悉的寫法，onSucceeded是成功的回呼函數。

我們看看ColorService是如何定義的：

[ScriptService]
public class ColorService  : System.Web.Services.WebService
{
    [WebMethod]
    [GenerateScriptType(typeof(Color))] //驗證2_ComplexTypeProxy.aspx
    public Color Reverse(Color color)
    {
        return new Color(
            (byte)(255 - color.Red),
            (byte)(255 - color.Green),
            (byte)(255 - color.Blue));
    }
    
}

原來是Reverse方法接收一個Color類型的參數並返回一個Color類型，的確很簡單
最後我們看下Color類是如何定義的：

public class Color
    {
        public Color() { }

        public Color(byte red, byte green, byte blue)
        {
            this.Red = red;
            this.Green = green;
            this.Blue = blue;
        }

        public byte Red;

        public byte Green;

        public byte Blue;
    }

再簡單不過，應該不用介紹。我們還是直接進入Demo2吧。

==========================Demo2=====================

Demo2介紹的是如何在用戶端產生複雜類型的代理，看下頁面Javascript的代碼

<script language="javascript" type="text/javascript">
            function ReverseColor()
            {
               
                //在Service方法前要標記，[GenerateScriptType(typeof(Color))] 
                var color = new ComplexType.Color(); 
                color.Red = 50;
                color.Green = 100;
                color.Blue = 200;
                ColorService.Reverse(color, onSucceeded);
            }
            
            function onSucceeded(result)
            {
                alert(String.format(
                    "Red: {0}\nGreen: {1}\nBlue: {2}",
                    result.Red,
                    result.Green,
                    result.Blue));
            }
        </script>

 

 啊哈，var color = new ComplexType.Color();
    color.Red = 50;
    color.Green = 100;
    color.Blue = 200;

這種寫法是我們所熟悉的，不過你真的這麼寫的話，還需要在Service端進行如下標註
[GenerateScriptType(typeof(Color))] ，可以把它標到類的前面，也可以標到方法名的前面(推薦)
就像下面的代碼一樣：

[ScriptService]
public class ColorService  : System.Web.Services.WebService
{
    [WebMethod]
    [GenerateScriptType(typeof(Color))] //驗證2_ComplexTypeProxy.aspx
    public Color Reverse(Color color)
    {
        return new Color(
            (byte)(255 - color.Red),
            (byte)(255 - color.Green),
            (byte)(255 - color.Blue));
    }
    
}

=============================Demo3========================

好我們對Demo2進行一下小小的改變

<script language="javascript" type="text/javascript">
            function ReverseColor()
            {
               
                //在Service方法前要標記，[GenerateScriptType(typeof(Color))] 
                var color = new Object(); 
                color.__type=ComplexType.Color;
                color.Red = 50;
                color.Green = 100;
                color.Blue = 200;
                ColorService.Reverse(color, onSucceeded);
            }
            
            function onSucceeded(result)
            {
                alert(String.format(
                    "Red: {0}\nGreen: {1}\nBlue: {2}",
                    result.Red,
                    result.Green,
                    result.Blue));
            }
        </script>

 

其他都不變，能達到同樣的效果。

Demo4介紹的是在用戶端如何調用傳回型別為Table的Service；Demo5介紹的是在用戶端如何

調用有迴圈調用的Service，這2個Demo比較複雜，這裡暫時就不介紹了，您可以參考相關資料

或Email給我，我會給你解答。(Email:gfreesky@gmail.com)