Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why isn't jQuery automatically appending the JSONP callback?

Tags:

jquery

jsonp

The $.getJSON() documentation states:

If the specified URL is on a remote server, the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

The $.ajax() documentation for the jsonp data type states (emphasis mine):

Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback.

So it seems that if I call $.getJSON() with a cross-domain URL, the extra "callback=?" parameter should automatically get added. (Other parts of the documentation support this interpretation.)

However, I'm not seeing that behavior. If I don't add the "callback=?" explicitly, jQuery incorrectly makes an XMLHttpRequest (which returns null data since I can't read the response cross-domain). If I do add it explicitly, jQuery correctly makes a <script> request.

Here's an example:

var URL = "http://www.geonames.org/postalCodeLookupJSON" +
    "?postalcode=10504&country=US";

function alertResponse(data, status) {
  alert("data: " + data + ", status: " + status);
}

$.getJSON(URL, alertResponse);
// alerts "data: null, status: success"

$.getJSON(URL + "&callback=?", alertResponse);
// alerts "data: [object Object], status: undefined"

So what's going on? Am I misunderstanding the documentation or forgetting something?

It goes without saying that this isn't a huge deal, but I'm creating a web API and I purposely set the callback parameter to "callback" in the hopes of tailoring it nicely to jQuery usage.

Thanks!

(Edit: I cross-posted this in the jQuery forums if you're interested.)

like image 289
Aseem Kishore Avatar asked Mar 10 '10 06:03

Aseem Kishore


People also ask

Why is JSONP avoided?

JSONP has some other limitations, too: It can only be used for GET requests, and there's no general way to prevent cross-site request forgeries*. It's bad for private data, since any site on the web could hijack a JSONP response if the URL is known. This means it's best suited for consumption of public data feeds.

What is JSONP callback?

JSON with Padding, or JSONP for short, is a technique that allows developers to get around browsers' same-origin policies by exploiting the nature of the <script> element. The policy prohibits reading any responses made by websites with origins other than those currently in use.

Can JSONP be used with Ajax?

JSONP allows you to sidestep the same-origin policy and to some extent make cross-domain Ajax calls. It's not a silver bullet, and it certainly has its issues, but in some cases it can prove invaluable when fetching data from a different origin.

How does JSONP request work?

Standard JSON Asynchronous request The browser makes an asynchronous POST request to the server slapping its parameters to the service in the body. The server responds with a string of JSON data. A success handler of the request fires and the string is converted into a Javascript Object to be used in the application.


3 Answers

Turns out this was a bug in the jQuery documentation. See http://forum.jquery.com/topic/getjson-isn-t-automatically-appending-callback-to-my-cross-domain-url for details.

like image 186
Aseem Kishore Avatar answered Nov 08 '22 17:11

Aseem Kishore


Try this:

var URL = "http://www.geonames.org/postalCodeLookupJSON" +
    "?postalcode=10504&country=US";
function alertResponse(data, status) {
    alert("data: " + data + ", status: " + status);
}
$.ajax({
    url: URL,
    dataType: 'jsonp',
    jsonpCallback: 'alertResponse',
});
like image 21
PetersenDidIt Avatar answered Nov 08 '22 18:11

PetersenDidIt


Yes, I think you misunderstood. $.getJSON is a shortcut for $.ajax({datatype: 'json'.... as the documentation says. It never makes a JSONP call unless you add the callback=? parameter.

like image 40
Chetan S Avatar answered Nov 08 '22 17:11

Chetan S