sorie · November 14, 2018 06:51 · sorie · Nov 14, 2018
diff --git a/getData.html b/getData.html
 <!DOCTYPE html>
 <html lang="ko">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>get data</title>
 </head>
 <body>
  <button id="chart_live" onclick="loadDoc('now');">실시간</button>
  <button id="chart_date" onclick="loadDoc('day');">일간</button>
  <button id="chart_month" onclick="loadDoc('mon');">월간</button>
  <button id="chart_year" onclick="loadDoc('year');">연간</button>
  <h1 id="title"></h1>
  <h2 id="date"></h2>
  <h3 id="song1"></h3>
  <h3 id="song2"></h3>
  <button id="btn_more" onclick="loadMore();">더보기</button>
 <script>
 //크로스도메인에 대비한 JSONP 사용
 //즉시실행함수 (모듈화,public과 private 분리할수 있다.)*호이스팅되지 않음.
 var loadJSONP = (function(){
  //모듈 스코프 내에서 사용할 변수 작성
  var unique = 0;
  //public
  return function(url, callback, context) {
    // INIT
    var name = "_jsonp_" + unique++;
    if (url.match(/\?/)) url += "&callback="+name;
    else url += "?callback="+name;
    
    // Create script
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    
    // Load JSON
    document.getElementsByTagName('head')[0].appendChild(script);

    // Setup handler (private)
    window[name] = function(data){
      callback.call((context || window), data);
      document.getElementsByTagName('head')[0].removeChild(script);
      script = null;
      delete window[name];
    };
  };
 })();

 var cnt = 2;
 var s_date = null;

 //최신차트 : 처음에 로딩
 LoadBase();

 function init(page_num,page_size,s_date){
  this.page_num = page_num;
  this.page_size = page_size;
  this.s_date = s_date;
  this.url = "http://content.api.mnet.com/chart/total/hourly?page_num="+this.page_num+"&page_size="+this.page_size+"&date="+s_date;
 }

 //일간 월간 연간 차트
 function loadDoc(type){
  if(type === "now"){s_date = dateFormat("yyyymmddhh");}
  if(type === "day") s_date = dateFormat("yyyymmdd");
  if(type === "mon") s_date = dateFormat("yyyymm");
  if(type === "year") s_date = dateFormat("yyyy");
  cnt = 2;
  document.getElementById("song1").innerHTML = "";
  document.getElementById("song2").innerHTML = "";
  LoadBase();
 }

 //더보기
 function loadMore(){
  var s_count = 20 * cnt;
  var b = new init(1,s_count,s_date);
  loadJSONP(
    b.url,//인자값전달(Argument)
    function(data) { //콜백함수
      var songs = data.data;
      var res = "";
      var i;
      (cnt === 2) ?  i = 10 : i = (s_count-20);
      for(var j = i ; j < s_count ; j++){
        if(songs[j] != null){
          res += (j+1) + "위 " + songs[j].songnm + "  ";
        }else{
          alert("더이상 없습니다.");
          break;
        }
      }
      document.getElementById("song2").append(res);
      cnt++;
    }
  );
 }

 function LoadBase(){
  var a;
  (s_date == "") ? a = new init(1,10,s_date) : a = new init(1,10,s_date);
  loadJSONP(
    a.url,//인자값전달(Argument)
    function(data) { //콜백함수
      var title = data.info.APICODE;
      var date = data.info.chartDate;
      var song_10 = data.data;
      document.getElementById("title").innerHTML = title;
      document.getElementById("date").innerHTML = date;
      for(var i = 0; i < 10; i++){
        document.getElementById("song1").append(parseInt(i+1) + "위 " + song_10[i].songnm + "  ");
      }
    }
  );
 }

 function dateFormat(type){
  var all_date = new Date();
  var yyyy = all_date.getFullYear();
  var mm = String(all_date.getMonth()+1);
  var dd = String(all_date.getDate());
  var hh = String(all_date.getHours());

  if(mm.length < 2) mm = '0' + mm;
  if(dd.length < 2) dd = '0' + dd;
  if(hh.length < 2) hh = '0' + hh;

  var yyyymm = [yyyy,mm].join('');
  var yyyymmdd = [yyyy,mm,dd].join('');
  var yyyymmddhh = [yyyy,mm,dd,hh].join('');

  if(type === "yyyy") return yyyy;
  else if(type === "yyyymm") return yyyymm;
  else if(type === "yyyymmdd") return yyyymmdd;
  else if(type === "yyyymmddhh") return yyyymmddhh;
  else return yyyymmddhh;
 }

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>get data</title>
	</head>
	<body>
	<button id="chart_live" onclick="loadDoc('now');">실시간</button>
	<button id="chart_date" onclick="loadDoc('day');">일간</button>
	<button id="chart_month" onclick="loadDoc('mon');">월간</button>
	<button id="chart_year" onclick="loadDoc('year');">연간</button>
	<h1 id="title"></h1>
	<h2 id="date"></h2>
	<h3 id="song1"></h3>
	<h3 id="song2"></h3>
	<button id="btn_more" onclick="loadMore();">더보기</button>
	<script>
	//크로스도메인에 대비한 JSONP 사용
	//즉시실행함수 (모듈화,public과 private 분리할수 있다.)*호이스팅되지 않음.
	var loadJSONP = (function(){
	//모듈 스코프 내에서 사용할 변수 작성
	var unique = 0;
	//public
	return function(url, callback, context) {
	// INIT
	var name = "_jsonp_" + unique++;
	if (url.match(/\?/)) url += "&callback="+name;
	else url += "?callback="+name;

	// Create script
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = url;

	// Load JSON
	document.getElementsByTagName('head')[0].appendChild(script);

	// Setup handler (private)
	window[name] = function(data){
	callback.call((context \|\| window), data);
	document.getElementsByTagName('head')[0].removeChild(script);
	script = null;
	delete window[name];
	};
	};
	})();

	var cnt = 2;
	var s_date = null;

	//최신차트 : 처음에 로딩
	LoadBase();

	function init(page_num,page_size,s_date){
	this.page_num = page_num;
	this.page_size = page_size;
	this.s_date = s_date;
	this.url = "http://content.api.mnet.com/chart/total/hourly?page_num="+this.page_num+"&page_size="+this.page_size+"&date="+s_date;
	}

	//일간 월간 연간 차트
	function loadDoc(type){
	if(type === "now"){s_date = dateFormat("yyyymmddhh");}
	if(type === "day") s_date = dateFormat("yyyymmdd");
	if(type === "mon") s_date = dateFormat("yyyymm");
	if(type === "year") s_date = dateFormat("yyyy");
	cnt = 2;
	document.getElementById("song1").innerHTML = "";
	document.getElementById("song2").innerHTML = "";
	LoadBase();
	}

	//더보기
	function loadMore(){
	var s_count = 20 * cnt;
	var b = new init(1,s_count,s_date);
	loadJSONP(
	b.url,//인자값전달(Argument)
	function(data) { //콜백함수
	var songs = data.data;
	var res = "";
	var i;
	(cnt === 2) ? i = 10 : i = (s_count-20);
	for(var j = i ; j < s_count ; j++){
	if(songs[j] != null){
	res += (j+1) + "위 " + songs[j].songnm + " ";
	}else{
	alert("더이상 없습니다.");
	break;
	}
	}
	document.getElementById("song2").append(res);
	cnt++;
	}
	);
	}

	function LoadBase(){
	var a;
	(s_date == "") ? a = new init(1,10,s_date) : a = new init(1,10,s_date);
	loadJSONP(
	a.url,//인자값전달(Argument)
	function(data) { //콜백함수
	var title = data.info.APICODE;
	var date = data.info.chartDate;
	var song_10 = data.data;
	document.getElementById("title").innerHTML = title;
	document.getElementById("date").innerHTML = date;
	for(var i = 0; i < 10; i++){
	document.getElementById("song1").append(parseInt(i+1) + "위 " + song_10[i].songnm + " ");
	}
	}
	);
	}

	function dateFormat(type){
	var all_date = new Date();
	var yyyy = all_date.getFullYear();
	var mm = String(all_date.getMonth()+1);
	var dd = String(all_date.getDate());
	var hh = String(all_date.getHours());

	if(mm.length < 2) mm = '0' + mm;
	if(dd.length < 2) dd = '0' + dd;
	if(hh.length < 2) hh = '0' + hh;

	var yyyymm = [yyyy,mm].join('');
	var yyyymmdd = [yyyy,mm,dd].join('');
	var yyyymmddhh = [yyyy,mm,dd,hh].join('');

	if(type === "yyyy") return yyyy;
	else if(type === "yyyymm") return yyyymm;
	else if(type === "yyyymmdd") return yyyymmdd;
	else if(type === "yyyymmddhh") return yyyymmddhh;
	else return yyyymmddhh;
	}

	</script>
	</body>
	</html>