crongro/JSONP Sample

## JSONP Sample
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="underscore_1.5.2.js"></script>
<style>
article {
	background: silver;
	padding : 10px;
	margin : 10px;
}

/**
 * ajax요청을 보낼 버튼 스타일
 */
#ajaxCall {
	width : 80px;
	height : 80px;
	background-color: silver;
	text-align: center;
	line-height: 80px;
}

</style>
<script>
	window.addEventListener('load', function() { run() });

	/**
	 * [run load된 후 처음 실행될 함수]
	 * @return {void}
	 */
	function run() {
		document.getElementById('ajaxCall').addEventListener('click', function() {
			runAjax();
		},false)
	}

	/**
	 * [runAjax JSONP 요청을 위해서 SCRIPT태그를 생성해서 DOM에 추가한다]
	 * @return {void}
	 */
	function runAjax() {
		// 동적으로 생성해야 할 콜백은 다른함수와 충돌이 나지 않도록 랜덤한이름으로 생성한다(시간값을 활용)
		var sDate = (new Date()).getTime()+"";
		var elScript = document.createElement('script');
		elScript.id = "jsonpScript";
		elScript.src = "http://ui.nhnnext.org/phpcode/recipes.php?callback=temp"+sDate;
		var elHead = document.getElementsByTagName('head')[0];

		//전역영역(window)에 함수를 추가한다.
		window["temp"+sDate] = function(oData) {
			runTemplateTest(oData);
			elHead.removeChild(elScript);
		};

		elHead.appendChild(elScript);
	}

	/**
	 * template를 실행합니다.
	 * @param  {Array} oData 서버에서 받은 데이터
	 * @return {void}
	 */
	function runTemplateTest(oData) {
		var compiled = _.template(
			"<article>" +
				"<h1><%= recipeName%></h1>" +
				"<section><%= contents%></section>" +
			"</article>");

		oData.forEach(function(v,i,o) {
			var result = compiled(v);
			var eleBase = document.querySelector('body');
			eleBase.insertAdjacentHTML("beforeend", result);
		});
	}

</script>
</head>
<body>
<h1> My Recipe List</h1>
<div id="ajaxCall"> ajaxCall</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="underscore_1.5.2.js"></script>
	<style>
	article {
	background: silver;
	padding : 10px;
	margin : 10px;
	}

	/**
	* ajax요청을 보낼 버튼 스타일
	*/
	#ajaxCall {
	width : 80px;
	height : 80px;
	background-color: silver;
	text-align: center;
	line-height: 80px;
	}

	</style>
	<script>
	window.addEventListener('load', function() { run() });

	/**
	* [run load된 후 처음 실행될 함수]
	* @return {void}
	*/
	function run() {
	document.getElementById('ajaxCall').addEventListener('click', function() {
	runAjax();
	},false)
	}

	/**
	* [runAjax JSONP 요청을 위해서 SCRIPT태그를 생성해서 DOM에 추가한다]
	* @return {void}
	*/
	function runAjax() {
	// 동적으로 생성해야 할 콜백은 다른함수와 충돌이 나지 않도록 랜덤한이름으로 생성한다(시간값을 활용)
	var sDate = (new Date()).getTime()+"";
	var elScript = document.createElement('script');
	elScript.id = "jsonpScript";
	elScript.src = "http://ui.nhnnext.org/phpcode/recipes.php?callback=temp"+sDate;
	var elHead = document.getElementsByTagName('head')[0];

	//전역영역(window)에 함수를 추가한다.
	window["temp"+sDate] = function(oData) {
	runTemplateTest(oData);
	elHead.removeChild(elScript);
	};

	elHead.appendChild(elScript);
	}

	/**
	* template를 실행합니다.
	* @param {Array} oData 서버에서 받은 데이터
	* @return {void}
	*/
	function runTemplateTest(oData) {
	var compiled = _.template(
	"<article>" +
	"<h1><%= recipeName%></h1>" +
	"<section><%= contents%></section>" +
	"</article>");

	oData.forEach(function(v,i,o) {
	var result = compiled(v);
	var eleBase = document.querySelector('body');
	eleBase.insertAdjacentHTML("beforeend", result);
	});
	}

	</script>
	</head>
	<body>
	<h1> My Recipe List</h1>
	<div id="ajaxCall"> ajaxCall</div>
	</body>
	</html>