Cross-domain communications with JSONP

This is a good article…I’m just sharing

Cross-domain communications with JSONP, Part 1: Combine JSONP and jQuery to quickly build powerful mashups.

JSON and JSONP

JSON is a lightweight data format (compared to XML) for the exchange of information between the browser and server. JSON’s appeal to JavaScript developers comes from the fact that it’s a string representation of a JavaScript object (hence the name). For example, assume you have a ticker object with two attributes: symbol and price. This is how you can define the ticker object in JavaScript:

var ticker = {symbol: 'IBM', price: 91.42};

And this is its JSON representation:

{symbol: 'IBM', price: 91.42}

Refer to Resources for more information about JSON and its potential uses as a data interchange format. Listing 1 defines a JavaScript function that shows IBM’s share price when called. (We are leaving out the exact details of how you can incorporate this into a Web page.)

function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}

You can call this function by passing JSON data as a parameter:

showPrice({symbol: 'IBM', price: 91.42}); // alerts: Symbol: IBM, Price: 91.42

Now you’re ready to include these two steps into a Web page, as shown in Listing 2.

<script type="text/javascript">
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
</script>
<script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>

After loading the page, you should see the alert shown in Figure 1.

IBM ticker

This article, until now, has showed how you can call a JavaScript function with static JSON data as a parameter. However, by wrapping your JSON data dynamically in a function call, you could call your function with the dynamic data, which is a technique called dynamic JavaScript insertion. To see how this work, put the following line in a stand-alone JavaScript file called ticker.js.

showPrice({symbol: 'IBM', price: 91.42});

Now change the script in your Web page to look like the code shown in Listing 3.

<script type="text/javascript">
// This is our function to be called with JSON data
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
var url = “ticker.js”; // URL of the external script
// this shows dynamic script insertion
var script = document.createElement('script');
script.setAttribute('src', url);

// load the script
document.getElementsByTagName('head')[0].appendChild(script);
</script>

In the example in Listing 3, the dynamically inserted JavaScript code, residing in the file ticker.js, calls the 

1
showPrice()

function using the actual JSON data as a parameter.

As you have already learned, the same-origin policy doesn’t prevent the insertion of dynamic script elements into the document. That is, you could dynamically insert JavaScript from different domains, carrying JSON data in them. This is actually what JSONP (JSON with Padding) is: JSON data wrapped in a function call. Note that, in order to do this, you must have a callback function already defined in the Web page at the time of insertion, which is 

1
showPrice()

in our example.

What we call a JSONP service (or a Remote JSON Service), however, is a Web service with the additional capability of supporting the wrapping of the returned JSON data in a user-specified function call. This approach relies on the remote service accepting a callback function name as a request parameter. It then generates a call to this function, passing the JSON data as parameter, which upon arrival at the client is inserted into the Web page and executed.

%d bloggers like this: