CrossDomain Ajax 호출 #2 : jQuery JSONP를 이용한 Daum OpenAPI 활용
잡다구리 샘플 2011. 8. 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 코드는 요렇게~
검색된 결과는 json 형태로 리턴된다. json으로 보내달라고 요청했으니깐~
console에다 찍어보니 데이터 형태가 죠렇게 되있다. 검색결과에 대한 자세한 설명은 http://dna.daum.net/apis/search/image 요기에서 참고하면 된다.
검색결과는 대충보니 channel 안에 item 에 배열로 들어가 있다~ 뭐 하여튼 저 검색결과를 활용해서 쫌 쓸만하게 제작을 하면 되는 것이다!
샘플로 맨들어본 api.html 의 전체소스
실행결과 Demo 원하는 검색어를 입력후 "이미지 검색 할래염" 버튼을 클릭해 보셈~
다행스럽게도 다음 오픈 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실행결과 Demo 원하는 검색어를 입력후 "이미지 검색 할래염" 버튼을 클릭해 보셈~
여기에 검색된 이미지가 나타날꺼임
