스토브 훌로구 :: CrossDomain Ajax 호출 #2 : jQuery JSONP를 이용한 Daum OpenAPI 활용

CrossDomain Ajax 호출 #2 : jQuery JSONP를 이용한 Daum OpenAPI 활용

잡다구리 샘플 2011/08/11 02:10

CrossDomain Ajax 호출 #1 에서 연구해 보았던 jQuery JSONP 를 활용해 다음 OpenAPI 로 이미지를 검색하는 샘플을 제작해 보았다.

다행스럽게도 다음 오픈 API에서 제공하는 많은 API 들이 대부분 callback이라는 파라메터를 받는다. 그렇기 때문에 JSONP 로 ajax 호출을 통해 깔쌈하게 뭔가를 맨들수 있다.

찾아봤는데 네이버 오픈 API는 아쉽게도 callback 요런 종류의 파라메터를 받는 API 가 하나도 없는것 같다. 요것은 JSONP 방식이 아닌 Proxy Servlet 방식을 이용해서 데이터를 받아야만 한다. 뭐 이것은 차후에 한번 해 봐야지~

먼저 샘플을 맨들기 전에 다음 OpenAPI 사이트(http://dna.daum.net/DNALatte/openapi/about)에 가서 Key를 발급받아야 한다. 샘플로 검색API 에 있는 이미지 검색 API를 활용할 것이기 때문에 검색 API용 키를 발급 받는다.

localhost:8080 에서 테스트를 할것이기 때문에 사용URL 란에는 http://localhost:8080 을 입력하고 확인 버튼을 클릭하자! 고러면 키가 발급된다.

키를 발급 받았다면 샘플 제작 고고씽~

이미지 API 를 호출하는 jQuery 코드는 요렇게~

$.ajax({
	url : "http://apis.daum.net/search/image",
	dataType : "jsonp",
	type : "post",
	jsonp : "callback",
	data : {
		apikey : "발급받은 Key",        // API KEY
		q : "한예슬",                   // 검색어
		result : "10",                 // 한페이지에 출력될 결과수
		pageno : $("#pageno").val(),   // 페이지번호
		output : "json"                // JSONP 형식으로 호출하기 때문에 결과값 포맷은 json
	},
	success : function(r){
		//검색결과 처리
	}
});

검색된 결과는 json 형태로 리턴된다. json으로 보내달라고 요청했으니깐~

console에다 찍어보니 데이터 형태가 죠렇게 되있다. 검색결과에 대한 자세한 설명은 http://dna.daum.net/apis/search/image 요기에서 참고하면 된다.

검색결과는 대충보니 channel 안에 item 에 배열로 들어가 있다~ 뭐 하여튼 저 검색결과를 활용해서 쫌 쓸만하게 제작을 하면 되는 것이다!

샘플로 맨들어본 api.html 의 전체소스

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Daum OpenAPI with jQuery</title>
	
	<script type="text/javascript" src="/resource/js/jquery-1.6.2.min.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			// 이미지 검색 할래염 버튼
			$("#searchBtn").click(function(){
				// 기존 검색결과랑 조건 지우기
				$("#imgList").empty();
				$("#pageInfo").val("1");
				
				searchImg();
			});
			
			// 더보기버튼
			$("#moreBtn").click(function(){
				$("#pageno").val(parseInt($("#pageno").val())+1);
				
				searchImg();
			});
			
			var searchImg = function(){
				$.ajax({
					url : "http://apis.daum.net/search/image",
					dataType : "jsonp",
					type : "post",
					jsonp : "callback",
					data : {
						apikey : "발급받은키",               // API KEY
						q : $("#keyword").val(),         // 검색어
						result : "10",                   // 한페이지에 출력될 결과수
						pageno : $("#pageno").val(),     // 페이지번호
						output : "json"                  // JSONP 형식으로 호출하기 때문에 결과값 포맷은 json
					},
					success : function(r){
						r = r.channel;
						$("#pageInfo").text("검색된 이미지는 " + r.totalCount +"개 에요~")
						
						$.each(r.item, function(idx, data){
							var img = $("").attr({
								src : data.thumbnail,
								title : data.title
							}).click(function(){
								window.open(data.image);
							}).appendTo("#imgList");
						});
					}
				});
			};
		});
	</script>
	
	<style type="text/css">
		#result {width:800px;}
		#imgList {width: 100%;border:2px solid #ccc; padding:5px}
		#imgList img{border:1px solid #cccccc;padding:2px;margin:5px;cursor:pointer}
		#moreBtn {width:100%;height:60px;}
	</style>
</head>
<body>
	<input type="hidden" id="pageno" value="1"/>
	<input type="text" id="keyword" />
	<button id="searchBtn">이미지 검색 할래염</button>
	
	<div id="result">
		<span id="pageInfo"></span>
		<div id="imgList">여기에 검색된 이미지가 나타날꺼임</div>
		<button id="moreBtn">더보기</button>
	</div>
</body>
</html>

[샘플소스]DaumAPI.war