WCF简单教程(10) Ajax调用

2022-04-19 00:35:21

第十篇：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. 

  2. using System.ServiceModel; 
    3. 

  3.  
    4. 

  4. namespace WebServer 
    5. 

  5. { 
    6. 

  6.     [ServiceContract] 
    7. 

  7.     public interface IDataService 
    8. 

  8.     { 
    9. 

  9.         [OperationContract] 
    10. 

  10.         User GetUser(); 
    11. 

  11.     } 
    12. 

  12. } 
    13. 



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




    

  1. using System; 
    2. 

  2. using System.ServiceModel; 
    3. 

  3.  
    4. 

  4. namespace WebServer 
    5. 

  5. { 
    6. 

  6.     public class DataService : IDataService 
    7. 

  7.     { 
    8. 

  8.         public User GetUser() 
    9. 

  9.         { 
    10. 

  10.             return new User { Name = "BoyTNT", Age = 30 }; 
    11. 

  11.         } 
    12. 

  12.     } 
    13. 

  13. } 
    14. 



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




    

  1. using System; 
    2. 

  2. using System.Runtime.Serialization; 
    3. 

  3.  
    4. 

  4. namespace WebServer 
    5. 

  5. { 
    6. 

  6.     [DataContract] 
    7. 

  7.     public class User 
    8. 

  8.     { 
    9. 

  9.         [DataMember] 
    10. 

  10.         public string Name { get; set; } 
    11. 

  11.         [DataMember] 
    12. 

  12.         public int Age { get; set; } 
    13. 

  13.     } 
    14. 

  14. } 
    15. 



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




    

  1. <system.serviceModel> 
    2. 

  2.     <behaviors> 
    3. 

  3.         <serviceBehaviors> 
    4. 

  4.             <behavior name="WebServer.DataServiceBehavior"> 
    5. 

  5.                 <serviceMetadata httpGetEnabled="true" /> 
    6. 

  6.             </behavior> 
    7. 

  7.         </serviceBehaviors> 
    8. 

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

  9.         <endpointBehaviors> 
    10. 

  10.             <behavior name="AjaxBehavior"> 
    11. 

  11.                 <enableWebScript/> 
    12. 

  12.             </behavior> 
    13. 

  13.         </endpointBehaviors> 
    14. 

  14.     </behaviors> 
    15. 

  15.     <services> 
    16. 

  16. 
        <service behaviorConfiguration="WebServer.DataServiceBehavior"  name="WebServer.DataService"> 

    17. 

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

  18.             <endpoint address="" binding="webHttpBinding" contract="WebServer.IDataService" behaviorConfiguration="AjaxBehavior" /> 
    19. 

  19.         </service> 
    20. 

  20.     </services> 
    21. 

  21. </system.serviceModel> 
    22. 





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. 

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

  3. <head> 
    4. 

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

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

  6.     <script language="javascript"> 
    7. 

  7. 
     function executeAjaxQuery() { 

    8. 

  8. 
         $.ajax({ 

    9. 

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

  10.             "cache": false, 
    11. 

  11.             "async": true, 
    12. 

  12.             "type": "POST", 
    13. 

  13.             "dataType": "json", 
    14. 

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

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

  16.             success: function (json) { 
    17. 

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

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

  19.             }, 
    20. 

  20.             error: function (x, e) { 
    21. 

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

  22.             } 
    23. 

  23.         }); 
    24. 

  24. 
     }  

    25. 

  25.     </script> 
    26. 

  26. </head> 
    27. 

  27. <body> 
    28. 

  28.  
    29. 

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

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

  31. </body> 
    32. 

  32. </html> 
    33. 



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




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


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


 


     本文转自 BoyTNT 51CTO博客，原文链接：http://blog.51cto.com/boytnt/857350，如需转载请自行联系原作者









上一篇：阿里云带宽计费模式按固定宽带和按使用流量区别对比及选择方法

下一篇：2020营销行业会发生什么？