Call WCF service method from javascript (jQuery)

In Advanced Tic Tac Toe we have created WCF backend service and web-based frontend application. Our web application written in javascript, so we want to call WCF service methods through jQuery.

There is a small instruction how-to call WCF service from javascript code.

First of all you should decorate your service interface with WebInvoke attribute

[OperationContract]
[WebInvoke(UriTemplate = "Start",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           Method = "POST",
           BodyStyle = WebMessageBodyStyle.Wrapped)]
ComplexType Start(Guid gameId, ComplexType2 type);

Then you should add following endpoint to your web/application.config:

<endpoint address="/rest" binding="webHttpBinding" contract="TicTacToe.Service.Interfaces.ITicTacToeService" behaviorConfiguration="restBehavior" />
<endpointBehaviors>
   <behavior name="restBehavior">
    <webHttp />
  </behavior>
</endpointBehaviors>

Now, if yout service is available through http://your.site.som/Service.svc address your could call your method by http://your.site.som/Service.svc/rest/Start url.

To invoke this method you should use following jQuery ajax method call:

$.ajax({
	url: "Service.svc/rest/Start",
	type: "POST",
	dataType: "json",
	contentType: "application/json",
	data: JSON.stringify({ gameId: "{3ecb9d7b-f5a2-4a3e-b59f-896391d77829}",  type: {ComplexType2Prop: 100500}},
	success: function(result) {
		var test = result.StartResult.ComplexTypeProperty;
	}
});

Thats all, thanks ;)