Call the WCF Service using jquery Ajax

Source: Internet
Author: User
Tags http post

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.