javascript - JSON Get request using JQuery (cross-domain)

Question

I'm trying to make a simple JSON get request to an API on a domain that I do not control.

My code is simply:

$(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: 'http://pubapi.cryptsy.com/api.php?method=marketdatav2',
            success: function (data) {
                console.log(data);
            }
        });
});

But since that is a cross-domain request, I am getting this error in the Chrome Console:

XMLHttpRequest cannot load http://pubapi.cryptsy.com/api.php?method=marketdatav2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

And when I try to add the parameter dataType: 'jsonp' the Console returns with this error:

Uncaught SyntaxError: Unexpected token :

But when I examine the Network tab in Chrome I see that under Headers the Status Code is 200 OK and I can actually see the full response in the Response tab, but the console is still showing the "Unexpected Token :" error and the JQuery JSON request is still failing.

Here's the JS Fiddle link: http://jsfiddle.net/6Qcq2/ You can see the same results

I have tried running the url on http://www.hurl.it and it shows me Status OK and the response as well, so I must be doing something wrong.

I've pretty much wasted the whole day trying to figure out how to get around this problem.

Your help is very much appreciated.

Answer 1

The response from the API is JSON, not JSONP, so just changing the data type doesn't help.

You can use a proxy that makes the request and turns the JSON into JSONP:

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: 'http://jsonp.guffa.com/Proxy.ashx?url=pubapi.cryptsy.com%2fapi.php%3fmethod=marketdatav2',
        dataType: 'jsonp',
        success: function (data) {
            console.log(data);
        }
    });
});

Demo: http://jsfiddle.net/6Qcq2/1/