用JQuery AJAX調用WCF服務

在網路上經常看到一些初學者提問怎麼在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中。