在ASP.NET AJAX 1.0框架中访问Web服务

逃离我推掉我的手 2022-04-03 13:44 139阅读 0赞

**一、 简介**  
 如今，微软最新推出的AJAX框架为ASP.NET AJAX 1.0（下载地址为\[url\]http://ajax.asp.net/downloads/default.aspx\[/url\]，由ASP.NET 2.0 AJAX Extensions 1.0和ASP.NET AJAX Control Toolkit两部分组成）。这个框架具有如下优点：  
 丰富的Web用户体验框架；  
 与.NET编程模型无缝地集成到一起；  
 开发者可以自由选择应用程序模型以服务器端为中心还是以客户端为中心；  
 完全跨平台并基于标准实现；  
 无需客户端安装。  
  
ASP.NET AJAX 1.0以面向对象技术对JavaScript进行了高级包装，便于开发人员以流行的面向对象方式进行客户端JavaScript编程，从而大大简化了JavaScript编码及调试。  
  
在以前的ASP.NET 2.0 Web应用程序中，为了使客户端能够访问Web服务，开发者还需要创建一个运行于服务器端的应用程序（或由系统提供相应的代理），还需要创建一个Web应用程序，使用Visual Studio .NET或wsdl.exe生成Web服务的代理，并用该Web应用程序实现这个代理。现在，开发者终于可以完全在客户端实现对Web服务的调用了。在创建客户端页面时，只要在ScriptManager的<Services>标签中添加<asp:ServiceReference>元素，指向你的Web服务即可。  
  
本文中，我将通过一个具体示例来实现直接通过以ASP.NET AJAX 1.0框架JavaScript访问Web服务。  
  
【作者注】在此，我们省略了有关ASP.NET AJAX 1.0的具体下载及配置介绍。如果你是ASP.NET AJAX 1.0新手，请细致查看其中附带的帮助说明及在线文档。  
**二、 案例分析**  
（一）创建Web页面  
启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX-Enabled Web Site”模板，命名工程为“WebServiceTest”，并选择C\#作为编程语言（如图１所示），最后点击OK。  
![200732994046.JPG][]  
图１.使用“ASP.NET AJAX-Enabled Web Site”模板快速创建AJAX应用程序。  
然后，把Default.aspx页面修改成如下图2所示形式：  
![200732994117.JPG][]  
图2.设计调用Web服务的客户端Web页面。  
  
注意，在上面的向导操作完成后，系统自动为页面添加了一个ScriptManager服务器控件。这个控件是整个ASP.NET AJAX 1.0框架的核心，它管理着客户端运行时所需要的用于实现客户端功能的各种JavaScript脚本库的部署。而且，在新版本的框架中，这个控件的功能更为强大，使用更为简易，从下面的例子中我们即可看出这一点。此外，为了便于我们在本文中试验使用客户端JavaScript调用Web服务，上面表单中的按钮为HTML Input Button控件，而另外三个文本框都是HTML Input Text控件。

（二）创建Web服务  
接下来，我们将编写一个web服务以便由浏览器端JavaScript访问之。在此，仅为说明问题，我们使用了一个最简单的二整数求和的例子。  
1. 右击工程，并点击“添加新项…”。在“添加新项”对话框中，从已安装的模板列表中选择“Web服务”，并且命名为SumService.asmx（如图3所示）。  
![200732994213.JPG][]  
图3.在工程中添加“Web服务”模板。  
2. 通过第１步，有两个文件将被创建到你的应用程序中。一个是SumService.asmx，位于你的应用程序根目录下；另一个是SumService.cs，位于App\_Code文件夹下，相应于该web服务的Code Behind文件。  
3. 打开文件SumService.cs。我们要在这个文件中编写web方法以便实现前面的目标。  
4. 在当前文件中添加下列必要的命名空间（加粗部分）：

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

5. 据框架提供的资料，在此必须使用ScriptService属性来修饰web服务，这样才使得JavaScript脚本能够访问这个服务。为此，在服务类定义的上面添加下列一行（加粗部分）。

\[WebService(Namespace =  " \[url\]http://tempuri.org/\[/url\] " )\] \[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1\_1)\] \[ScriptService\]  public  class  SumService: System.Web.Services.WebService \{

6. 在这个服务类中，我们将编写一个WebMethod—GetSum，它将返回两个整数的和。该方法的具体定义形式如下所示：

\[WebMethod\]  public  int  GetSum ( int  a， int  b) \{  return (a \+ b); \}

【注】有关Web方法的定义形式在框架资料中提供了多种形式的属性修饰符，主要是针对这些方法可能返回不同复杂程度的数据，在此略过。

（三）调用Web服务  
接下来，切换到上面Web表单的设计视图，点选ScriptManager1控件，在其“属性”窗口中点击“Services”属性右边的“…”进入到“ServiceReference集合编辑器”对话框并按下面图4所示进行操作。  
![200732994255.JPG][]  
图4.基于“属性”对话框配置方式编程ScriptManager控件。  
最后源码视图中代码如下所示：

< asp:ScriptManager ID = " ScriptManager1 "  runat = " server "  >  < Services >  < asp:ServiceReference Path = " SumService.asmx "  />  </ Services >  </ asp:ScriptManager >

通过此操作，我们在ScriptManager的<Services>标签中创建了一个ServiceReference实例，指向SumService.asmx。  
  
【注】我们从图4中的序号①处还可以看出，完全可以为ScriptManager控件指定它所控制下的.js脚本文件；但由于本文示例没有在独立的.js文件中访问Web服务，所以也在此略过。  
  
最后，我们来编写调用Web服务代理的代码，并将页面上的两个文本域的值传递给该Web服务。在设计视图中，双击“获取求和结果”按钮生成该按钮的事件处理函数。然后，将下列代码添加到其相应的事件处理器函数中：

function btnSum\_ \{ SumServiceSpace.SumService.set\_defaultSucceededCallback( OnSuccess); // 这一句必须有  // SumServiceSpace.SumService.set\_defaultFailedCallback(OnFailure);    SumServiceSpace.SumService.GetSum( eval(form1.TextBoxA.value), eval(form1.TextBoxB.value), OnSuccess() ); \} function OnSuccess(result)\{ $ get ( " TextBoxSum " ).value = result; \}

在JavaScript中，可以用HTML控件所在的表单名作为前缀，加上该HTML控件的名称来得到这个控件的引用。在本示例中，表单名称为form1，因此通过form1.TextBoxA.value即可得到TextBoxA文本域中的值。  
另外，在本示例中，Web服务的类名为SumService，它定义于SumServiceSpace命名空间中。  
  
特别需要注意的是，在此所使用的从JavaScript中调用Web服务的方法是使用了回调函数思想。其中，OnSuccess即对应这个回调函数，所有对于Web服务方法返回值（result）的操作都是在这里完成的。此外，你还可能已经注意到了Web服务中定义的GetSum方法仅仅接受2个参数，而在JavaScript的调用中却传入了3个参数（其实还有一个，在此省去了）。这个附加的参数正是代表了回调函数的名称，用于指向服务调用成功完成时执行的函数（另一个相应于服务调用超时或出错时执行的回调函数）。显然，这种调用方式将Ajax中异步特性的处理代码隐藏了起来（这不由得我们回想起Win32中大量回调函数的原理及使用方法）。  
在本示例中，按照如下代码编写这个服务调用成功时的回调函数：  
function OnSuccess(result)\{  
$get("TextBoxSum").value=result;  
\}  
  
注意，无论调用成功或超时，Web服务中定义的GetSum方法都将返回一个值，包含在回调函数的result参数中。在本示例中，对于一次成功的请求/响应，result参数将包含经过计算后的两个整数之和。此外，$get("TextBoxSum")相应于DOM编程中常用的document.getElementById("TextBoxSum")，ASP.NET Ajax框架对此作了简化。

（四）调试与运行结果  
按F5运行此示例时，运行结果如图5所示：  
![200732994314.JPG][]  
图5.通过客户端JavaScript调用Web服务示例运行时刻快照。  
  
【疑问】读者在调试时会注意到，在点击图５中按钮出现结果的瞬间会在第三个文本框中先出现一个“Undefined”的字符串，然后才显示结果6912，但目前我也没有找到原因，欢迎朋友们帮助解决。  
  
**三、 小结**  
本文通过一个简单实例介绍了如何使用ASP.NET AJAX 1.0框架对JavaScript以面向对象技术来访问Web服务。同时，我们也领略了该框架提供的脚本库使得JavaScript更易于编写、调试和维护。其实，ASP.NET AJAX 1.0框架还对服务端相关AJAX操作进行了大量高级包装并引入了强有力的服务器端扩展控件。总之，ASP.NET AJAX 1.0框架很有希望成为广大商家基于ASP.NET 2.0平台并利用AJAX技术进行Web开发的首选扩展框架。

[200732994046.JPG]: /images/20220403/94760b4510144961b27355b79cb82902.png
[200732994117.JPG]: /images/20220403/af4f5033b08d4483b3dd8535378c2315.png
[200732994213.JPG]: /images/20220403/c9aa71e9c902476b88820f218c8c3a94.png
[200732994255.JPG]: /images/20220403/aad8b4242d034dd88c4f9127a0f98cea.png
[200732994314.JPG]: /images/20220403/2cbc01ea7be74cd28b80fddc3bcd0ad3.png