绵阳梓潼网站制作公司

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.  
  4. namespace WebServer 
  5. { 
  6.     [ServiceContract] 
  7.     public interface IDataService 
  8.     { 
  9.         [OperationContract] 
  10.         User GetUser(); 
  11.     } 
  12. } 

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

  1. using System; 
  2. using System.ServiceModel; 
  3.  
  4. namespace WebServer 
  5. { 
  6.     public class DataService : IDataService 
  7.     { 
  8.         public User GetUser() 
  9.         { 
  10.             return new User { Name = "BoyTNT", Age = 30 }; 
  11.         } 
  12.     } 
  13. } 

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

  1. using System; 
  2. using System.Runtime.Serialization; 
  3.  
  4. namespace WebServer 
  5. { 
  6.     [DataContract] 
  7.     public class User 
  8.     { 
  9.         [DataMember] 
  10.         public string Name { get; set; } 
  11.         [DataMember] 
  12.         public int Age { get; set; } 
  13.     } 
  14. } 

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

  1.  
  2.      
  3.          
  4.              
  5.                  
  6.              
  7.          
  8.          
  9.          
  10.              
  11.                  
  12.              
  13.          
  14.      
  15.      
  16.          
  17.              
  18.              
  19.          
  20.      
  21.  


2、客户端

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

  1.  
  2.  
  3.  
  4.     接口测试程序 
  5.      
  6.      
  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.      
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  

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

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

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

 


文章题目：WCF简单教程(10)Ajax调用
链接URL：http://myzitong.com/article/pjeshh.html

其他资讯