jsonp/index.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>crossdomain | JSONP</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<style>
	body, button{
		font-family: Verdana, Arial;
		color: #333;
	}
	h1{
		text-align:center;
		font-size:24px;
	}
	</style>
</head>
<body>
	<h1>crossdomain using JSONP</h1>
	<button id='get_resource'>Click to get resource</button>
	<p id='resource_holder'></p>
<script>
(function(){
	var getJSONP = function(url, callbackName){
			var head = document.getElementsByTagName("head")[0],
				 script = document.createElement("script");
				 script.src = url + '?callback=' + callbackName;
				 script.charset = "utf-8";

		   script.onload = script.onreadystatechange = function(){
				if (!this.readyState || this.readyState == "loaded" ||
					this.readyState == "complete") {
					setTimeout(function(){
						head.removeChild(script);
					}, 50);
				}
			};
			head.appendChild(script);
	},
	holder = document.getElementById('resource_holder'),
	button = document.getElementById('get_resource');

	window.handleJSONP = function(data){
		var dumpInfo = 'timestamp: ' + data.timestamp + '<br/>count: ' + data.count,
			 record = data.data;
		for(var i in record){
			dumpInfo += '<br/>record ' + i + ': {id: ' + record[i].id + ' name: ' + record[i].name +'}';
		}
		holder.innerHTML = dumpInfo;
	}
	
	button.onclick = function(){
		holder.innerHTML = '';
		getJSONP('http://www.b.com/crossdomain/jsonp/jsonp.php', 'handleJSONP');
	}
})();
</script>
</body>
</html>