Cannot complete a JSONP call from jQuery to WCF

Question

Okay, I am trying (poorly) to successfully make a JSONP call from jQuery on a test page to a WCF web service running locally, as a cross-domain call. I have, at one point or another, either gotten a 1012 URI denied error, gotten a response but in Xml, or just had no response at all. Currently, the way I have it configured it spits back a 1012.

I did not write this web service, so it is entirely possible that I am just missing a configuration setting somewhere, but I've become so frustrated with it that I think just asking on here will be more productive. Thanks guys. Details below.

I have a WCF web service with the following method:

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public decimal GetOrderStatusJson(int jobId)

I am trying to call this method from a jQuery test page, via a cross-domain JSONP call.

<script type="text/javascript">
    getJsonAjaxObject(
    "http://localhost:3960/ProcessRequests.svc/json/GetOrderStatusJson",
    { "jobId": 232 });


    function getJsonAjaxObject(webServiceUrl, jsonData) {
        var request = {
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: webServiceUrl,
            data: jsonData,
            dataType: "jsonp",
            success: function(msg) {
                //success!
                alert("blah");
            },
            error: function() {
                //oh nos
                alert("bad blah");
            }
        };


        $.ajax(request);
    }
</script>

Below are the chunks of the web.config I configure for this purpose:

<services>
    <service behaviorConfiguration="MWProcessRequestWCF.ProcessRequestsBehavior"
     name="MWProcessRequestWCF.ProcessRequests">
        <endpoint address="json" behaviorConfiguration="AspNetAjaxBehavior"
         binding="webHttpBinding" contract="MWProcessRequestWCF.IProcessRequests" />
        <endpoint address="" binding="wsHttpBinding" contract="MWProcessRequestWCF.IProcessRequests">
            <identity>
                <dns value="localhost" />
            </identity>
        </endpoint>
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
    </service>
</services>
<behaviors>
    <serviceBehaviors>
        <behavior name="MWProcessRequestWCF.ProcessRequestsBehavior">
            <serviceMetadata httpGetEnabled="true"/>
            <serviceDebug includeExceptionDetailInFaults="false"/>
        </behavior>
    </serviceBehaviors>
    <endpointBehaviors>
        <behavior name="AspNetAjaxBehavior">
            <enableWebScript/>
        </behavior>
    </endpointBehaviors>
</behaviors>

Answer 1

[ScriptMethod] is for ASMX web services, not for WCF.

Answer 2

I have just had the exact same issue. I will post some code later however this may help you if you can use ado.net data services. Link

Answer 3

In order to get JSONP to work with jQuery, you'll need to specify your callback like this:

"myurl?callback=?" (jquery documentation here)

Also, the webservice will need to wrap its response with the javascript call. Example: ServiceName.svc/MethodName?jscallback=mycallback

would return

mycallback(JSON STRING);

When I had to implement something like this, I wrote an HttpModule that would watch incoming requests for the "jscallback" querystring key. If the callback was specified in the querystring, then the HttpModule would attach a custom response filter to "wrap" the json as shown above.

Answer 4

Hi I have followed the steps to resolving cross domain issue using jsonp on rest wcf service. This is my function in wcf service

[OperationContract]

   [WebInvoke(ResponseFormat = WebMessageFormat.Json)]
    res[] GetBooth(res ss);

[DataContract]
public class res
{
    [DataMember]
    public string title { get; set; }

    [DataMember]
    public string desc { get; set; }

}

public res[] GetData(res val ) {
List ress = new List(); return ss.title; return ress.ToArray(); } Now I want to pass function parameter while calling from client as class objects. function GetData() {

var reqParams = {
    title: "hello"
};
var reqParams_Serialized = Sys.Serialization.JavaScriptSerializer.serialize(reqParams);
$.ajax({
    type: "Post",
    cache: false,
    url: "http://localhost:50933/test.svc/jsonp/getdata ",
    scriptCharset: "utf-8",
    contentType: 'application/json;charset=utf-8',
    dataType: "json",
    data: reqParams,
    success: function(data, textStatus) {
        alert(data);

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert('error');
    }
});

}}

But when pass parameters like this it is not working. Please suggest me something with example or modification in this code.

Thanks Parveen Punia