Cross Domain Communication with JSONP

Introduction

Asynchronous JavaScript and XML (AJAX) are the key technology of the new generation of sites ranked as WEB 2.0. AJAX allows you to process data without annoying page reload. Data is processed using the XMLHttpREquest object, which allows client-side JavaScript to create HTTP connections to remote servers. AJAX is used in many mashups that integrate content from several different sources.

However, cross-domain connections are prohibited - this is the browser policy. If you try to send a request to another domain, you will get a security error. Of course, you can avoid these errors if you send requests only to your domain, but what kind of web application will it be if it cannot go anywhere further than your server? What if you still need to receive data from other domains?
')

Initial constraints

The initial limitations are that a script loaded from one domain cannot perform any manipulations with another domain. The domain of the requested URL should be as dynamic as the domain of the current page. The browser isolates content from different sources to protect them from being modified. This browser “policy” is very old and rooted in Netscape Navigator 2.0.

The first thing that comes to mind to overcome this limitation is to use the page that accesses the server in its domain and the server in its domain, which is a kind of proxy to the necessary third-party servers. But this approach doesn’t scale well. Another option is to use frames to create areas on the page into which third-party content will be loaded using GET request. But after loading into the frame this content will also become the object of the restriction described above.

A much more promising way to solve this problem is to dynamically insert a script element into a page. This script is downloaded just from another domain and contains all the necessary data.

JSON and JSONP

JSON is a lightweight format (similar to xml) for exchanging data between a browser and a server. JSON is a textual representation of JavaScript objects. For example, you have an object with two attributes: a symbol and a price. You can define this in JavaScript.

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

And this is just the JSON view:

 {symbol: 'IBM', price: 91.42} 

Here is an example of a simple javascript function that shows the price when called.

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

You can call it using the JSON view as a parameter.

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

And now you are ready to combine both of these examples in one page.

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

After loading the page you will see the following message:



So far in this article I have only spoken about how to call a function with a static JSON parameter. You can dynamically “wrap” JSON into a function call, you can call your functions with dynamic data — this technique is called dynamic JavaScript insertion. In order to understand how it works, we will write the following line in a separate ticker.js file.

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

Now we change the code of our page:

 //         JSON function showPrice(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); } var url = “ticker.js”; //   ,   . //      JavaSCript. var script = document.createElement('script'); script.setAttribute('src', url); // load the script document.getElementsByTagName('head')[0].appendChild(script); 

Nothing complicated. In this reamer, after the page loads, the second part of the script is triggered, which dynamically loads the ticker.js file. This file in turn contains only a function call with JSON data.
And now we come to cross-domain communications.
Let's change only one line in the last script.

 var url = "http://some_another_domain.com/script_generator.php?param1=data1¶m2=data2"; //   ,   . 

In fact, we can download this script from anywhere. From any domain. And not only download, but also pass in front of these parameters using the GET method. The downloaded script itself can be generated in any way. Native JSON support is available in most languages.