WCF简单教程(10) Ajax调用

第十篇:Ajax调用WCF

好久不更新了,今天写一写如何用Ajax调用WCF服务。在WebService时代,只需要加一行[System.Web.Script.Services.ScriptService]就可以使用Ajax调用了(要求.Net 3.5),到了WCF中,要稍微复杂一些。

写个小DEMO,这回是基于IIS建一个WCF工程,服务端是一个DataService.svc文件,客户端我们自己写一个Client.htm。

1、服务端

定义服务契约,没什么新鲜的,只有一个GetUser方法。(IDataService.cs)

   
   
   
   
  1. using System;

  2. using System.ServiceModel;

  3. namespace WebServer

  4. {

  5.    [ServiceContract]

  6. publicinterface IDataService

  7.    {

  8.        [OperationContract]

  9.        User GetUser();

  10.    }

  11. }

实现类也超级简单,返回一个User对象。(DataService.svc.cs)

   
   
   
   
  1. using System;

  2. using System.ServiceModel;

  3. namespace WebServer

  4. {

  5. publicclass DataService : IDataService

  6.    {

  7. public User GetUser()

  8.        {

  9. returnnew User { Name = "BoyTNT", Age = 30 };

  10.        }

  11.    }

  12. }

其中的User是数据契约,只有两个成员。(User.cs)

   
   
   
   
  1. using System;

  2. using System.Runtime.Serialization;

  3. namespace WebServer

  4. {

  5.    [DataContract]

  6. publicclass User

  7.    {

  8.        [DataMember]

  9. publicstring Name { get; set; }

  10.        [DataMember]

  11. publicint Age { get; set; }

  12.    }

  13. }

然后是重点的Web.config文件了,要启用Ajax访问,需要对endpoint进行一下特殊声明(绿色注释部分)。下面只节选了system.serviceModel节点。

   
   
   
   
  1. <system.serviceModel>

  2. <behaviors>

  3. <serviceBehaviors>

  4. <behaviorname="WebServer.DataServiceBehavior">

  5. <serviceMetadatahttpGetEnabled="true"/>

  6. </behavior>

  7. </serviceBehaviors>

  8. <!--增加一个endpoint的Behavior,命名为AjaxBehavior,为其下加一个enableWebScript节点,表示允许使用脚本访问-->

  9. <endpointBehaviors>

  10. <behaviorname="AjaxBehavior">

  11. <enableWebScript/>

  12. </behavior>

  13. </endpointBehaviors>

  14. </behaviors>

  15. <services>

  16. <servicebehaviorConfiguration="WebServer.DataServiceBehavior"name="WebServer.DataService">

  17. <!--使用webHttpBinding,并且标明使用上面定义的AjaxBehavior-->

  18. <endpointaddress=""binding="webHttpBinding"contract="WebServer.IDataService"behaviorConfiguration="AjaxBehavior"/>

  19. </service>

  20. </services>

  21. </system.serviceModel>


2、客户端

在工程里加一个Client.htm,注意ajax请求不能跨域,因此必须和服务端放到一块儿。我这里使用了jquery来进行ajax访问。

   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

  3. <head>

  4.    <title>接口测试程序</title>

  5.    <script language="javascript" src="jquery-1.4.2.js"></script>

  6.    <script language="javascript">

  7. function executeAjaxQuery() {

  8.        $.ajax({

  9. "url": "DataService.svc/GetUser",    //注意访问的url的写法,是服务名+方法名,这点和WebService是一致的

  10. "cache": false,

  11. "async": true,

  12. "type": "POST",

  13. "dataType": "json",

  14. "contentType": "application/json; charset=utf-8",

  15. "data": {},         //如果有参数,在这里传递

  16.            success: function (json) {

  17. //结果被封装到json.d属性中,数据契约中定义的两个成员都能取到

  18.                $("#result").val("Name=" + json.d.Name + ", Age=" + json.d.Age);

  19.            },

  20.            error: function (x, e) {

  21.                $("#result").val(x.responseText);

  22.            }

  23.        });

  24.    }

  25.    </script>

  26. </head>

  27. <body>

  28. <input type="button" value="获取用户" onclick="executeAjaxQuery()" /><br />

  29. <textarea id="result" style="width:400px;height:200px"></textarea>

  30. </body>

  31. </html>

OK,运行一下,在结果窗口里应该能收到“Name=BoyTNT, Age=30”。如果抓一下包,能看到服务端返回的内容是:

   
   
   
   
  1. {"d":{"__type":"User:#WebServer","Age":30,"Name":"BoyTNT"}}

这就是为什么要从json.d中取数据的原因。



你可能感兴趣的:(WCF)