新瓶旧酒ASP.NET AJAX(9) - 客户端脚本编程（Sys.Net命名空间下的WebServiceProxy）

[索引页]
[源码下载]

新瓶旧酒ASP.NET AJAX(9) - 客户端脚本编程（Sys.Net命名空间下的WebServiceProxy、WebServiceError、Generated Proxy Classes以及调用WebService、PageMethod）

作者：webabcd


介绍
使用ASP.NET AJAX调用WebService（简单类型和复杂对象、JSON和XML）和PageMethod。Sys.Net命名空间下的WebServiceProxy Class、WebServiceError Class、Generated Proxy Classes


关键
1、调用WebService
    ・为WebService类或需要暴露给客户端的WebService方法添加[System.Web.Script.Services.ScriptService]属性
    ・为WebService类中需要暴露给客户端使用的方法添加[System.Web.Services.WebMethod]属性
    ・在ScriptManager控件的Services集合中添加对该WebService的引用
    ・客户端调用方法：[NameSpace].[ClassName].[MethodName](param1, param2, ..., succeededCallback, failedCallback, userContext)
    ・如果用GET方式的话，则在WebService方法添加[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]属性
    ・用到了复杂类型的话，则在WebService类上添加[System.Web.Script.Services.GenerateScriptType(typeof(TypeName))]属性。另外，该复杂类型必须要有一个无参数的构造函数
    ・禁止将某属性输出到客户端，则在该属性上添加[System.Web.Script.Serialization.ScriptIgnore]属性
    ・以XML方式输出到客户端（一般是JSON），则在WebService方法添加[ScriptMethod(ResponseFormat = ResponseFormat.Xml)]属性。如果要避免ASP.NET AJAX为我们做自动转换，则应该添加[ScriptMethod(ResponseFormat = ResponseFormat.Xml, XmlSerializeString = true)]属性
    ・以XML方式输出到客户端的复杂对象的属性，在属性上添加[System.Xml.Serialization.XmlAttribute]属性（可不写）。若禁止将其输出到客户端，则在属性上添加[System.Xml.Serialization.XmlIgnore]属性。
    ・WebService判断用户是否通过验证 - HttpContext.Current.User.Identity.IsAuthenticated
    ・WebService使用Session - HttpSessionState session = HttpContext.Current.Session;

2、调用PageMethod
    ・ASP.NET页面中的方法需要时Public和Static的
    ・为该方法添加[System.Web.Services.WebMethod]属性
    ・设置ScriptManager控件的EnablePageMethods="true"
    ・客户端调用方法：PageMethods.[MethodName](param1, param2, ..., callbackFunction);

3、WebServiceProxy Class
    var webRequest = Sys.Net.WebServiceProxy.invoke(path, methodName, useHttpGet, parameters, succeededCallback, failedCallback, userContext, timeout);
    ・path - WebService的url
    ・methodName - 调用的方法名
    ・useHttpGet - 是否使用HTTP GET方式
    ・parameters - 参数（示例：{"param1":196610, "param2":"Hello"}）
    ・succeededCallback - 调用成功的回调函数
    ・failedCallback - 调用失败的回调函数
    ・userContext - 用户上下文
    ・timeout - 超时时间
    ・返回值 - 相关的WebRequest对象

4、WebServiceError Class
    ・exceptionType - 服务器端异常的具体类型
    ・message - 详细的异常描述信息
    ・stackTrace - 服务器端异常的堆栈跟踪信息
    ・statusCode - 造成异常的HTTP响应的状态码
    ・timedOut - 异常是否是由于网络连接超时造成的

5、Generated Proxy Classes属性
    ・defaultSucceededCallback - 调用成功的回调函数
    ・defaultFailedCallback - 调用失败的回调函数
    ・defaultUserContext - 用户上下文
    ・path - WebService的路径
    ・timeout - 超时时间

6、Generated Proxy Classes（调用Web Service）
    var myServiceProxy = MyNameSpace.MyService();
    myServiceProxy.MyServiceMethod(param1, param2, ..., succeededCallback, failedCallback, userContext);
    ・param - 在前面顺序地写参数
    ・succeededCallback - 调用成功的回调函数
    ・failedCallback - 调用失败的回调函数
    ・userContext - 调用成功的回调函数

7、Generated Proxy Classes（调用成功的回调函数）
    function succeededCallback(result, userContext, methodName) { }
    ・result - 调用WebService的方法后返回的数据
    ・userContext - 用户上下文
    ・methodName - 调用的方法名

8、Generated Proxy Classes（调用失败的回调函数）
    function failedCallback(error, userContext, methodName) { }
    ・error - 调用WebService的方法后返回的数据（Sys.Net.WebServiceError对象）
    ・userContext - 用户上下文
    ・methodName - 调用的方法名


示例
Hello.asmx

<%@ WebService Language= "C#" Class= "Hello" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class Hello : System.Web.Services.WebService
{
        [WebMethod]
        // 如果用GET方式的话，[ScriptMethod(UseHttpGet = true)]
        public string Say(string name)
        {
                return String.Format("WebService Hello {0}", name);
        }

        [WebMethod]
        // 如果用GET方式的话，[ScriptMethod(UseHttpGet = true)]
        public int SayError(int a, int b)
        {
                return a / b;
        }
}

 

Hello.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="WebService、PageMethod、WebServiceError Class" %>

<%@ Import Namespace="System.Web.Services" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

        <script runat="Server">
                
                [WebMethod]
                public static string Say(string name)
                {
                        return String.Format("PageMethod Hello {0}", name);
                }

        </script>

        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
                <services>
                        <asp:ServiceReference Path="Hello.asmx" />
                </services>
        </asp:ScriptManagerProxy>
        <input type="text" id="txtName" value="webabcd" />
        <input type="button" id="btnHelloWebService" value="HelloWebService" />
        <input type="button" id="btnHelloPageMethod" value="HelloPageMethod" />
        <input type="button" id="btnContext" value="HelloContext" />
        <input type="button" id="btnHelloError" value="HelloError" />
        <br /><br />
        <div id="result" />

        <script type="text/javascript">
                function btnHelloWebService_click()    
                {
                        var name = $get("txtName").value;
                        Hello.Say(name, onSucceeded);
                }

                function btnHelloPageMethod_click()    
                {
                        var name = $get("txtName").value;
                        PageMethods.Say(name, onSucceeded);
                }
                
                function btnHelloContext_click()    
                {
                        var name = $get("txtName").value;
                        Hello.Say(name, onHelloContextSucceeded, null, jsonContext);
                }

                function btnHelloError_click()    
                {
                        Hello.SayError(100, 0, onSucceeded, onFailed);
                }

                function onSucceeded(result)    
                {
                        $get("result").innerHTML = result + "<br />";
                }
                
                function onHelloContextSucceeded(result, context)    
                {
                        $get("result").innerHTML = result + "<br />";
                        
                        $get("result").innerHTML += context.Name + "<br />";
                        $get("result").innerHTML += context.Age + "<br />";
                }
                
                function onFailed(error)    
                {
                        // error - Sys.Net.WebServiceError对象
                
                        // exceptionType - 服务器端异常的具体类型
                        $get("result").innerHTML = "Exception Type：" + error.get_exceptionType() + "<br />";
                        // message - 详细的异常描述信息
                        $get("result").innerHTML += "Message：" + error.get_message() + "<br />";
                        // stackTrace - 服务器端异常的堆栈跟踪信息
                        $get("result").innerHTML += "Stack Trace：" + error.get_stackTrace() + "<br />";
                        // statusCode - 造成异常的HTTP响应的状态码
                        $get("result").innerHTML += "Status Code：" + error.get_statusCode() + "<br />";
                        // timedOut - 异常是否是由于网络连接超时造成的
                        $get("result").innerHTML += "Timed Out：" + error.get_timedOut() + "<br />";
                }
                
                var jsonContext =    
                {
                        Name: "webabcd",
                        Age: 27
                };

        </script>

</asp:Content>

 

 

运行结果
1、单击“HelloWebService”按钮
WebService Hello webabcd

2、单击“HelloPageMethod”按钮
PageMethod Hello webabcd

3、单击“HelloContext”按钮
WebService Hello webabcd
webabcd
27

4、单击“HelloError”按钮
Exception Type：System.DivideByZeroException
Message：试图除以零。
Stack Trace： 在 Hello.SayError(Int32 a, Int32 b) 位置 c:\Documents and Settings\wanglei\桌面\AJAX\Web\WebService\Hello.asmx:行号 25
Status Code：500
Timed Out：false


Sample.asmx

<%@ WebService Language= "C#" Class= "Sample" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Collections.Generic;
using System.Text;
using System.Data;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[GenerateScriptType(typeof(Person))]
[ScriptService]
public class Sample : System.Web.Services.WebService
{
        [WebMethod]
        public string SimpleTypeTest(
                string stringTest, bool boolTest, int intTest, float floatTest,
                DateTime datetimeTest, DayOfWeek enumTest)
        {
                return String.Format("stringTest：{0}；boolTest：{1}；intTest：{2}；floatTest：{3}；datetimeTest：{4}；enumTest：{5}",
                        stringTest, boolTest, intTest, floatTest, datetimeTest, enumTest);
        }


        [WebMethod]
        public Person GetPerson()
        {
                return new Person("webabcd", 27);
        }
        [WebMethod]
        public string SetPerson(Person p)
        {
                return String.Format("Name：{0}；Age：{1}", p.Name, p.Age);
        }


        [WebMethod]
        public List<Person> GetList()
        {
                List<Person> list = new List<Person>();

                for (int i = 0; i < 10; i++)
                {
                        Person p = new Person(i.ToString().PadLeft(4, '0'), i + 20);
                        list.Add(p);
                }

                return list;
        }
        [WebMethod]
        public string SetList(List<Person> list)
        {
                StringBuilder sb = new StringBuilder();

                sb.Append("<table border='1'>");
                foreach (Person p in list)
                {
                        sb.Append("<tr>");
                        sb.Append("<td>Name：" + p.Name + "</td>");
                        sb.Append("<td>Age：" + p.Age + "</td>");
                        sb.Append("</tr>");
                }
                sb.Append("</table>");

                return sb.ToString();
        }


        [WebMethod]
        public Dictionary<string, Person> GetDictionary()
        {
                Dictionary<string, Person> dictionary = new Dictionary<string, Person>();

                for (int i = 0; i < 10; i++)
                {
                        Person p = new Person(i.ToString().PadLeft(4, '0'), i + 20);

                        dictionary.Add(i.ToString(), p);
                }

                return dictionary;
        }


        [WebMethod]
        public DataTable GetDataTable()
        {
                DataTable dt = new DataTable();

                dt.Columns.Add(new DataColumn("Name", typeof(string)));
                dt.Columns.Add(new DataColumn("Age", typeof(int)));

                for (int i = 0; i < 10; i++)
                {
                        DataRow dr = dt.NewRow();
                        dr["Name"] = i.ToString().PadLeft(4, '0');
                        dr["Age"] = i + 20;

                        dt.Rows.Add(dr);
                }

                return dt;
        }


        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
        // 避免ASP.NET AJAX为我们做自动转换，[ScriptMethod(ResponseFormat = ResponseFormat.Xml, XmlSerializeString = true)]
        public List<Person> GetXml()
        {
                return GetList();
        }
}

 

Sample.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="WebService（简单类型和复杂对象、JSON和XML）" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
                <services>
                        <asp:ServiceReference Path="Sample.asmx" />
                </services>
        </asp:ScriptManagerProxy>
        <input type="button" id="btnSimpleTypeTest" value="SimpleTypeTest" />
        <input type="button" id="btnGetPerson" value="GetPerson" />
        <input type="button" id="btnSetPerson" value="SetPerson" />
        <input type="button" id="btnGetList" value="GetList" />
        <input type="button" id="btnSetList" value="SetList" />
        <input type="button" id="btnGetDictionary" value="GetDictionary" />
        <input type="button" id="btnGetDataTable" value="GetDataTable" />
        <input type="button" id="btnGetXml" value="GetXml" />
        <br /><br />
        <div id="result" />

        <script type="Text/javascript">
                function btnSimpleTypeTest_click()    
                {
                        Sample.SimpleTypeTest("abc", false, 1, 1.1, new Date(), System.DayOfWeek.Sunday, onSimpleTypeTestSucceeded);
                }
                function onSimpleTypeTestSucceeded(result)    
                {
                        $get("result").innerHTML = result + "<br />";
                }
                
                
                function btnGetPerson_click()    
                {
                        Sample.GetPerson(onGetPersonSucceeded);
                }
                function onGetPersonSucceeded(result)    
                {
                        $get("result").innerHTML = String.format("Name：{0}；Age：{1}<br />", result.Name, result.Age);
                }
                
                
                function btnSetPerson_click()    
                {
                        // var p = new Object();

                        var p = new Person();
                        p.Name = "webabcd";
                        p.Age = 27;
                        Sample.SetPerson(p, onSetPersonSucceeded);
                }
                function onSetPersonSucceeded(result)
                {
                        $get("result").innerHTML = result + "<br />";
                }
                
                
                function btnGetList_click()    
                {
                        Sample.GetList(onGetListSucceeded);
                }
                function onGetListSucceeded(result)    
                {
                        var sb = new Sys.StringBuilder();
                        
                        sb.append("<table border='1'>");
                        for (var i=0; i<result.length; i++)
                        {
                                sb.append("<tr>");
                                sb.append("<td>Name：" + result[i].Name + "</td>");
                                sb.append("<td>Age：" + result[i].Age + "</td>");
                                sb.append("</tr>");
                        }
                        sb.append("</table>");

                        $get("result").innerHTML = sb.toString();
                }
                
                
                function btnSetList_click()    
                {
                        var ary = new Array();
                        for (var i = 0 ; i < 10; i++)    
                        {
                                var p = new Person();
                                p.Name = i + 1000;
                                p.Age = i + 20;
                                
                                Array.add(ary, p);
                        }

                        Sample.SetList(ary, onSetListSucceeded);
                }
                function onSetListSucceeded(result)    
                {
                        $get("result").innerHTML = result;
                }
                
                
                function btnGetDictionary_click()    
                {
                        Sample.GetDictionary(onGetDictionarySucceeded);
                }
                function onGetDictionarySucceeded(result)    
                {                
                        var sb = new Sys.StringBuilder();
                        
                        sb.append("<table border='1'>");
                        for (var key in result)
                        {
                                var p = result[key];

                                sb.append("<tr>");
                                sb.append("<td>Name：" + p.Name + "</td>");
                                sb.append("<td>Age：" + p.Age + "</td>");
                                sb.append("</tr>");
                        }
                        sb.append("</table>");

                        $get("result").innerHTML = sb.toString();
                }
                
                
                function btnGetDataTable_click()    
                {
                        Sample.GetDataTable(onGetDataTableSucceeded);
                }
                function onGetDataTableSucceeded(result)    
                {                
                        var sb = new Sys.StringBuilder();
                        
                        sb.append("<table border='1'>");
                        for (var i=0; i<result.rows.length; i++)
                        {
                                sb.append("<tr>");
                                sb.append("<td>Name：" + result.rows[i].Name + "</td>");
                                sb.append("<td>Age：" + result.rows[i].Age + "</td>");
                                sb.append("</tr>");
                        }
                        sb.append("</table>");

                        $get("result").innerHTML = sb.toString();
                }
                
                
                function btnGetXml_click()
                {
                        Sample.GetXml(onGetXmlSucceeded);
                }
                function onGetXmlSucceeded(result)
                {
                        if (document.all)
                        {
                                $get("result").innerText = "\r\n" + result.xml;
                        }
                        else
                        {
                                // Firefox
                                $get("result").textContent = "\r\n首节点：" + result.documentElement.nodeName;
                        }
                }
        </script>

</asp:Content>

 

 

运行结果
1、单击“SimpleTypeTest”按钮
stringTest：abc；boolTest：False；intTest：1；floatTest：1.1；datetimeTest：2007-7-5 0:59:35；enumTest：Sunday

2、单击“GetPerson”按钮
Name：webabcd；Age：27

3、单击“SetPerson”按钮
Name：webabcd；Age：27

4、单击“GetList”按钮

Name：0000	Age：20
Name：0001	Age：21
Name：0002	Age：22
Name：0003	Age：23
Name：0004	Age：24
Name：0005	Age：25
Name：0006	Age：26
Name：0007	Age：27
Name：0008	Age：28
Name：0009	Age：29

5、单击“SetList”按钮

Name：1000	Age：20
Name：1001	Age：21
Name：1002	Age：22
Name：1003	Age：23
Name：1004	Age：24
Name：1005	Age：25
Name：1006	Age：26
Name：1007	Age：27
Name：1008	Age：28
Name：1009	Age：29

6、单击“GetDictionary”按钮

Name：0000	Age：20
Name：0001	Age：21
Name：0002	Age：22
Name：0003	Age：23
Name：0004	Age：24
Name：0005	Age：25
Name：0006	Age：26
Name：0007	Age：27
Name：0008	Age：28
Name：0009	Age：29

7、单击“GetDataTable”按钮

Name：0000	Age：20
Name：0001	Age：21
Name：0002	Age：22
Name：0003	Age：23
Name：0004	Age：24
Name：0005	Age：25
Name：0006	Age：26
Name：0007	Age：27
Name：0008	Age：28
Name：0009	Age：29

8、单击“GetXml”按钮
<?xml version="1.0"?>
<ArrayOfPerson xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<Person><Name>0000</Name><Age>20</Age></Person>
<Person><Name>0001</Name><Age>21</Age></Person>
<Person><Name>0002</Name><Age>22</Age></Person>
<Person><Name>0003</Name><Age>23</Age></Person>
<Person><Name>0004</Name><Age>24</Age></Person>
<Person><Name>0005</Name><Age>25</Age></Person>
<Person><Name>0006</Name><Age>26</Age></Person>
<Person><Name>0007</Name><Age>27</Age></Person>
<Person><Name>0008</Name><Age>28</Age></Person>
<Person><Name>0009</Name><Age>29</Age></Person>
</ArrayOfPerson>


GeneratedProxy.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="Generated Proxy Classes" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
                <services>
                        <asp:ServiceReference Path="Hello.asmx" />
                </services>
        </asp:ScriptManagerProxy>
        <p>
                调用Web Service
                <br />
                var myServiceProxy = MyNameSpace.MyService();
                <br />
                myServiceProxy.MyServiceMethod(param1, param2, , succeededCallback, failedCallback,
                userContext);
        </p>
        <ul>
                <li>param - 在前面顺序地写参数 </li>
                <li>succeededCallback - 调用成功的回调函数 </li>
                <li>failedCallback - 调用失败的回调函数 </li>
                <li>userContext - 调用成功的回调函数 </li>
        </ul>
        <p>
                调用成功的回调函数
                <br />
                function succeededCallback(result, userContext, methodName) { }
        </p>
        <ul>
                <li>result - 调用WebService的方法后返回的数据 </li>
                <li>userContext - 用户上下文 </li>
                <li>methodName - 调用的方法名 </li>
        </ul>
        <p>
                调用失败的回调函数
                <br />
                function failedCallback(error, userContext, methodName) { }
        </p>
        <ul>
                <li>error - 调用WebService的方法后返回的数据（Sys.Net.WebServiceError对象） </li>
                <li>userContext - 用户上下文 </li>
                <li>methodName - 调用的方法名 </li>
        </ul>
        <p>
                <input type="text" id="txtName" value="webabcd" />
                <input type="button" id="btnHello" value="Hello" />
        </p>
        <div id="result" />

        <script type="text/javascript">
                // defaultSucceededCallback - 调用成功的回调函数
                Hello.set_defaultSucceededCallback(onSucceeded);
                // defaultFailedCallback - 调用失败的回调函数
                Hello.set_defaultFailedCallback(onFailed);
                // defaultUserContext - 用户上下文
                Hello.set_defaultUserContext("webabcd");
                // path - WebService的路径
                alert(Hello.get_path());
                // timeout - 超时时间
                alert(Hello.get_timeout());
        
                function btnHello_onclick()    
                {
                        var name = $get("txtName").value;
                        Hello.Say(name);
                }

                function onSucceeded(result, context, methodName)    
                {
                        $get("result").innerHTML = result + "<br />";
                        $get("result").innerHTML += "默认的Context：" + context + "<br />";
                        $get("result").innerHTML += "调用的方法名：" + methodName + "<br />";
                }
                
                function onFailed(error)    
                {
                        $get("result").innerHTML = error.get_message() + "<br />";
                }
        </script>

</asp:Content>

 

 

运行结果
1、页面加载
弹出框，信息：/Web/WebService/Hello.asmx
弹出框，信息：0

2、单击“Hello”按钮
WebService Hello webabcd
默认的Context：webabcd
调用的方法名：Say


WebServiceProxy.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="WebServiceProxy Class" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <p>
                var webRequest = Sys.Net.WebServiceProxy.invoke(path, methodName, useHttpGet, parameters,
                succeededCallback, failedCallback, userContext, timeout);
        </p>
        <ul>
                <li>path - WebService的url </li>
                <li>methodName - 调用的方法名 </li>
                <li>useHttpGet - 是否使用HTTP GET方式 </li>
                <li>parameters - 参数（示例：{"param1":196610, "param2":"Hello"}） </li>
                <li>succeededCallback - 调用成功的回调函数 </li>
                <li>failedCallback - 调用失败的回调函数 </li>
                <li>userContext - 用户上下文 </li>
                <li>timeout - 超时时间 </li>
                <li>返回值 - 相关的WebRequest对象 </li>
        </ul>
        <input type="button" id="btnHello" value="Hello" />
        <br />
        <br />
        <div id="result" />

        <script type="text/javascript">
                function btnHello_
                {
                        var wRequest =    
                        Sys.Net.WebServiceProxy.invoke
                        (
                                "Hello.asmx",
                                "Say",
                                false,
                                {"name":'webabcd'},
                                onSucceeded,
                                null,
                                null,
                                -1
                        );
                        
                        $get("result").innerHTML = wRequest.get_body() + "<br />";
                }
                
                function onSucceeded(result)
                {
                        $get("result").innerHTML += result + "<br />";
                }
        </script>

</asp:Content>

 

 

运行结果
1、单击“Hello”按钮
{"name":"webabcd"}
WebService Hello webabcd


OK
[源码下载]