Over the last week or so I have been playing around with a simple WCF service to send and receive data from JavaScript using JQuery. I thought that this would be a lot easier than I found it. The other interesting thing I found is that a few people seem to have had trouble getting the two to connect and work. When I set up a standard Service in Visual Studio 2010. I thought it would be easy. You would just use the $.ajax to send through the request and wait for an answer from the service. Now this is probably due to the fact that I am not familiar with WCF, but I thought it would be simple. Well I found that a few things did not work. So What I have done is created a simple project based in MVC 3 (not that that even matters, Since there is only one page on the website), and a service.
So these are my steps to getting JQuery to talk to a WCF service.
Start this off by creating a new project. It can be Web forms or MVC application. The application type is not the most important part. As long as it is a web style project.
Creating the Service
Once you have created a solution, add a new WCF service to the project.
When I created the service, I added it to a service folder to keep it separate from the the rest of the web project, I find it makes it easy to find if there are any changes that need to be made. There should three files in the folder, an interface, the svc service and the service code behind.
DISCLAIMER: I had a lot of issue getting the service to work with the interface. I found that when I deleted it and just worked with the service it worked. I am not saying that it will not work with the interface. I just could not get it to work. So if anyone has information on how to get it working, please let me know.
So before I started trying to connect the JavaScript to the service I went to the service page to make sure it was working the way I expected. You should get the following page:
I found this useful since any errors will be shown and may save you a lot of hassle before trying to connect the JavaScript. One thing to note is that you need to have at least one method or operation contract or the service will return an error. There should be one by default when you create the service. If you have deleted the interface remember to add the [OperationContract] onto the method before checking to see the service works.
There are some changes needed to make the service work:
Connecting With JavaScript
This was the easiest part for me. There are two methods that I used here: The first obviously was JQuery. I used the $.ajax to call the WCF service. You can find the JQuery documentation on the Ajax call here : JQuery Page. The Basic format is this:
$.ajax({
url: url, //Url of the Service
type: “POST”, //Type of ajax call
data: JSON2.stringify({ value: “value” }), //Data to send
processData: true,
contentType: “application/json”, //Type of data being sent
timeout: 10000,
dataType: “json”,
success: function (response, status) { //Success Callback
//Do Something cool here
}
},
error: function (request, textStatus, error) { //Error callback
alert(“An unexpected error occured”);
}
}
);
The second thing I use is the json library. This can be found at http://www.JSON.org/. The method I use here is stringify. This converts a JavaScript object to a Json string.
JsonP
I would like to take the time to look into Jsonp. Normally you are not allow cross domain calls using normal json. Jsonp stands for json with padding. The way this works is by wrapping the json response in script tags. The way this works is that when you call the sever, you add a jsonp at the end of the url i.e. www.url.com?jsonp=callback. When the server responds to the call, it will wrap the json response in the method call you specified. So in this example, the response would be callback({ “property” : “valueDefined” });
When you implement the callback function all you would do is call the callback method in the following way:
function callback(jsonObject){
//Do clever stuff here
}
BUT be warned. This can mean that the service can inject malicious code into browser. So be careful when using this approach.
Recent Comments