天天看点

ASP.NET 2.0 AJAX中Webservice调用方法示例

ASP.NET 2.0 AJAX中能够在客户端js中很方便地调用服务器Webservice,以下为一些调用的示例。笔者安装的ASP.NET 2.0 AJAX

版本为AJAX November CTP。

三个示例分别为:

1 带参数的WS方法

2 不带参数的WS方法

3 参数类型为DataTable的WS方法

一、WebMethod

注意要点:

1 WebMethod类需要添加命名空间 Microsoft.Web.Script.Services,此空间需要引用Microsoft.Web.Preview.dll

2 类声明加入标签 [ScriptService]

3 在Asp.net 2.0里可以直接用DataTable作为返回类型了,但是需要在Web.config文件添加序列化转换器的属性。DataSet、DataTable、DataRow均有转换器

ASP.NET 2.0 AJAX中Webservice调用方法示例

  <system.web.extensions>

ASP.NET 2.0 AJAX中Webservice调用方法示例

    <scripting>

ASP.NET 2.0 AJAX中Webservice调用方法示例

      <webServices>

ASP.NET 2.0 AJAX中Webservice调用方法示例

        <jsonSerialization>

ASP.NET 2.0 AJAX中Webservice调用方法示例

          <converters>

ASP.NET 2.0 AJAX中Webservice调用方法示例

            <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview"/>

ASP.NET 2.0 AJAX中Webservice调用方法示例

            <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview"/>

ASP.NET 2.0 AJAX中Webservice调用方法示例

            <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview"/>

ASP.NET 2.0 AJAX中Webservice调用方法示例

          </converters>

ASP.NET 2.0 AJAX中Webservice调用方法示例

        </jsonSerialization>

ASP.NET 2.0 AJAX中Webservice调用方法示例

      </webServices>

ASP.NET 2.0 AJAX中Webservice调用方法示例

    </scripting>

ASP.NET 2.0 AJAX中Webservice调用方法示例

  </system.web.extensions>

WEB服务1:WS1

ASP.NET 2.0 AJAX中Webservice调用方法示例

using System;

ASP.NET 2.0 AJAX中Webservice调用方法示例

using System.Web;

ASP.NET 2.0 AJAX中Webservice调用方法示例

using System.Collections;

ASP.NET 2.0 AJAX中Webservice调用方法示例

using System.Web.Services;

ASP.NET 2.0 AJAX中Webservice调用方法示例

using System.Web.Services.Protocols;

ASP.NET 2.0 AJAX中Webservice调用方法示例

using Microsoft.Web.Script.Services;

ASP.NET 2.0 AJAX中Webservice调用方法示例

using System.Data;

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

/**//// <summary>

ASP.NET 2.0 AJAX中Webservice调用方法示例

/// WS1 的摘要说明

ASP.NET 2.0 AJAX中Webservice调用方法示例

/// </summary>

ASP.NET 2.0 AJAX中Webservice调用方法示例

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

ASP.NET 2.0 AJAX中Webservice调用方法示例

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

ASP.NET 2.0 AJAX中Webservice调用方法示例

[ScriptService]

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

public class WS1 : System.Web.Services.WebService 

ASP.NET 2.0 AJAX中Webservice调用方法示例

{

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

    public WS1 () 

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

        //如果使用设计的组件,请取消注释以下行 

ASP.NET 2.0 AJAX中Webservice调用方法示例

        //InitializeComponent(); 

ASP.NET 2.0 AJAX中Webservice调用方法示例

    }

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

    [WebMethod]

ASP.NET 2.0 AJAX中Webservice调用方法示例

    public string ServerTime()

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

        return String.Format("now: {0}", DateTime.Now);

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

    public DataTable GetDataTable()

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

        DataTable dt = new DataTable("Person");

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

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

ASP.NET 2.0 AJAX中Webservice调用方法示例

        dt.Columns.Add(new DataColumn("LastName", typeof(string)));

ASP.NET 2.0 AJAX中Webservice调用方法示例

        dt.Columns.Add(new DataColumn("Email", typeof(string)));

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

        dt.Rows.Add("kui", "he", "[email protected]");

ASP.NET 2.0 AJAX中Webservice调用方法示例

        dt.Rows.Add("ren", "chao", "[email protected]");

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

        return dt;

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

}

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

WEB服务2:WS

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

/// WS 的摘要说明

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

public class WS : System.Web.Services.WebService 

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

    public WS () 

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

    [ScriptMethod(UseHttpGet = true)]

ASP.NET 2.0 AJAX中Webservice调用方法示例

    public string HelloWorld(String query)

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

        string inputString = Server.HtmlEncode(query);

ASP.NET 2.0 AJAX中Webservice调用方法示例

        if (!String.IsNullOrEmpty(inputString))

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

            return String.Format("hello, {0}. ", inputString);

ASP.NET 2.0 AJAX中Webservice调用方法示例

        }

ASP.NET 2.0 AJAX中Webservice调用方法示例

        else

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

            return "query string is null or empty";

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

二、前台页面:

需要使用的后台WebService的方法均设置在如下位置

ASP.NET 2.0 AJAX中Webservice调用方法示例

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

ASP.NET 2.0 AJAX中Webservice调用方法示例

            <Services>

ASP.NET 2.0 AJAX中Webservice调用方法示例

                <asp:ServiceReference Path="~/WS.asmx" />

ASP.NET 2.0 AJAX中Webservice调用方法示例

                <asp:ServiceReference Path="~/WS1.asmx" />

ASP.NET 2.0 AJAX中Webservice调用方法示例

            </Services>

ASP.NET 2.0 AJAX中Webservice调用方法示例

        </asp:ScriptManager>

Default页面:

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

<%

ASP.NET 2.0 AJAX中Webservice调用方法示例

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ASP.NET 2.0 AJAX中Webservice调用方法示例

<html xmlns="http://www.w3.org/1999/xhtml">

ASP.NET 2.0 AJAX中Webservice调用方法示例

<head runat="server">

ASP.NET 2.0 AJAX中Webservice调用方法示例

    <title>Untitled Page</title>

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

    <script language="javascript" type="text/javascript" src="js.js">

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

    </script>

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

</head>

ASP.NET 2.0 AJAX中Webservice调用方法示例

<body>

ASP.NET 2.0 AJAX中Webservice调用方法示例

    <form id="form1" runat="server">

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

        <div>

ASP.NET 2.0 AJAX中Webservice调用方法示例

            <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="dd();return false;" />

ASP.NET 2.0 AJAX中Webservice调用方法示例

            <div id="time">

ASP.NET 2.0 AJAX中Webservice调用方法示例

            </div>

ASP.NET 2.0 AJAX中Webservice调用方法示例

            <div id="List1">

ASP.NET 2.0 AJAX中Webservice调用方法示例

                <asp:DropDownList ID="ddl1" runat="server" Width="187px">

ASP.NET 2.0 AJAX中Webservice调用方法示例

                </asp:DropDownList>

ASP.NET 2.0 AJAX中Webservice调用方法示例

                </div>

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

        </div>

ASP.NET 2.0 AJAX中Webservice调用方法示例

    </form>

ASP.NET 2.0 AJAX中Webservice调用方法示例

</body>

ASP.NET 2.0 AJAX中Webservice调用方法示例

</html>

ASP.NET 2.0 AJAX中Webservice调用方法示例

三、JavaScript程序:

AJAX November CTP 需要用 eval() 方法将其转换成一个DataTable对象(并且要裁掉最前面的"("),而AJAX December CTP 支持以下方法转换“Sys.Preview.Data.DataTable.parseFromJson(result)”

ASP.NET 2.0 AJAX中Webservice调用方法示例

    function dd()

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

        WS.HelloWorld(   

ASP.NET 2.0 AJAX中Webservice调用方法示例

                         'hekui', 

ASP.NET 2.0 AJAX中Webservice调用方法示例

                         function(result) 

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

ASP.NET 2.0 AJAX中Webservice调用方法示例

                            alert(result); 

ASP.NET 2.0 AJAX中Webservice调用方法示例

                         } 

ASP.NET 2.0 AJAX中Webservice调用方法示例

                     );

ASP.NET 2.0 AJAX中Webservice调用方法示例

        WS1.ServerTime(  

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                            var divTime = document.getElementById("time");

ASP.NET 2.0 AJAX中Webservice调用方法示例

                            divTime.innerHTML = result;

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

       WS1.GetDataTable(

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                            // 获取到下拉框控件

ASP.NET 2.0 AJAX中Webservice调用方法示例

                            var List = document.getElementById("ddl1"); 

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                            //AJAX November CTP 需要用 eval() 方法将其转换成一个DataTable对象(并且要裁掉最前面的"(")

ASP.NET 2.0 AJAX中Webservice调用方法示例

                            var Text= result.dataArray.substring(0,result.dataArray.length -1);            

ASP.NET 2.0 AJAX中Webservice调用方法示例

                            var Table = eval( Text);

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                            //AJAX December CTP 支持以下方法转换

ASP.NET 2.0 AJAX中Webservice调用方法示例

//                            var Table = Sys.Preview.Data.DataTable.parseFromJson(result);

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                            //清除下拉框原有列表项

ASP.NET 2.0 AJAX中Webservice调用方法示例

                            for (x=List.options.length-1; x > -1; x--) 

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                                List.remove(0);

ASP.NET 2.0 AJAX中Webservice调用方法示例

                            }

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                            //从获取的DataTable添加数据到下拉框列表项

ASP.NET 2.0 AJAX中Webservice调用方法示例

                            for (x=0; x < Table.length; x++ )

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                                //获取每一行

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                var Row = Table[x];          

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                //创建一个列表项                  

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                var option = document.createElement("option"); 

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                //列表项显示文本赋值

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                option.text = Row.Name + " " + Row.LastName;   

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                //列表项选项值赋值

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                option.value = Row.Email;                      

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                                //判断浏览器类型,进行项目添加     

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                if ( window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) 

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                   List.add(option);  

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                else

ASP.NET 2.0 AJAX中Webservice调用方法示例

                                   List.add(option, null);          

ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中Webservice调用方法示例

                         }

ASP.NET 2.0 AJAX中Webservice调用方法示例

                       );

ASP.NET 2.0 AJAX中Webservice调用方法示例

继续阅读