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:

https://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

score 1 · Accepted Answer · answered Feb 13 '14 at 18:26

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).

answered Feb 13 '14 at 18:26

jorge.alonso

289
2
5

Looks like I got it backwards. Server won't return the response wrapped into a function but the call to the function itself, and jQuery will prepare the function in browser's memory to be called once the response arrives. See this thread: http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain?rq=1 – jorge.alonso Feb 13 '14 at 18:49
I've tried your first suggestion to remove the contentType property, but the code behaves the same. To your other questions, I've simply tried different approaches, and for now, this is the furthest I got (otherwise I did get various errors because of the cross domain part of my problem). I'll check the thread you've suggested and let you know if it helped. Thank you very much for your time, much appreciated. – user3307231 Feb 14 '14 at 08:04
I checked the mentioned link, but I couldn't find anything which would help me. I've since tried some other approaches, see updated question. – user3307231 Feb 14 '14 at 08:40
Can you post what you receive from the server? – jorge.alonso Feb 18 '14 at 11:10
The data returned by the server contain a JSON response without a callback, so it looks something like `{ ..some data..}` without a method wrapper. This leads me to believe that it's not possible to retrieve it via javascript and I need to use some other approach to get the response... – user3307231 Feb 18 '14 at 23:41
Yes, seems about right. If the response is not either a function(){return something} or a function call like 'myfunction(response)';, I'm afraid you cannot retrieve this data using this technique. – jorge.alonso Feb 19 '14 at 12:31
You have other option, though, if you can talk with the server's people and agree with them to modify it: Read here about CORS (Cross Origin Resource Sharing) http://www.html5rocks.com/en/tutorials/file/xhr2/ Seems that you only need a header on the server's response – jorge.alonso Feb 19 '14 at 12:45
Yeah, I emailed them and they don't plan to do that, so I'll have to use C# or something, thanks for all the patience and help – user3307231 Feb 19 '14 at 23:23
No problem! The option of creating your own 'proxy' to fetch that content in the server-side is always there. Good luck – jorge.alonso Feb 21 '14 at 11:18

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

1 Answers1