이제 Open API를 사용할 준비는 모두 마쳤다. 지금부터 실제 코드를 통해 Open API를 활용해 보도록 하자. 이번에 사용할 API는 네이버의 동영상검색 API이다. Open API를 활용하고, 이를 위한 개발은 아주 다양하다. 이번 예제에서는 언어에 종속되지 않도록 자바스크립트(Javascript) 수준의 코드만 이용하여 Open API를 활용하는 예제를 만들어 보겠다.
아래의 코드를 메모장 또는 HTML 에디터에서 입력한 뒤 실행하여 보자.
■ NaverVideo.htm
---------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>네이버동영상검색</title>
</head>
<script type="text/javascript" src="prototype-1.4.0.js"></script>
<script type="text/javascript" src="naver_video.js"></script>
<body>
<h3>네이버동영상검색</h3><br />
검색어: <input type=text id=rss> <input type=button value=" 검색" onclick="GetRSS(rss.value)"><br /><br />
<div id=d></div>
</body>
</html>
<script type="text/javascript">
function GetRSS( keyword )
{
var myAjax =
new Ajax.Request( 'http://openapi.naver.com/search?key=인증키값&query='
+encodeURIComponent(keyword)+'&target=video&start=1&display=5',
{method: 'get', parameters: '', onComplete: GetRSSHandler}
);
}
function GetRSSHandler(originalRequest)
{
var rss = readRSS(originalRequest.responseText) ;
var str ;
str = "<table>" ;
if( rss.cnt == 0 )
str += "<tr><td>검색결과가없습니다.</td></tr>" ;
for( i = 0 ; i < rss.cnt ; i++ )
{
str += "<tr height=20><td nowrap><a href='" + rss.link[i] + "' target=_blank>" + rss.title[i] + "</a></td></tr>" ;
str += "<tr><td nowrap><a href='" + rss.link[i] + "' target=_blank><img src=\"" + rss.thumbnail[i] + "\" border=0 /></a><br /><br /></td></tr>" ;
}
str += "<tr height=30><td></td></tr></table>" ;
$(d).innerHTML = str ;
}
</script>
---------------------------------------------------------------------------
AJAX 구현을 위해 prototype JavaScript 프레임워크를 사용하고 있다. (AJAX와 Prototype 프레임워크는 이 원고의 범위를 넘어가기 때문에 다른 자료를 참고하기 바란다) GetRSS() 함수를 통해서 실제 Open API를 호출하고 있다. 이때 가장 중요한 부분이 정확한 호출주소와 key값을 입력하는 것이다. encodeURIComponent(keyword)는 한글 처리를 위해 사용하는 구문이다.
이렇게 AJAX를 이용하여 XML 데이터를 전달받고, 그 결과를 화면에 출력하는 코드로 구성되어 있다.
■ naver_video.js
---------------------------------------------------------------------------
function readRSS(XML)
{
if(window.ActiveXObject)
{
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
while(xmlDoc.readyState!=4) document.write('Loading...');
}
else if(document.implementation&&document.implementation.createDocument)
xmlDoc=document.implementation.createDocument("","doc",null);
xmlDoc.loadXML(XML);
items=xmlDoc;
if(xmlDoc.readyState!=4)
return false;
var items_count=items.getElementsByTagName('item').length;
var RSSData = new Array() ;
RSSData.title = new Array() ;
RSSData.link = new Array() ;
RSSData.description = new Array() ;
RSSData.thumbnail = new Array() ;
for(var i=0; i<items_count; i++)
{
if(items.getElementsByTagName('item')[i].getElementsByTagName('title').length==1) RSSData.title[i]=items.getElementsByTagName('item')[i].getElementsByTagName('title')[0].firstChild.nodeValue;
if(items.getElementsByTagName('item')[i].getElementsByTagName('link').length==1)
RSSData.link[i]=items.getElementsByTagName('item')[i].getElementsByTagName('link')[0].firstChild.nodeValue;
if(items.getElementsByTagName('item')[i].getElementsByTagName('description').length==1)
RSSData.description[i]=items.getElementsByTagName('item')[i].getElementsByTagName('description')[0].firstChild.nodeValue;
if(items.getElementsByTagName('item')[i].getElementsByTagName('thumbnail').length==1)
RSSData.thumbnail[i]=items.getElementsByTagName('item')[i].getElementsByTagName('thumbnail')[0].firstChild.nodeValue;
}
RSSData.cnt = items_count ;
return RSSData ;
}
---------------------------------------------------------------------------
XMLDOM을 이용하여 Open API의 결과를 바인딩하는 과정의 코드이다. 일반 RSS와는 다르게 네이버 동영상검색 Open API가 제공하는 thumbnail 노드에 주목해야 한다. 이 처리를 위해 RSSData.thumbnail = new Array()를 이용하여 배열을 선언하고, getElementsByTagName 함수를 이용하여 값을 저장하고 있다. 나머지는 일반 RSS 형식과 동일하다. Open API를 실행한 결과로 출력되는 RSS 형식의 XML 스트림 데이터를 각