用jQuery AJAX調用WCF服務

作者: cokkiy 來源: 博客園發布時間: 2009-10-23 10:14 閱讀: 11064 次推薦: 4 原文鏈接 [收藏]

　　在網絡上經常看到一些初學者提問怎么在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.PersonServiceAspNetAjax
Behavior" 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 Personbutton>
       <button id="getPersons" type="button">Get Personsbutton>
    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>