Ajax.Net访问WebService的客户端编程

来源：互联网发布：手机cpu超频软件编辑：程序博客网时间：2024/06/05 20:00

Ajax.Net中的服务器端编程非常简单，只需要把我们的Web标准控件放在UpdatePanel中就可以了。这种服务器端编程虽然简单，但所有的Ajax客户端代码全都给封装了，这种封装有两种坏处：
1.让客户无法体会到Ajax异步回调的的概念。
2.只能依赖于UpdatePanel，无法使用Ajax灵活编程。
下面我们一起讨论如何编客户端的Ajax代码来访问WebService

在Ajax.Net中为我们提供了一个ScriptManager控件，使用它来编写JS代码时，我们可以在不损失灵活性的基础上有效简化我们JS的代码量。

一、调用简单的WebService

1、建立一个最简单的WebService
    [ScriptService]
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class WebServiceSample : System.Web.Services.WebService
    {
        [WebMethod]
        public string HelloWorld(string name) {
            return "Hello World "+name;
        }
    }
    这里需要注意的时在class WebServiceSample上添加[ScriptService]标签，另外我们写了一个供JS调用的方法HelloWorld()，该方法接收一个姓名字符串，并返回一个字符串。注意HelloWorld方法上也注明了[WebMethod]标记
    这样就建立好了我们服务器端的程序了，下面看一下如何使用JS调用它。

2、设置ScriptManager
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" onasyncpostbackerror="ScriptManager1_AsyncPostBackError">
            <Services>
                <asp:ServiceReference Path="~/WebServiceSample.asmx" />
            </Services>
        </asp:ScriptManager>
        <input type="text" id="inputName"/>
    </form>
    上面的代码中，我们在ScriptManager标记中加入了<Services>子标记，在Services子标记中加入ServiceReference元素，并在ServiceReference元素中指定WebService的访问路径

3、使用JS和ScriptManager访问WebService
    <script type="text/javascript" language="JavaScript">
    function OnbuttonGo_click()
    {
        WebServiceSample.HelloWorld(document.getElementById('inputName').value,OnRequestComplete,OnRequestFailed);
        return false;
    }
    function OnRequestComplete(result)
    {
        alert(result);
    }
    function onRequestFailed(result)
    {
        alert(result.get_message());
    }
    </script>
    其中的WebServiceSample就是WebService中的类名，HelloWorld就是WebService类中的方法名。在WebService.HelloWorld中只接收一个姓名字符串参数，但在JS这里的HelloWorld方法中可以接收多个参数：
    一般来说常用的有三个参数，各参数的意义如下：
        第一个参数：向WebService.HelloWorld方法中传递的值。
        第二个参数：执行成功后的回调函数
        第三个参数：执行失败后的回调函数

    在OnbuttonGo_click()方法中向WebService发送请求，如果执行WebService成功，则把结果返回给OnRequestComplete()回调函数。如果执行WebService失败则把结果返回给onRequestFailed()回调函数。

二、调用WebService的方法，并返回二维数组，实现下拉列表的连动效果

1、建立WebService (原创：灰灰虫的家 http://hi.baidu.com/grayworm)
    [ScriptService]
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class WebServiceSample : System.Web.Services.WebService
    {
        [WebMethod]
        public string[][] GetAreas(string code)
        {
            string[][] ss = null;
            List<ChinaStates> list = mydb.ChinaStates.Where(p=>p.ParentAreaCode==code).ToList();
            ss = new string[list.Count][];
            int i = 0;
            foreach (ChinaStates cs in list)
            {
                string[] s = new string[2];
                s[0] = cs.AreaCode;
                s[1] = cs.AreaName;
                ss[i] = s;
                i++;
            }
            return ss;
        }
    }
   该WebService有一个GetAreas()方法，该方法接收一个字符串参数，并返回一个二维数组。

2、设置ScriptManager
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WebServiceSample.asmx" />
            </Services>
        </asp:ScriptManager>
        省份：<select id="ddlProv" size=1 onchange = "cityChange()">
        <option value="-1">==请选择==</option>
        </select>  
        城市：<select id="ddlCity" size=1 onchange = "countyChange()">
        <option value="-1">==请选择==</option>
        </select>  
        县市区：<select id="ddlCountry" size=1 >
        <option value="-1">==请选择==</option>
        </select>
    </form>

3、使用JS和ScriptManager访问WebService
    //调用WebService的方法查询省份
    WebServiceSample.GetAreas("0001", initProv);
    //初始化省份
    function initProv(result) {
        var prov = document.getElementById("ddlProv");
        for (var i = 0; i < result.length; i++) {
            var opt = document.createElement("option");
           opt.setAttribute("value",result[i][0]);
            var s = document.createTextNode(result[i][1]);
            opt.appendChild(s);
            prov.options.appendChild(opt);
        }
    }
    //查询城市
    function cityChange() {
        var prov = document.getElementById("ddlProv").options[document.getElementById("ddlProv").selectedIndex].value;
        WebServiceSample.GetAreas(prov,initCity);
    }
    function initCity(result) {
        var city = document.getElementById("ddlCity");
        while (city.length > 1) {
            city.remove(1);
        }
        for (var i = 0; i < result.length; i++) {
            var opt = document.createElement("option");
            opt.setAttribute("value", result[i][0]);
            opt.appendChild(document.createTextNode(result[i][1]));
            city.appendChild(opt);
        }
        countyChange();
    }
    //查询县市区
    function countyChange() {
        var city = document.getElementById("ddlCity").options[document.getElementById("ddlCity").selectedIndex].value;
        WebServiceSample.GetAreas(city, initCounty);
    }
    function initCounty(result) {
        var county = document.getElementById("ddlCountry");
        while (county.length > 1) {
            county.remove(1);
        }
        for (var i = 0; i < result.length; i++) {
            var opt = document.createElement("option");
            opt.setAttribute("value", result[i][0]);
            opt.appendChild(document.createTextNode(result[i][1]));
            county.appendChild(opt);
        }
    }

三、调用WebService的方法，并返回实体对象 (原创：灰灰虫的家 http://hi.baidu.com/grayworm)
1、建立WebService
    [ScriptService]
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class WebServiceSample : System.Web.Services.WebService
    {
        [WebMethod]
        public Info GetInfoByCode(string code)
        {
            if (mydb.Info.Where(p => p.Code==code).Count() > 0)
            {
                Info info = mydb.Info.First(p => p.Code == code);
                return info;
            }
            else
            {
                return null;
            }
        }
    }
   这个WebService方法中返回一个Info对象。

2、设置ScriptManager
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" onasyncpostbackerror="ScriptManager1_AsyncPostBackError">
        <Services>
            <asp:ServiceReference Path="~/WebServiceSample.asmx" />
        </Services>
    </asp:ScriptManager>
    <input id="txt" type="text" /><input id="Button1" type="button" value="button" onclick="QueryInfo()"/><span id=ss></span>
    <div id=dd></div>
</form>

3、使用JS和ScriptManager访问WebService
    function QueryInfo() {
        var code = document.getElementById("txt").value;
        WebServiceSample.GetInfoByCode(code, show,failed);
        var span = document.getElementById("ss");
        ss.innerHTML = "正在查询请稍候....";
    }
    //如果失败则调用该方法显示错误信息。
    function failed(result) {
        var d = document.getElementById("dd");
        d.innerHTML = result.get_message(); //取得错误信息
        ss.innerHTML = "";
    }
    //如果调用成功则调用该方法显示查询结果
    function show(result) {
        if (result != null) {
            var d = document.getElementById("dd");
            var tb = "<table width=100% bgcolor=#ccaa99><tr>";
            tb += "<td>" + result.Code + "</td>";
            tb += "<td>" + result.Name + "</td>";
            tb += "<td>" + result.Sex + "</td>";
            tb += "<td>" + result.Nation + "</td>";
            tb += "<td>" + result.Birthday.getFullYear()+"-"+result.Birthday.getMonth()+"-"+result.Birthday.getDate() + "</td>";
            tb += "</tr></table>";
            d.innerHTML += tb;
        }
        var span = document.getElementById("ss");
       ss.innerHTML = "";
    }
四、调用WebService的方法，并返回泛型集合

1、建立WebService
[ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebServiceSample : System.Web.Services.WebService
{
    [WebMethod]
    public List<Info> GetAllInfo()
    {
        return mydb.Info.ToList();
    }
}

2、设置ScriptManager
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebServiceSample.asmx" />
        </Services>
    </asp:ScriptManager>
    <input id="Text1" type="text" /><input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
    <div id=dd></div>
</form>

3、使用JS和ScriptManager访问WebService
    //调用WebService
    function Button1_onclick() {
        WebServiceSample.GetAllInfo(OnSuccess, OnFailed);
    }
    //执行成功的回调函数，这里的result就是一个泛型的集合
   function OnSuccess(result) {
        var d = document.getElementById("dd");
        var s = "<table width=100% border=0>";
        // 遍历集合的每个元素
        for (var i = 0; i < result.length; i++) {
            s += "<tr bgcolor=#ccaa99>";
            s += "<td>" + result[i].Code + "</td>"; //显示集合元素的各属性
            s += "<td>" + result[i].Name + "</td>";
            s += "<td>" + result[i].Sex + "</td>";
            s += "<td>" + result[i].Nation + "</td>";
            s += "<td>" + result[i].Birthday + "</td>";
            s += "</tr>";
        }
        s += "</table>";
        d.innerHTML = s;
    }
    function OnFailed(result) {
        alert(result.get_message());
    }