jQuery JSONP, only works with same site URLs

Question

I need to make a request to an API which returns json formatted data. This API is on a sub-domain of the domain this script will run off (although at the moment it's on a totally different domain for dev, localhost)

For some reason I thought that jsonp was supposed to enable this behavior, what am I missing?

Using jQuery 1.4.2

$.ajax({
    url:'http://another.example.com/returnsJSON.php',
    data: data,
    dataType:'jsonp',
    type: "POST",
    error: function(r,error) {
        console.log(r);
        console.log(error);
    },
    success:function(r){
    console.log(r);
    }
});

Answer 1

Change your type from "POST" to "GET". That is, only if you intend to retrieve data.

Answer 2

Did you modify the server-side component to use JSONP?

You can't just tell the client to use JSONP and suddenly expect a JSON script on the server-side to return the correct result.

Specifically, JSONP requires the server to return a JavaScript string that calls a specific function (whose name is passed in with the other arguments) with the return results, which the client then evals.

Answer 3

You'll need a combination of Arnaud's answer (don't use POST) and R. Bemrose's answer (make sure server-side returns JSONP), with the added specification of a callback function.

In other words, here's your modified request code:

function dosomething(data) {
    console.log(data);
}

$.ajax({
    url: 'http://another.example.com/returnsJSON.php',
    data: data,
    dataType: 'jsonp'
});

Helpful to note that in the generated code you'll see that when the dataType is "jsonp", jQuery outputs a script tag pointing at the url; it's not a typical XHR. You could also use jQuery's getJSON() here.

Then your response will have to be formatted as such:

dosomething({
    test: 'foo'
});

When the call is complete, your specified callback will fire.