从 AJAX 调用 Web 服务的不同方法

Gyan Jadal

2.28/5 (8投票s)

2007年10月25日

CPOL

2分钟阅读

213406

1155

从 AJAX 调用 Web 服务的不同方法。

下载源代码 - 1.6 KB

引言

本文简要介绍了使用 AJAX 调用 Web 服务方法的各种方法。

背景

有很多文章解释了 AJAX 和 Web 服务如何在尝试解决各种问题时相互交互。我只是把交互方式整理了一下。简而言之，以下是从 AJAX 调用 Web 服务的不同方法。

使用代码

下面的代码演示了从传统方法没有 AJAX开始的各种方法作为基础。

代码片段安排如下

Web服务
ASPX 和
C# 代码隐藏

在 AJAX 之前

本节可以快速浏览一下，了解如何从服务器控件（如按钮）的 postback 中调用 Web 服务方法。

没有 JavaScript - 需要回发才能填充 Label1

//WebService

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyService : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World " + DateTime.Now.ToString();
        //Or call the method on the real webservice traditional way
    }
}

客户端 ASPX

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" 
  OnClick="Button1_Click" Text="Button" />
</form>
</body>

客户端代码隐藏

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        MyService myService = new MyService();
        Label1.Text = myService.HelloWorld();
    }
}

使用 AJAX

方法 1

本节介绍如何通过修改 ScriptManager 来调用 Web 服务。

使用 AJAX - 不需要回发即可填充 Label1

将 ScriptService() 属性添加到 Service 类。
将 <Services> 标记添加到 ScriptManager。
将服务器控件“Label”和“Button”转换为 HTML 控件。
从 JavaScript 调用 Web 服务方法，这实际上是一个代理调用。
从代码隐藏中删除 Click 处理程序。

//WebService

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public class MyService : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World " + DateTime.Now.ToString();
        //Or call the method on the real webservice traditional way
    }
}

客户端 ASPX

<script language="javascript" >
function onClick(){
    MyAjaxApplication.MyWebService.HelloWorld(OnComplete, 
                      OnTimeOut, OnError);
    return true;
}
function OnComplete(args) {
    document.getElementById('Label1').innerHTML = args;
}
function OnTimeOut(args) {
    alert("Service call timed out.");
}

function OnError(args) {
    alert("Error calling service method.");
}</script><body>

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="MyService.asmx" />
</Services>
</asp:ScriptManager>
<label id="Label1" style="width: 318px"></label>
<input id="Button1" type="button" 
  value="button" onclick="return onClick();" />
</form></body>

客户端代码隐藏

public partial class _Default : System.Web.UI.Page
{
    //empty
}

方法 2

本节介绍如何从 CascadingDropDown Toolkit 控件调用 Web 服务，无论是否使用中间页面方法。

使用 AJAX 页面方法和来自工具包的 CascadingDropDown 控件 - 不需要回发即可填充组合框

向服务添加一个新方法以返回 CascadingDropDownValue[] 集合。这将用作下拉列表的数据源。
从 ScriptManager 中删除 <Services> 标记。
从 ScriptManager 中删除 EnablePageMethods。
删除标签和文本框控件。
向客户端页面添加两个 DropDownList 服务器控件和两个 CascadingDropDown（来自工具包）。
设置第一个 CascadingDropDown 的服务名称和方法。
仅为第二个 Cascadingdropdown 设置页面方法。

//WebService

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public class MyWebService : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World " + DateTime.Now.ToString();
    }
    [WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public CascadingDropDownNameValue[] GetHelloList(
            string knownCategoryValues, string category)
    {
        string result = HelloWorld();
        List<CascadingDropDownNameValue> values = 
              new List<CascadingDropDownNameValue>();
        values.Add(new CascadingDropDownNameValue("Hello", result)); 
        return values.ToArray();
    }

客户端 ASPX

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
From Direct Service call
<asp:DropDownList ID="DropDownList1" 
  runat="server" Width="285px" />
<br />
Through Page Method
<asp:DropDownList ID="DropDownList2" 
  runat="server" Width="285px" />
<br />
<cc1:CascadingDropDown ID="CascadingDropDown1" 
  runat="server" Category="Hello"
  TargetControlID="DropDownList1" 
  ServicePath="MyService.asmx" 
  ServiceMethod="GetHelloList">
</cc1:CascadingDropDown>

客户端代码隐藏

public partial class _Default : System.Web.UI.Page
{
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static CascadingDropDownNameValue[] 
      GetHelloListPageMethod(string knownCategoryValues, string category){
    return new MyWebService().GetHelloList(knownCategoryValues, category);
}
}
//Note: If this PageMethod is used, the servicepath attribute 
//on the Cascadingdropdown in aspx should be removed

关注点

希望这能消除很多困惑，尤其是对于那些试图弄清楚如何访问 Web 服务的人。欢迎评论。