Posts Tagged jsonp

Lightweight JSONP javascript library

Posted by Erik Karlsson in JavaScript, PHP, Web development on May 20th, 2010

This can now be found at github: https://github.com/IntoMethod/Lightweight-JSONP

Are you one of those that include jQuery or any other library only to be able to use some JSONP in your website? In that case this might be the code for you to read and try to understand. I won’t post any detailed explainations right now but feel free to comment if you wonder anything. I’ve also included a minified version in the bottom.

Update (2011-06-08) Fixed delete/setting to null as pointed out by Bryan Smith (see comment)

Update (2011-04-29) Added encodeURIComponent as suggested by yched (see comment)

Update: Fixed scoping problem as found by Damon Oehlman (see comment)

Feel free to use this script for anything that you like, commercial or non-commercial, but please keep the comment and link to this site.

Oh and by the way, the script has been tested successfully in the following browsers:
Chrome 4,5,6
Firefox 3.x
Internet Explorer 6,7,8
Opera 9.6+10
Androids webkit-based browser
Symbian S60 browser

First an example of how to use it, to show the simplicity, then the actual code.

JSONP.get( 'someUrl.php', {param1:'123', param2:'456'}, function(data){
        //do something with data, which is the JSON object you output from someUrl.php
        //into the callback javascript method specified by the "callback" value in the querystring
});

A simple example of the someUrl.php (please observe this example does not include any security checks what so ever, just to show the principle):

$myData = fetchSomeData();
 
echo $_GET['callback'];
echo "(";
echo json_encode($myData);
echo ")";

The actual code for the Lightweight JSONP functionality.
Around 1.1kb without gzip.

//Lightweight JSONP fetcher - www.nonobtrusive.com
var JSONP = (function(){
	var counter = 0, head, query, key, window = this;
	function load(url) {
		var script = document.createElement('script'),
			done = false;
		script.src = url;
		script.async = true;
 
		script.onload = script.onreadystatechange = function() {
			if ( !done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") ) {
				done = true;
				script.onload = script.onreadystatechange = null;
				if ( script && script.parentNode ) {
					script.parentNode.removeChild( script );
				}
			}
		};
		if ( !head ) {
			head = document.getElementsByTagName('head')[0];
		}
		head.appendChild( script );
	}
	function jsonp(url, params, callback) {
		query = "?";
		params = params || {};
		for ( key in params ) {
			if ( params.hasOwnProperty(key) ) {
				query += encodeURIComponent(key) + "=" + encodeURIComponent(params[key]) + "&";
			}
		}
		var jsonp = "json" + (++counter);
		window[ jsonp ] = function(data){
			callback(data);
			try {
				delete window[ jsonp ];
			} catch (e) {}
			window[ jsonp ] = null;
		};
 
		load(url + query + "callback=" + jsonp);
		return jsonp;
	}
	return {
		get:jsonp
	};
}());

The minified version:

//Lightweight JSONP fetcher - www.nonobtrusive.com
var JSONP=(function(){var a=0,c,f,b,d=this;function e(j){var i=document.createElement("script"),h=false;i.src=j;i.async=true;i.onload=i.onreadystatechange=function(){if(!h&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){h=true;i.onload=i.onreadystatechange=null;if(i&&i.parentNode){i.parentNode.removeChild(i)}}};if(!c){c=document.getElementsByTagName("head")[0]}c.appendChild(i)}function g(h,j,k){f="?";j=j||{};for(b in j){if(j.hasOwnProperty(b)){f+=encodeURIComponent(b)+"="+encodeURIComponent(j[b])+"&"}}var i="json"+(++a);d[i]=function(l){k(l);try{delete d[i]}catch(m){}d[i]=null;};e(h+f+"callback="+i);return i}return{get:g}}());

, ,

17 Comments