JSONP and jQuery

JSONP (JSON with Padding) provides a method to request data from a server with different domain. Typical web browser prohibit cross domain request due to same origin policy. We can do it without jQuery, but jQuery provides the interface to wrap the underneath details.

There are 3 settings in $.ajax about JSONP
1. dataType: 'jsonp',
Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.

2. jsonp:
Use this setting to change the default callback name ({jsonp}=xxx)

3. jsonpCallback:
Use this setting to define the callback function name (callback={jsonpCallback})

Sample codes:
$.getJSON('http://example.com/get?jsonp=?', function(data) {
  $("#jsondata").text(JSON.stringify(data));
  console.log(data);
});

$.ajax({
    dataType: 'jsonp',
    url: "http://example.com/get",
    success: function (data) {
        // do stuff with data
    }
});

The code to inject information into the DOM still occurs, as does the creation of a callback function. What jQuery does is it adds script tag to the DOM only until the callback (success function) is done executing. The tag is added to the header. It also adds a function to the window object which is called on return. The URL jQuery constructs looks like http://example.com/get?callback=jsonp123456789.

Security
1. We should avoid serving any sensitive data like password, credit card etc personal data from server side jsonp code.
2. We should also avoid any update logic in jsonp server side code.

Reference
http://api.jquery.com/jQuery.ajax/   
http://infoheap.com/jquery-jsonp-cross-domain-ajax/
http://scottseely.com/2010/09/04/how-jsonp-works-and-some-bits-about-implementing-it-in-wcf/

JSONP 101

Definition:
Wikipedia gives such a definition about JSONP:
JSONP or "JSON with padding" is a complement to the base JSON data format, a pattern of usage that allows a page to request data from a server in a different domain. As a solution to this problem, JSONP is an alternative to a more recent method called Cross-Origin Resource Sharing.

Remy sharp defines JSONP in his blog (what is JSONP?) like this:
JSONP is script tag injection, passing the response from server in to a user specified function.

More explanations from wikipedia:
Said a different way, the typical use of JSONP provides cross-domain access to an existing JSON API, by wrapping a JSON payload in a function call.
In that way, the use of JSONP can be said to allow browser pages to work around the same origin policy via script element injection.

Same origin policy:
Wikipedia has the explanation about this policy. Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port or  protocol.

Possible solutions to same_origin_policy:
Proxy (e.g. Nginx)
Script tag
JSONP
CORS (Cross-Origin Resource Sharing)
Flash

Example:

<html>
<head>
<title>JSONP Example</title>
</head>
<body>
<p>Script injection to get a jsonp response from twitter,
and in callback function handleResponse(),
we retrieve the latest tweet from "cnnbrk"</p>
<div id="id"></div>
<script>
function handleResponse(responseJson){   
   //alert(responseJson.status.text);
   //alert(document.getElementById("id"));
   document.getElementById("id").innerHTML = responseJson.status.text;
}
</script>
<script type="text/javascript"
    src="http://twitter.com/users/cnnbrk.json?callback=handleResponse"></script>
</body>
</html>

jQuery and JSONP
jQuery has supported JSONP. For details, see jQuery .ajax() API document, also there is a project on google code http://code.google.com/p/jquery-jsonp/ which is an alternative solution to jQuery's implementation of JSONP. The interface $.jsonp() is similar to $.ajax().