Call Web service with jQuery and Parameters

Question

I'm having trouble when calling an ASMX web service through jQuery. I can paste this URL in my browser to get the XML results desired:

http://<serverurl>/WebService/ReportServer.asmx/RowDataWithFilterParamsAndColumnParams?filterParams=EXCAVATION_DIG.EXCAVATION_DIG_INTL_ID%20IN%20(1)&columnParams=Dig_ID|Line|Dig_Type|Dig_Status

I can call the asmx from a Console application like this without no issue:

    HttpWebRequest req = (HttpWebRequest)WebRequest.Create(url);
    req.Credentials = new NetworkCredential("username", "pass");
    req.PreAuthenticate = true;
    HttpWebResponse resp = (HttpWebResponse)req.GetResponse();

    StreamReader sr = new StreamReader(resp.GetResponseStream());
    string results = sr.ReadToEnd();
    sr.Close();

What I'm having trouble with is calling the web service from the client side. What is wrong with my code? I don't get any errors but the success function is not called.

$( document ).ready(function() {

var url = "http://<serverurl>/WebService/ReportServer.asmx/RowDataWithFilterParamsAndColumnParams";
var payload = "{ filterParams : 'EXCAVATION_DIG.EXCAVATION_DIG_INTL_ID%20IN%20(1)',  columnParams : 'Dig_ID|Line|Dig_Type|Dig_Status' }";


    $.ajax({
        type: "POST",
        url: url,
        data: payload, 
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",              
        success: function (data) {
            alert(data); 
        }
    });

});

When I change the data type to "json" I get the error:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

First thing to do is add the error callback to your AJAX function. You need to read the response which holds the error. http://api.jquery.com/jQuery.ajax/

What I suspect you will find is that you are restricted to domain for security purposes. There is still hope and it is called CORS.

http://techblog.constantcontact.com/software-development/using-cors-for-cross-domain-ajax-requests/

Also note the variable "crossDomain" in the ajax function. It must be set to true to enable CORS. Some scenarios will require jsonpcallback due to timing issues.

$.ajax({
        type: "POST",
        url: url,
        data: payload, 
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",            
        crossDomain: true,  
        success: function (data) {
            alert(data); 
        },
        error: function ( jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
            console.log(errorThrown);
            // alert(errorThrown);
        }
    });

Unless you are sure the site allows cross-domain connection which is rare then you may be out of luck. If it expects JSONP (very different from JSON) as you set in your function then do you know the callback function being passed back? Look back at the jQuery API more carefully. There is a lot of details you must understand for this type of connection.