Question

I am doing an ajax call using jquery to get data in json format. the success callback function is called but the data is empty.

$(document).ready(function () {
    $.ajax({
        url: "http://apps.sungardhe.com/StudentResearch/public/Research.svc/Schools",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: cbSchools
    });
});

function cbSchools(data) {
    if (data == null) {
        alert("data is null");
        return;
    }
    for (var school in data) {
        $("#ddSchool").append("<option value='" + data[school].ShortName + "'>" + data[school].ShortName + "</option>");
    }
}

using fiddler I see that the response is actually returning the json data but for some reason the jquery result object is null. can anyone tell me why?

Answer 1

You’re being blocked by the same-origin policy which prevents cross-domain XMLHttpRequests. Since you need to set headers to get JSON back from a .Net web service like this, you’re in a tough spot, you just can’t make that kind of request from a browser, not from a different domain.

Fiddler may be showing the content, but the browser isn’t going to let the page see it, for security reasons it’ll always be null. The one way around this is JSONP, but unfortunately it doesn’t look like that service is setup to support it.