Cross domain ajax call to get JSON response fails in error, JSON correctly formatted

Question

I want to execute the following AJAX call (cross domain):

 $.ajax({
        type: 'GET',
        url: url + "?callback=?",
        contentType: 'application/json',
        async: false,
        jsonp: "callback",
        dataType: 'jsonp',           
        success: function (json) {
            alert("ok" + JSON.stringify(json));
        },
        error: function (json) {
            alert("err" + JSON.stringify(json));
        }
    });

And I am getting this alert message:

err{"readyState":4,"status":200,"statusText":"success"}

Which means the code ends in the error method.

If I check the request in Firefox or Chrome, the JSON part of the response is available and clearly formatted. Is it possible to get the JSON response in the error method? Or do you have any idea why the success method isn't hit?

It's not my server unfortunately, so I can't implement any changes on the server side. I used http://jsonlint.com/ to validate the JSON output and it is Valid. Entering the same URL in the browser returns the JSON content correctly.

Thanks much in advance, I tried a few different approaches, but still failing on the error method,

[EDIT]

SO, I am playing with different approaches, always getting the same error. If I change the error part of my call to this:

 error: function (jqXHR, textStatus, ex) {
            console.log(arguments);
            alert(textStatus + "," + ex + "," + jqXHR.responseText);
        }

Then I am getting the following error:

http://i.stack.imgur.com/ck6Sd.png

Copy paste of error for search engines:

0: Object 1: "parsererror" 2: Error message: "jQuery11020553141210693866_1392367304225 was not called" stack: (...) get stack: function () { [native code] } set stack: function () { [native code] } proto : d callee: function (jqXHR, textStatus, ex) { length: 3 proto : Object

The same things apply as above, the response is readable in the browser without issues.

EDIT2

I ended up doing the JSON call the old way, embedding it into the page:

script = document.createElement("script");
    script.type = "text/javascript";
    script.id = "resultJSON";
    script.src = url;

    $(".resultsOutput").append(script);

But I have troubles retrieving the data, the script tag seems to be empty. I am getting an error on the JSON:

Uncaught SyntaxError: Unexpected token :

Anyone able to help? I am starting to get desperate on this one. It seems that the issue is that the JASON is returned without a method wrapper.

[LAST EDIT]

So, turns out the server doesn't support CORS and the returned JSON isn't wrapped in a JS function, so this approach won't work. I'll have to use some other approach to retrieve the data.. thanks everyone for reading

Andy

Answer 1

Is there any particular reason to:

• Override random callback name jquery gives?
• Set datatype to application/json?

This second one may be causing the error. If I'm correct, the server would return application/javascript mime-type, since it should return the JSON you are looking for wrapped into a callback function that shall be called once the request hast completed. Something like this:

function callback() {
   return {"a","b"} //the JSON you are looking for
}

This all is handled internally by creating a tag "script" to avoid cross-domain browser restrictions, so you cannot handle JSON directly, it needs to be wrapped into Javascript code. Thus, contentType may be wrong.

Try removing the contenType property on the ajax options and see how jquery behaves (it should interpret content-type from response headers from the server).