WCF揭秘——使用AJAX+WCF服务进行页面开发
AJAX即 “Asynchronous JavaScript and XML”(异步JavaScript和XML),通过 AJAX可使用 JavaScript 与 XMLHttpRequest 对象直接与服务器进行通信。通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,从而避免整个页面的刷新。针对AJAX的长处,从.NET Framework 3.5开始就加大对ASP.NET AJAX的支撑,WCF通过WebScriptE
AJAX即 “Asynchronous JavaScript and XML”(异步JavaScript和XML),通过 AJAX可使用 JavaScript 与 XMLHttpRequest 对象直接与服务器进行通信。通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,从而避免整个页面的刷新。针对AJAX的长处,从.NET Framework 3.5开始就加大对ASP.NET AJAX的支撑,WCF通过WebScriptEnablingBehavior行为来处理页面的请求。下面以一个简单的例子来说明一下:
首先,开发一个数据契约Person
1 namespace Service.Model 2 { 3 [DataContract] 4 publicclass Person 5 { 6 [DataMember] 7 publicint ID 8 { 9 get; 10 set; 11 } 12 [DataMember] 13 publicstring Name 14 { 15 get; 16 set; 17 } 18 [DataMember] 19 publicint Age 20 { 21 get; 22 set; 23 } 24 } 25 }
添加项目,选择“启动了AJAX的WCF服务”。系统使用IIS托管了此服务,然后把代码绑定在PersonService.cs文件内,注意把RequirementsMode设置为AspnetCompatibilityRequirementsModel.Allowed,让页面可以直接调用此对象。
1 <%@ ServiceHost Language="C#" Debug="true" Service="Ucsmy.Service.PersonService" CodeBehind="~/App_Code/PersonService.cs"%> 2 3 4 namespace Ucsmy.Service 5 { 6 [ServiceContract(Namespace ="Ucsmy.Service")] 7 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 8 //注意必须将RequirementsMode设置为AspNetCompatibilityRequirementsMode.Allowed 9 publicclass PersonService 10 { 11 [OperationContract] 12 [WebGet] // 要使用 HTTP GET,请添加 [WebGet] 特性。 13 public IList<Person> GetList() 14 { 15 IList<Person> personList =new List<Person>(); 16 17 Person person1 =new Person(); 18 person1.ID =0; 19 person1.Age =27; 20 person1.Name ="Leslie"; 21 personList.Add(person1); 22 23 Person person2 =new Person(); 24 person2.ID =1; 25 person2.Age =23; 26 person2.Name ="Rose"; 27 personList.Add(person2); 28 29 Person person3 =new Person(); 30 person3.ID =2; 31 person3.Age =29; 32 person3.Name ="Jack"; 33 personList.Add(person3); 34 35 return personList; 36 } 37 } 38 }
添加.config配置文件,注意文件中在endpointBehavior添加了enableWebScript设置,它能启动JSON,并能为PersonService生成客户端的Javascript代理代码。
1 <?xml version="1.0" encoding="utf-8"?> 2 <configuration> 3 <system.web> 4 <compilation debug="true" targetFramework="4.0"> 5 <assemblies> 6 <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> assemblies> compilation> 8 system.web> 9 <system.serviceModel> 10 //启动aspNetCompatibilityEnabled 11 <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true"/> 12 <behaviors> 13 <endpointBehaviors> 14 //启动ServiceAspNetAjaxBehavior行为 15 <behavior name="ServiceAspNetAjaxBehavior"> 16 <enableWebScript /> 17 behavior> 18 endpointBehaviors> 19 <serviceBehaviors> 20 <behavior name="ServiceBehavior"> 21 <serviceMetadata httpGetEnabled="true"/> 22 <serviceDebug includeExceptionDetailInFaults="false"/> 23 behavior> 24 serviceBehaviors> 25 behaviors> 26 <services> 27 <service behaviorConfiguration="ServiceBehavior" name="Ucsmy.Service.PersonService"> 28 <endpoint address="" binding="webHttpBinding" contract="Ucsmy.Service.PersonService" behaviorConfiguration="ServiceAspNetAjaxBehavior"/> 29 <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/> 30 service> 31 services> 32 system.serviceModel> 33 configuration>
在页面添加ScriptManager控件,加上对PersonService服务的引用。值得注意的一点是,在默认情况下通过AJAX调用WCF只支持同一个域名,这是因为受到了Javascript的约束。如果要实现跨域调用,需要客户端改变浏览器的设置,这样使用起来并不现实。
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 </head> 5 <body> 6 <form id="form1" runat="server"> 7 <asp:ScriptManager ID="ScriptManager1" runat="server"> 8 <Services> 9 <asp:ServiceReference Path="PersonService.svc"/> 10 //添加服务引用 11 </Services> 12 </asp:ScriptManager> 13 <script type="text/javascript"> 14 function GetList() { 15 //设定错误处理 16 Ucsmy.Service.PersonService.set_defaultFailedCallback(onError); 17 //设定返回后操作 18 Ucsmy.Service.PersonService.GetList(onComplete); 19 } 20 21 function onComplete(result) { 22 var personList=""; 23 if (result !=null) { 24 for (var n =0; n < result.length; n++) { 25 personList +="ID:"+ result[n].ID +" Name:"+ result[n].Name +" Age:"+ result[n].Age ; 26 } 27 //显示结果 28 alert(personList); 29 } 30 } 31 32 function onError(message) { 33 //显示错误信息 34 alert(message.get_message()); 35 } 36 </script> 37 <div> 38 <label id="label1"></label> 39 <button onclick="GetList()">Button</button> 40 </div> 41 </form> 42 </body> 43 </html>
AJAX前景非常乐观,可以提高系统性能,优化用户界面,提高页面的视觉效果。另外微软也在客户端引入了一套AJAX组件,只需要添加对AjaxControlToolkit.dll文件的引用 ,就可以在控件列表中出现相关控件。