如何使用 ASP.NET AJAX 从客户端 JavaScript 调用 Web 服务
ASP.NET AJAX 框架为我们提供了一种简单优雅的方式来消费 Web 服务。本文将重点介绍客户端 JavaScript 调用 Web 服务的基础知识。
引言
ASP.NET AJAX 框架为我们提供了一种简单优雅的方式，让客户端 JavaScript 代码能够调用 Web 服务。事实上，编写一个简单的 AJAX 启用 Web 服务并从客户端 JavaScript 连接到它，比写这样一篇文章还要容易。在本文中，我尝试收集了一些我的经验，希望它们能帮助您开始使用 ASP.NET AJAX 技术，特别是 ASP.NET AJAX 启用 Web 服务。
背景
前一段时间，我一直在寻找一种方法，可以在不刷新整个页面的情况下动态更新页面的一部分。实际上，我只需要更新页面上的一些小文本字段。除了这些文本，我的页面上还有很多图形，当这些文本字段更新时，用户会觉得整个页面闪烁很烦人。因此，在更新文本数据时，我必须避免刷新页面上的图形。ASP.NET AJAX 技术被证明是实现此目的的完美选择。可以使用不同的 AJAX 技术来实现这种行为，例如：部分页面更新、页面方法和 Web 服务调用。在本文中，我将尝试介绍 Web 服务方法。
安装 ASP.NET AJAX
好吧，首先，要开始，您需要安装 ASP.NET AJAX 框架。您可以访问 AJAX：Microsoft ASP.NET 2.0 官方网站 来完成第一步。在那里，您可以找到有关如何安装和开始使用 ASP.NET AJAX 的链接和相当不错的说明。在写这篇文章时，我正在使用 ASP.NET AJAX 版本 1.0。
创建 AJAX 启用 Web 服务
假设您已成功安装 ASP.NET AJAX 框架。现在我们可以开始创建一个新的 AJAX 启用 Web 应用程序。
现在我们需要的是 AJAX 启用 Web 服务。让我们向项目中添加一个名为 MySampleService 的新 Web 服务。
为了启用 AJAX，我们必须在 Web 服务声明部分添加以下属性。
[System.Web.Script.Services.ScriptService()]
完成此操作后，我们的 Web 服务就可以响应客户端 JavaScript 调用了。这里还有一件事要做：我们需要一个 Web 方法，我们将从客户端 JavaScript 调用它。让我们这样定义它。
[WebMethod]
public string GetServerResponse(string callerName)
{
if(callerName== string.Empty)
throw new Exception("Web Service Exception: invalid argument");
return string.Format("Service responded to {0} at {1}",
callerName, DateTime.Now.ToString());
}
配置 ASP.NET 应用程序
ASP.NET 应用程序的 web.config 文件也必须进行修改，才能从客户端 JavaScript 代码启用 Web 服务调用。
如果您使用的是 ASP.NET AJAX 模板，Microsoft Visual Studio 2005 会为您进行此修改。以下是一个示例，说明可以将什么插入到您 web.config 文件的 httpHandlers 部分。
<configuration>
...
<system.web>
...
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
...
</httpHandlers>
...
</system.web>
...
<configuration>
编写客户端 JavaScript 代码
让我们看一下项目中自动创建的 default.aspx 文件（如果不存在，则需要手动添加一个）。首先，我们必须确保页面上只有一个 ScriptManager 对象实例。
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div></div>
</form>
</body>
然后，我们必须向 ScriptManager 对象添加一个 Services 集合，向 Services 集合添加一个 ServiceReference，并指定所需服务的 Path。结果可能如下所示。
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebServices/MySampleService.asmx" />
</Services>
</asp:ScriptManager>
<div></div>
</form>
</body>
或者，如果您更喜欢直接在代码隐藏文件中进行操作，则如下所示。
ScriptManager1.Services.Add(new ServiceReference("~/WebServices/MyWebService.asmx"));
现在，我们需要一些客户端函数、一个触发 Web 服务请求的按钮以及一个提供 Web 服务输入的文本框。
SendRequest- 此函数将向 Web 服务发送异步请求。OnComplete- 此函数将接收来自 Web 服务的响应。OnError- 如果在执行 Web 服务时发生错误，将触发此函数。OnTimeOut- 如果 Web 服务未响应，将触发此函数。MyTextBox- 用于 Web 服务输入的文本框。RequestButton- 触发SendRequest函数的按钮。
结果可能如下所示。
<head runat="server">
<title>Web Service call from client-side JavaScript</title>
<script language="javascript" type="text/javascript">
function SendRequest()
{
MySampleService.GetServerResponse(form1.MyTextBox.value, OnComplete, OnError,
OnTimeOut);
}
function OnComplete(arg)
{
alert(arg);
}
function OnTimeOut(arg)
{
alert("timeOut has occured");
}
function OnError(arg)
{
alert("error has occured: " + arg._message);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebServices/MySampleService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<input type="text" value="" id="MyTextBox" />
<input type="button" value="Send Request to the Web Service"
id="RequestButton" onclick="return SendRequest()" />
</div>
</form>
</body>
基本上就是这样。您拥有一个正常运行的客户端 JavaScript 代码，该代码可以调用服务器端 Web 服务并处理返回的响应。如果我们向 MySampleService 的 GetServerResponse 方法提供一个空输入值，那么正如预期的那样，它将抛出一个异常。此异常将被客户端 JavaScript 中的 OnError 函数捕获。
结论
所述的客户端到服务器通信模型，其中客户端 JavaScript 代码调用 Web 服务方法，为我们提供了极大的灵活性来扩展我们的网站功能。同时，流量最小：我们只发送 Web 方法所需的输入数据，并且只接收被调用方法的返回值。
历史
您始终可以在我网站的 AJAX 部分 找到本文的最新版本。