Question

This is my Javascript

$.ajax({
    "url": url,
    "dataType" : "json",
    "async" : false,
    "success" : function(e) {
        retval = e;
    },
    "complete" : function(jqXHR, textStatus) {
        debugger;
    },
    "error" : function(jqXHR, textStatus, errorThrown) {
        debugger;
    },
    "xhrFields": {
       withCredentials: true
    }
})

url is for example http://api.justin.tv/api/channel/show/{0}.json ({0} being replaced by a channel name)

The script breaks at error with textStatus “parseserror”. Also I notice that jqXHR has no responseText, but instead all the json files I tried to load have appeared in the resources tab with Uncaught SyntaxError: Unexpected token :. Also I’m getting the warning Resource interpreted as Script but transferred with MIME type application/json. for every ajax request. In addition, the x-domain requests doesn’t seem to be asynchronous since code below the ajax call executes before the error callback executes.

So to clarify, my goal is for the ajax call success callback to run on every request with the parsed JSON object as e. This code already works for local json ajax calls, just not with the x-domain ones. The json returned by the x-domain calls is valid and shouldn’t result in parsererrors.

If anyone has any ideas, please share

Thanks

Answer 1

You’re going to need to look into jsonp support in $.ajax() — http://api.jquery.com/jQuery.ajax/

You’re violating the same origin policy, where you can’t make XmlHttpRequests to domains outside of yours. JSONP allows you to get around this.

I don’t know if justin.tv supports JSONP; basically, it needs to wrap the response that it’s sending you inside of the method that’s provided by the JSONP call.