WCF + JSONP

How to call a WCF service running on one server from the dojo web application hosted on another server? Use JSONP.

Thanks to http://www.gutgames.com/ this was a fairly painless process.

First I had to create the WCF service:

    public class JsonServices : IJsonServices
    {
        [WebGet(ResponseFormat=WebMessageFormat.Json)]
        public string Echo(string value)
        {
            return value;
        }
    }

Then I had to make my web.config changes:

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web>
  <system.serviceModel>
    <services>
      <service name="Dojo16.services.JsonServices" behaviorConfiguration="JsonServicesBehavior">
        <endpoint address="" binding="webHttpBinding" contract="Dojo16.services.IJsonServices" behaviorConfiguration="JsonServicesBehavior" bindingConfiguration="JsonServicesBinding"/>
      </service>
    </services>
    <bindings>
      <webHttpBinding>
        <binding name="JsonServicesBinding" crossDomainScriptAccessEnabled="true"></binding>
      </webHttpBinding>
    </bindings>
    <behaviors>
      <serviceBehaviors>
        <behavior name="JsonServicesBehavior">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
        <behavior name="">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="JsonServicesBehavior">
          <webHttp/>
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
  </system.serviceModel>
</configuration>

Finally, I had to test if from a browser:

<div id="workArea">Hello World!</div>
    <script type="text/javascript">
        var djConfig = { parseOnLoad: true };
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
    <script type="text/javascript">
        dojo.require("dojo.string");
        dojo.require("dojo.io.script");
        dojo.ready(function () {
            dojo.byId("workArea").innerHTML = dojo.string.substitute("<b>Hello ${0}!</b>", ["Dojo"]);
            var targetNode = dojo.create("div", { innerHTML: "Target" });
            dojo.place(targetNode, "workArea", "after");
            var jsonpArgs = {
                url: "http://localhost:64290/Infor/Quiz/services/JsonServices.svc/Echo",
                callbackParamName: "callback",
                content: {
                    value: "dojo toolkit"
                },
                load: function (data) {
                    targetNode.innerHTML = "<pre>" + dojo.toJson(data, true) + "</pre>";
                },
                error: function (error) {
                    targetNode.innerHTML = "An unexpected error occurred: " + error;
                }
            };
            setTimeout(function () {
                dojo.io.script.get(jsonpArgs);
            }, 2000);
        });
    </script>

Links
http://www.gutgames.com/post/Enabling-JSONP-in-WCF.aspx