JSONP Example – Getting Data from Another Domain with JavaScript


As you probably know, you can’t send AJAX (XMLHttpRequest) requests to another domain. Browsers block it because of the Same Origin Policy, a rule used to make sure that a malicious script won’t be able to access data on other pages.

This can be a problem, however, if you need to load data for a widget from another domain. For instance, suppose you are developing a widget that your partners will use on their websites and it will load data from your server.

A really clever solution is called JSONP, which stands for “JSON with Padding.” It works by “exploiting” the fact that <script> tags can load files from other domains.

Here’s a simple example of how it works:

1. Create your HTML file (On Domain A)

<html>
<body>
<h1 id="maintitle><h1>
</body>
</html>

As you can see, it has no title. We are going to get the title from another website, and put it there using JavaScript.

2. Create a JavaScript function to change the title (On Domain A)

<html>
<body>
<h1 id="maintitle><h1>
<script>  
function changeTitle(data){
    document.getElementById("maintitle").innerHTML = data.title;
};        
</script>
</body>
</html>

Notice that this functions receives a parameter “data” which contains the title, and then changes it on the HTML.

3. Create the server side script that returns the data (On Domain B)

<?php
if($_GET['callback']){
  $f_name = $_GET['callback'];
  echo "$f_name({'title':'Hello World!'});";   
}
else{
  echo "Error: You must pass a callback parameter";
}
?>

This script checks whether a GET parameter called ‘callback’ was provided. In positive case, it returns a JavaScript function named after that parameter, and the title as data (in this example the title is “Hello World”).

Now suppose we put that script on serverdomain.com/server.php. If we opened serverdomain.com/server.php?callback=ChangeTitle the server would send back the following:

ChangeTitle({'title':'Hello World'});

This is the same name of the JavaScript function we created on step 2. That is no coincidence. You are going to see why now.

4. Use another <script> tag to load the data from the other server (On Domain A)

<html>
<body>
<h1 id="maintitle><h1>
<script>  
function changeTitle(data){
    document.getElementById("maintitle").innerHTML = data.title;
};        
</script>
<script src="http://serverdomain.com/server.php?callback=ChangeTitle"></script>
</body>
</html>

The second <script> tag will ping our server and essentially load this code:

ChangeTitle({'title':'Hello World'});

This will call the ChangeTitle function defined on the first <script> tag with our title as a parameter, and that function will then change the title of the HTML.

Nice huh?

5. Making the Request Dynamically

The example above makes the request by placing a <script> manually on the HTML of the page. You can also do that dynamically with JavaScript, which becomes quite handy for dynamic web applications:


function myFunction(data)
{
    //do stuff
}

var script = document.createElement('script');
script.src = 'http://example.com/?callback=myFunction';
document.getElementsByTagName('head')[0].appendChild(script);

The code below will also work on newer browsers:

document.head.appendChild(script)

Common problems:

1. Notice that both domains must be using the same protocol (HTTP or HTTPS), else you’ll get an error.


Leave a Reply

Your email address will not be published. Required fields are marked *