用JQuery AJAX调用WCF服务

网络整理 - 07-27

  在网络上经常看到一些初学者提问怎么在AJAX中或用Javascript调用WCF服务,本文将简要给初学者介绍如何在AJAX中或用Javascript调用WCF服务以及注意事项。为了便于讲解,我们首先创建一个WCF服务,服务和服务数据定义如下:

  //数据契约

  [DataContract]

  public class Person

  {

  [DataMember]

  public int ID { get; set; }

  [DataMember]

  public string Name { get; set; }

  }

  //WCF服务,为了能使js调用,必须设置AspNetCompatibilityRequirements为Allowed或Required

  [ServiceContract(Namespace = "")]

  [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

  public class PersonService

  {

  //服务功能1

  [OperationContract]

  [WebGet]

  public Person GetOnePerson()

  {

  return new Person { ID = 1, Name = "cokkiy" };

  }

  //服务功能2

  [OperationContract]

  [WebGet]

  public List<Person> GetPorsons(int id, string name)

  {

  return new List<Person>() { new Person { ID=1,Name="cokkiy"},

  new Person { ID=id,Name=name} };

  }

  }

  Ok,我们先看一下服务定义,为了使AJAX或JS调用服务,必须标记服务的AspNet兼容模式为Allowed或Required。其次,操作契约必须标记为WebGet或WebInvoke,WebGet属性标记了一个可以用http get方法调用的操作,而WebInvoke属性标记了一个可以用http post方法调用的操作。

  再来看服务配置文件:

  <system.serviceModel>

  <behaviors>

  <endpointBehaviors>

  <behavior name="AjaxWCFWeb.Services.PersonServiceAspNetAjaxBehavior">

  <enableWebScript/>

  </behavior>

  </endpointBehaviors>

  </behaviors>

  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>

  <services>

  <service name="AjaxWCFWeb.Services.PersonService">

  <endpoint address="" behaviorConfiguration="AjaxWCFWeb.Services.PersonServiceAspNetAjaxBehavior" binding="webHttpBinding"

  contract="AjaxWCFWeb.Services.PersonService"/>

  </service>

  </services>

  </system.serviceModel>

  这里注意,配置文件中,必须提供基于webHttpBinding的绑定,否则就不能从js中调用。并且,必须设置serviceHostingEnvironment 为aspNetCompatibilityEnabled

  下面来看如何在js中调用我们刚才创建的WCF服务,我们用JQuery的ajax功能。

  <p>

  <button id="getOnePerson" type="button">Get One Person</button>

  <button id="getPersons" type="button">Get Persons</button>

  </p>

  <script type="text/javascript">

  $(document).ready(function() {

  $('#getOnePerson').click(function() {

  $.getJSON("/Services/PersonService.svc/GetOnePerson", {}, function(data) {

  alert("ID:" + data.d.ID + " Name:" + data.d.Name);

  });

  });

  $('#getPersons').click(function() {

  $.getJSON("/Services/PersonService.svc/GetPorsons", { id: 100, name: "from clent" }, function(data) {

  alert(data.d.length);

  for (var i = 0; i < data.d.length; i++) {

  alert("ID:" + data.d[i].ID + " Name:" + data.d[i].Name);

  }

  });

  });

  });

  </script>

  由于我们用的是JQuery的AJAX函数,因此调用方式非常简单,熟悉JQuery AJax的朋友一看就明白了,这种调用方式跟调用其他方法几乎完全一样,差别在于返回的数据,请注意我们真正的数据在data.d中。

  总结:1)WCF服务必须标记为AspNetCompatibilityRequirements为Alowed或Requered。

  2)服务中的操作(Operation)必须标记为WebGet或WebInvoke。

  3)服务配置中必须提供webHttpBinding绑定,并设置服务的运行环境为aspNetCompatibilityEnabled。

  4)返回的数据在属性d中。