JQuery has functions that make Ajax/HTTPD calls from a script to a server very easy and
$.getJSON() is a great shorthand function for fetching a
server response in JSON.

But this simple approach fails if the page making the ajax call is in a different domain from the server.
The Same Origin Policy prohibits these cross-domain calls in some browsers as a security measure.

At the time of writing, Google Chrome version 24 and Mozilla Firefox version 17 do not appear to apply this restriction but Internet Explorer version 9 does.

The security implications of allowing cross domain requests should be considered carefully in your application but if you do want to allow them then you
need a way to overcome the browser restrictions.

JSONP wraps up a JSON response into a JavaScript function and sends that back as a Script to the browser.
A script is not subject to the Same Origin Policy and when loaded into the client, the function acts just like the JSON object that it contains.

This page shows the two approaches with snippets of Server and Client code. Look at the source of this page to see the full JS code.

The code consists of a Server application, implemented here as a Ruby Sinatra application.
You should be familiar with Ruby, Gems and basic Sinatra apps, if you want to run a live demo.

You can run it locally with the commands 'bundle install' and 'rackup -p 4567' and then going to 'http://localhost:4567' with your browser.

NOTE: To really demonstrate the cross domain operation you need to put the client and server code on TWO DIFFERENT machines.
Run this page on your localhost and change the 'host' in the JS to point to 'http://json-jsonp-tutorial.craic.com'.

The examples make use of the JSON.stringify method
from Douglas Crockford to 'pretty print' the returned JSON.
You can find that HERE.

JSON

Here is a minimal example that uses JSON as the transport for the server response.
The client makes an ajax request with the JQuery shorthand function $.getJSON.
The server generates a hash, formats it as JSON and returns this to the client.
The client formats this and puts it in a page element.

JSONP

The only change on the Client side with JSONP is to add a callback parameter to the URL. The simplest way to do this is to add 'callback=?' in which case
jQuery will generate a unique function name and pass that to the server (e.g. jQuery19009536794223822653_1359406689359).

On the Server you need to get the 'callback' parameter and, instead of returning the raw JSON, you wrap that string in a function
definition, like this "()". You don't need to know the function name in advance - you just get it from that
callback parameter.

You should also set the content type to 'application/javascript', although this doesn't appear to matter in my tests.

Back on the client side you treat the returned function just like the raw JSON object.