JSONP is the answer to two quite popular questions among the web developers:

• how can I make an asynchronous call to an script that is not on my server?
• how can I “hide” my ajax calls in the javascript console?

What is JSONP?

Short version: it’s an alternative to ajax.

Long version(with example) below:

I guess most of you know what is JSON. If you don’t there is a lot of information out there about it. You could start by reading some of the wikipedia article on json (you will also find some things about jsonp in that article).

JSONP is nothing else but json with padding. This technology is based on a very simple principle: the fact that you can dynamically add new external javascript sources in your website without problem and that a json response is easy to handle with javascript.

So back to the two questions: notice that the first one uses the term “asynchronous” but not the well known “ajax”. That is because jsonp calls are not in fact ajax calls. This thing answers the second question also: the calls that you know that are made but you don’t see them in the javascript console are not ajax calls.

What do you need to do in order to make a jsonp call?

When you need to make the call dynamically insert into your page a new <script> tag. The source should be a service that outputs a json.

What’s the padding? If you just output a json encoded object in your script at the moment you insert it in your page you will have a new object, but nothing will happen with it. So you can add a function that you know it is available in the page that can “read” the output.

Full working example:

HTML/JS:

<script type="text/javascript">// <![CDATA[
			function callTheJsonp()
			{
				// the url of the script where we send the asynchronous call
				var url = "http://localhost/utils/jsonp/ajax.php?callback=parseRequest";
				// create a new script element
				var script = document.createElement('script');
				// set the src attribute to that url
				script.setAttribute('src', url);
				// insert the script in out page
				document.getElementsByTagName('head')[0].appendChild(script);
			}

			// this function should parse responses.. you can do anything you need..
			// you can make it general so it would parse all the responses the page receives based on a response field
			function parseRequest(response)
			{
				try // try to output this to the javascript console
				{
					console.log(response);
				}
				catch(an_exception) // alert for the users that don't have a javascript console
				{
					alert('product id ' + response.item_id + ': quantity = ' + response.quantity + ' & price = ' + response.price);
				}
			}

// ]]></script>

 <span onclick="callTheJsonp()">click here to make the jsonp call</span>

PHP:

<?php
	// get the callback function name
	$callback = '';
	if (isset($_GET['callback']))
	{
		$callback = filter_var($_GET['callback'], FILTER_SANITIZE_STRING);
	}

	// make an array with some random values.. so you would see that the results are fetched each time you call this script
	$array = array(
					'item_id' => rand(1,13),
					'price' => rand(14,17),
					'quantity' => rand(18,30)

	);
	// output this array json encoded.. the callback function being the padding (a function available in the web page)
	echo $callback . '('.json_encode($array).');';

What just happened?

When the user clicks on the span the callTheJsonp function is called. This function will insert into the page a new element and its source will be in fact a php script. (keep in mind: even if I called that file ajax.php, this is not an ajax)

The php will output his response between parseRequest( and ). So when the response arrives the parseRequest function will be called and the parameter will be the result of the script we called.

So now inside the parseRequest function you have an javascript object with everything you need. From here on you can do anything you want, just the way you did with ajax.

Downsides? A few: ajax is safer (that’s why you can’t make ajax calls to external servers) so you must take care what you do with the response or the fact that you can’t use POST as a request method.

You can download a full working example here.

If you have any questions or feedback please feel free to use the form below to add a comment.

If you liked this post
you can buy me a beer