DNA 포럼 API 서비스 모음 DNA Lens

JavaScript로 오픈API 이용 하기

자바스크립트(JavaScript)는 클라이언트 기반 웹 브라우저에서 실행될 수 있는 언어 입니다. 자바스크립트로 오픈 API를 이용하기 위해서는 JSON이라는 형식으로 제공 되는 API을 이용하면 용이 합니다.

JSON 이란 #

JSON(JavaScript Object Notation)은 자바스크립트 객체 표기법에 기반한 가벼운 데이타 전송 포맷입니다. 웹 페이지에서 사용하는 json.js을 비롯해서 다양한 언어에서 사용가능한 라이브러리를 제공해주고 있습니다.

좀 더 자세하게 알고 싶으시면 다음의 사이트를 참조하세요
  • [http]JSON.org
  • [http]JSON: The Fat-Free Alternative to XML

    • JSON 포멧 훑어보기 #

    JSON은 다음과 같은 기본 요소들을 가집니다.
    • 객체: 객체들의 시작과 끝을 중괄호({})로 묶습니다
    • 객체 멤버: 멤버는 콜론(:)에 의해 구분된 문자열과 값으로 구성됩니다. 멤버들은 콤마(,)에 의해서 구분됩니다.
    • 배열: 배열은 대괄호([])로 묶고, 값들을 담고 있습니다. 값들은 콤마(,)에 의해 구분됩니다.
    • 값 : 값은 문자열, 숫자, 객체, 배열, 또는 리터럴 true, false, 또는 null입니다.
    • 문자열 : 문자열은 큰따옴표("")로 묶고, 유니코드 문자 또는 Escape문자로 쓰는 역슬래시(\)를 가집니다.

    간단한 JSON 출력 예: 
    {
  "Image": {
    "Width":800,
    "Height":600,
    "Title":"View from 15th Floor",
    "Thumbnail":
    {
      "Url":"http:\/\/scd.mm-b1.yimg.com\/image\/481989943",
      "Height": 125,
      "Width": "100"
    },
  "IDs":[ 116, 943, 234, 38793 ]
  }
}

    JSON 사용 방법 #

    • output 값을 json으로 설정하면, json 포맷으로 값이 제공 됩니다. 
    http://apis.daum.net/search/blog?apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&q=korea

    • callback 값을 원하는 함수로 설정하면, 데이터를 함수로 감싸 이용 가능하게 됩니다. 
    http://apis.daum.net/search/blog?apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&q=korea&callback=js_result

    다음은 callback을 이용한 예제입니다.
    [http]JSON_Exam.html 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script language="Javascript" type="text/javascript">
var obj = {
	apikey: "DAUM_SEARCH_DEMO_APIKEY",
	init : function()
	{
		obj.q = document.getElementById('q');
		obj.b = document.getElementById('b');
		obj.r = document.getElementById('r');
		obj.b.onclick = obj.pingSearch;
	},
	// 검색을 요청하는 함수 
 	pingSearch : function()
 	{
	    if (obj.q.value)
	    {
	      obj.s = document.createElement('script');
	      obj.s.type ='text/javascript';
	      obj.s.charset ='utf-8';
	      obj.s.src = 'http://apis.daum.net/search/blog?apikey=' + obj.apikey + '&output=json&callback=obj.pongSearch&q=' + encodeURI(obj.q.value);
	      document.getElementsByTagName('head')[0].appendChild(obj.s);
	    }
 	},
 	// 검색 결과를 뿌리는 함수 
	pongSearch : function(z)
	{
		obj.r.innerHTML = '';
		for (var i = 0; i < z.channel.item.length; i++)
		{
			var li = document.createElement('li');
			var a = document.createElement('a');
			var p = document.createElement('p');
			a.href = z.channel.item[i].link;
			a.innerHTML = obj.escapeHtml(z.channel.item[i].title);
			p.innerHTML =  obj.escapeHtml(z.channel.item[i].description);
			
			li.appendChild(a);
			li.appendChild(p);
			obj.r.appendChild(li);
		}
	},
	// HTML태그 안 먹게 하는 함수
	escapeHtml : function(str) 
	{
		str = str.replace(/&amp;/g, "&");
		str = str.replace(/&lt;/g, "<");
		str = str.replace(/&gt;/g, ">");
		return str;
	}
};
window.onload = function()
{
  obj.init();
  obj.pingSearch();
};
</script>
</head>
<body>
	<div id="divSearch">
		블로그 검색 예제
		<input id="q" type="text"/>
		<input id="b" type="submit" value="검색"/>
	</div>
	<div id="r"></div>
</body>
</html>

    • JSON 출력 텍스트는 JavaScript의 eval()함수로 직접 해석될 수 있습니다. 
      var myObj = eval( '(' + jsontext + ')' );

    JSON을 지원하는 API #

    검색 API #

    쇼핑 API #