Ajax call to JSON service isn't working

Question

I'll admit my exposure to JQuery / Ajax has been somewhat limited thus far, I am attempting to get JSON data from two web services:

http://w.xaviertidus.com/Json.svc/getInServiceTransponders

http://w.xaviertidus.com/Json.svc/latestTransponderUpdates

Using the following code:

function fetchTransponderData() {
    $.ajax({
        url: "http://w.xaviertidus.com/Json.svc/getInServiceTransponders",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (response) {
            return response;
        },
        error: function (xmlHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

function fetchFarcsData() {
    $.ajax({
        url: "http://w.xaviertidus.com/Json.svc/latestTransponderUpdates",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (response) {
            return response;
        },
        error: function (xmlHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

Unfortunately it keeps throwing an error (the alerts under 'error' in the ajax statement fire) and not giving me detail, i have used fiddler and it is making a request to the webservices and going to them myself yields expected JSON results.

Can anyone shed any light on this problem for me? Many thanks!

Answer 1

Could be a cross domain request. If so you must set the appropriate header (Access-Control-Allow-Origin: *) or use a proxy server.

Answer 2

You can try using JSONP to get around the same origin policy. However, a better option would probably be to call the external site from your server side code and rely on your server to forward that result back to your client.