Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Calling WCF service exposed with different bindings in JQuery

, 10 Jan 2012
Rate this:
Please Sign up or sign in to vote.
The article illustrates how to call differently exposed Windows Communication Foundation services from JQuery.

Introduction

The article illustrates how to call differently exposed Windows Communication Foundation services from JQuery. Here we will expose a WCF service with three different bindings (webHttpBinding, basicHttpBinding and wsHttpBinding) and consume the same in a Client application using JQuery.

Implementing a WCF Service Different with Bindings

First let's create a WCF service which exposes three different endpoints with different bindings. The service consists of a single method GetData(). Go through my previous article Reusing WCF service across several applications using different bindings in order to understand the steps of creating a WCF service with different bindings.

The final Interface definition of the service is as follows:

image001.gif

The service implementation is as follows:

image002.gif

The web.config file exposing the different bindings is as follows:

image003.gif

Once you are done with the development of WCF service, Right click -> View in Browser on the file MyService.svc in order to check the WSDL generated by the WCF service.

Consuming the Service Exposed with webHttpBinding in JQuery

This is the ideal binding in a WCF service for JQuery consumption. Create a new empty ASP.NET project and add a webForm Webpage.aspx. Place three HTML buttons on the form.

image004.gif

image005.gif

Now implement the client code in JQuery. First include the JQuery library. The library can be linked accessing Microsoft CDN. You can also create a “Script” folder in your project and put the jquery-1.5.1.min.js file physically.

<script type="text/javascript" 
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script> 

Add the following line in the script in order to avoid cross-site transport error while you are linking your JQuery file accessing Microsoft CDN:

//For avoiding "No- Transport" error
//force cross-site scripting (as of jQuery 1.5)
jQuery.support.cors = true;

Now call the service method exposed in a REST way, using the JQuery script. In REST, we can pass parameter value of service methods using query string and generating GET, POST, PUT, DELETE request. Here our service will be called using a HTTP get request. To consume a service in JQuery, you can use JQuery.ajax() method of the library.

image006.gif

The above code sends a request to the service settings different values in the call.

Get the service URL by Right click -> View in Browser on the file MyService.svc and check the port while calling the service. The port in sample might mismatch with your local implementation.

Run the Web application and click on the “Call REST WCF using JQuery” button. You will get values returned by the service.

image007.gif

Consuming the Service Exposed with basicHttpBinding in JQuery

Now let’s try to call the service method exposed using “basicHttpBinding”. For this, we need to form a SOAP request for the “basicHttp” endpoint of the service. We need to format the request exactly as a WCF client would do. We will take the help of WCF Test Client in order to generate the request.

Go to WCF service project, select the MyService.svc file and press F5. In the WCF Test client, select the GetData method exposed by the “basisHttp” endpoint and set a value to the request. Select the XML tag in order to find the formatted SOAP request. Copy the selected section from the request:

image008.gif

We will POST this SOAP request from our JQuery code. For this, we need to form the copied request in our JQuery code:

image009.gif

Also for BasicHttpBinding requests, SOAPAction header is required to be set in the HTTP request using beforeSend function. That will define which operation should receive the message. The SOAPAction header can be found in the WSDL generated by the WCF service. The following code in JQuery POSTs SOAP request to the service exposed through “basicHttpbinding”:

image010.gif

On the successful return of the request, the response XML is being parsed and the output is displayed. In order to get idea about the response XML call the method from WCF Test Client and check the response XML.

Run the Web application and click on the “Call BasicHttp binded WCF using JQuery” button. You will get values returned by the service.

image011.gif

Consuming the Service Exposed with wsHttpBinding in JQuery

We could have called the service method exposed using “wsHttpBinding” binding in the same way as we did above (just sending the SOAP request formed by the WCF Test client for the wsHttpBinding endpoint). But there is a major concern. A service exposed with “wsHttpBinding” binding implements WS-Security of WS-* family of web service specifications. As the binding uses security, the request will be rejected. The service cannot be called without implementing WS-Security at JQuery end. So, in order to call the service method, we have to compromise with the security. Now, if there is an existing service in place, we cannot disable security at WCF service end, as it will affect existing consumers. For this, we can expose a new non-secure “wsHttp” endpoint exclusively for JQuery consumption.

Exposing a Non-secure “wsHttp” Endpoint

image012.gif

For exposing a non-secure endpoint, we need to customize the “wsHttpbinding” with the “security mode” to “none” and use the same in a new endpoint.

image013.gif

Now we will access this new endpoint from JQuery. Construct the SOAP request using after accessing the endpoint from WCF Test Client. We need to POST this request from JQuery.

Modify the SOAP request with a "To" header with addressing information for the endpoint.

We need to modify the content type to “application/soap+xml” in the calling code, as “wsHttpBinding” uses SOAP 1.2. The following code in JQuery POSTs SOAP request to the service exposed through “wsHttpbinding”.

image014.gif

On the successful return of the request, the response XML is being parsed and the output is displayed. In order to get an idea about the elements in the response XML while parsing, call the method from WCF Test Client and check the response XML.

Run the Web application and click on the “Call WsHttp binded WCF using JQuery” button. You will get values returned by the service.

image015.gif

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kausik J. Nag
Architect
India India
No Biography provided

Comments and Discussions

 
QuestionHow to call POST (WebInvoke) method from jquery with wsHttpBinding PinmemberAvinash647416-Jul-13 19:16 
QuestionHow do I call a WCF Rest Service deployed in Azure and secured using ACS? Pinmembermayurparmar0230-Apr-13 11:52 
QuestionAccess is denied. Pinmemberravi leeladhar22-Mar-13 11:04 
QuestionThis Article not working on google chrome and firefox, Give a Solution for this......... Pinmembershikhadotnet29-Nov-12 2:04 
AnswerRe: This Article not working on google chrome and firefox, Give a Solution for this......... PinmemberKausik J. Nag3-Jan-13 20:27 
GeneralRe: This Article not working on google chrome and firefox, Give a Solution for this......... PinmemberEdo999_8231-Mar-14 22:31 
QuestionHow can I implement WS-Security at JQuery end? Pinmemberdorcohen86-Nov-12 1:04 
AnswerRe: How can I implement WS-Security at JQuery end? PinmemberKausik J. Nag20-Dec-12 19:03 
QuestionNot work with firefox or chrome PinmemberM Shaban2-Jul-12 9:21 
GeneralA good introductory article. PinmemberSomPoddar11-May-12 10:58 
QuestionVery usfull article PinmemberAvinash647410-May-12 2:43 
QuestionGood publication PinmemberNuren Geodakov27-Apr-12 5:23 
GeneralMy vote of 5 PinmemberNuren Geodakov27-Apr-12 5:22 
Question"Method Not Allowed" PinmemberAleksandra Czajka16-Apr-12 0:15 
I keep getting "Method not allowed." when I ajax with jQuery from my client site. I can call the web service with the web binding just fine from a web browser. Returns what I want. However, whatever I try, whether it's from localhost or not, it's all "Method not allowed.". Could this be something with settings in client web.config?
AnswerRe: "Method Not Allowed" PinmemberAndrew VM31-May-12 8:37 
GeneralRe: "Method Not Allowed" Pinmemberalxbglez19-Jul-12 14:00 
GeneralThanks Pinmembersluaghtered8-Apr-12 5:19 
QuestionAdding multiple service methods PinmemberRB@Emphasys29-Mar-12 3:51 
AnswerRe: Adding multiple service methods PinmemberJean Val Jean29-Mar-12 5:27 
GeneralRe: Adding multiple service methods PinmemberRB@Emphasys29-Mar-12 7:51 
GeneralRe: Adding multiple service methods PinmemberJean Val Jean30-Mar-12 3:28 
GeneralMy vote of 1 PinmemberLazar Videnov5-Feb-12 10:04 
GeneralMy vote of 4 PinmemberMember 305426617-Jan-12 19:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 10 Jan 2012
Article Copyright 2012 by Kausik J. Nag
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid