Call the WCF Service using jquery Ajax

On the Internet, I often see some questions raised by beginners about how to call the WCF Service in Ajax or using JavaScript. This article will briefly introduce beginners how to call the WCF Service in Ajax or using JavaScript and the precautions. For ease of explanation, we first create a WCF Service. The Service and service data are defined as follows:

// Data contract [datacontract] public class person {[datamember] public int ID {Get; set;} [datamember] public string name {Get; set ;}} // For the WCF Service, in order to make JS calls, you must set aspnetcompatibilityrequirements to allowed or required [servicecontract (namespace = "")] [aspnetcompatibilityrequirements (requirementsmode = require. allowed)] public class personservice {// service function 1 [operationcontract] [webget] public person getoneperson () {return new person {id = 1, name = "cokkiy "};} // service function 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. Let's take a look at the service definition first. To enable Ajax or js to call the service, we must mark the Service's ASPnet compatibility mode as allowed or required. Secondly, the operation contract must be marked as webget or webinvoke. The webget attribute marks an operation that can be called using the http get method, and the webinvoke attribute marks an operation that can be called using the http post method.

Let's take a look at the service configuration file:

<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>

Note that webhttpbinding-based binding must be provided in the configuration file, otherwise it cannot be called from Js. Additionally, servicehostingenvironment must be set to aspnetcompatibilityenabled.

The following shows how to call the WCF Service we just created in JS. We use the Ajax function of jquery.

    <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>

Since we use jquery's Ajax function, the call method is very simple. If you are familiar with jquery Ajax, you will understand it at a Glance. This call method is almost the same as calling other methods, the difference lies in the returned data. Please note that our real data is stored in data. d.

Conclusion: 1) the WCF Service must be marked as aspnetcompatibilityrequirements as alowed or requered.

2) the operation in the service must be marked as webget or webinvoke.

3) webhttpbinding binding must be provided in the service configuration, and the runtime environment of the service must be set to aspnetcompatibilityenabled.

4) The returned data is in attribute D.