How To Use JSONP With Demo?

As you may be aware you cannot directly load data files from another domain. This is a security issue that has been around for a long time and is commonly solved by sharing data through an API, REST or such. However there are ways around this and in this post we will look at the different options available to you such as a PHP Proxy Pass but in this post we will focus on JSONP.

JSONP stands for “JSON with Padding” and it is a workaround for loading data from different domains. It loads the script into the head of the DOM and thus you can access the information as if it were loaded on your own domain, thus by-passing the cross domain issue.

I've setup up one javascript file that contains some jsonp data.

nice.js.php

callback({date:"18:12:36"});

Additionally I've setup up two different HTML pages. Common for all of them, is that they will load one of the two javascripts and try to replace the contents of a span tag with the data in the date property of the json object.
The pages are:

1. scriptonly_nice.html - Loads nice.js.php by adding a script tag using normal javascript and DOM manipulation
2. jquery_nice.html - Loads nice.js.php by using jQuery's $.get(..., "jsonp")

Ref: http://erlend.oftedal.no/blog/?blogid=97
http://www.jquery4u.com/json/jsonp-examples/