Dojo + WCF [Part 1] That several months, I had a discussion on SOA with Christophe and especially how to implement them with the Framework (Ajax) Javascript. At the time it starts an overhaul of his personal gallery
LCCFamilly
and wanted it to be full Ajax.
On the same principle, I am here today to show you how to query a WCF WebService -
from the Dojo Framework -
; Let a service which gives us the time and current date formatted according to locale server. It begins by declaring the interface of our service.
[ServiceContract (Namespace = "http://www.devolis.com/2009/04/WCFDOJO")] public interface
IClockService [WebInvoke (Method = "POST")] string
getTime ();}
Note the use of the POST verb, should be avoided like the plague GET verb if you use Internet Explorer as your Web Service client. Indeed, management of the cache, because it makes only the first call, then simply return what it has cached. Then go the actual implementation to service
/ / / AspNetCompatibilityRequirements is only useful if the webservice is host in IIS
[AspNetCompatibilityRequirements (RequirementsMode AspNetCompatibilityRequirementsMode.Allowed =)] public class
ClockService: IClockService
{public string
getTime () {
return DateTime.Now.ToString ();}
}
Ok, this time, you can already test the WebService in quickly creating a console project and adding a WebReference on it ... I'll let you do your side :)
Taking our web page:
\u0026lt;! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD / xhtml1-transitional.dtd ">
\u0026lt;html xmlns="http://www.w3.org/1999/xhtml">
\u0026lt;head>
\u0026lt;title> WCF & Dojo \u0026lt;/ title>
src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.0/dojo/dojo.xd.js" \u0026lt;script type="text/javascript"> \u0026lt;/ script>
\u0026lt;script type="text/javascript">
dojo.require('dojo.parser');
</script>
<script type="text/javascript">
function GetTime() {
dojo.xhrPost({
url: "ClockService.svc/GetTime",
handleAs: "text",
contentType: "application/json; charset=utf-8",
load: function(response, ioArgs) {
dojo.byId('ServerTime').innerHTML = dojo.fromJson(response).d;
return response;
},
error: function(response, ioArgs)
{alert ("Error:" + ioArgs.xhr.status)
return response;}
});}
\u0026lt;/ script>
\u0026lt;/ head>
\u0026lt;body onload = " GetTime ();">
\u0026lt;input type = "button" value = "Time?" onclick = "getTime ();" / / /> \u0026lt;div
id="ServerTime"> \u0026lt;/ div>
\u0026lt;/ body>
\u0026lt;/ html>
As you can see, the code is quite concise. After having declared the use of Dojo 1.3 from the NDC
Google
, I declared a function getTime () which through a
XmlHttpRequest (XHR) will ask the WebService to return the current DateTime the data are expected as
Json
. You will also notice
building the url of appeal is the name of the service followed by the name of the method.
If you now run the web page, you'll receive an http error 405. Indeed, for the moment Dojo and WCF do not yet speak the same language. Dojo JSON and spoke in WCF Soap
... we will have to configure the service.
Here's the whole ServiceModel you find in your web.config or app.config depending on the type of project chosen.
\u0026lt;system.serviceModel> \u0026lt;behaviors> \u0026lt;serviceBehaviors> \u0026lt;behavior name="MetaDataBehavior"> \u0026lt;serviceMetadata httpGetEnabled="true"
/> \u0026lt;/ Behavior>
\u0026lt;/ serviceBehaviors>
\u0026lt;endpointBehaviors> \u0026lt;Behavior name="ClockServiceBehavior"> <enableWebScript/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<service name="WCF_TEST.ClockService" behaviorConfiguration="MetaDataBehavior">
<endpoint address=""
behaviorConfiguration="ClockServiceBehavior"
binding="webHttpBinding"
name="ClockService"
contract="WCF_TEST.IClockService"/>
\u0026lt;/ service>
\u0026lt;/ services>
\u0026lt;/ system.serviceModel>
The main difference with the standard configuration is at the level of binding of the endpoint. The default binding is defined as
wsHttpBinding
(soap messages) Speaking Json we must choose the binding
webHttpBinding
(JSON).
Voila, restart the web ... tadam ... it's magic.
In the next part of this article I shall try to show you how to avoid having to write blocks of javascript xhrPost through
dojo.rpc
Christopher, you're more than to rewrite LCCFamily:)