@markdown
# Ajax 사용한 Daum 검색 API 사용하기
____
## Daum 개발자 페이지 등록 및 API 키 생성
- API 사용하기 위해선 다음 계정이 필요하다.
- [개발자 페이지] <u>[http://developers.daum.net](http://developers.daum.net)</u> 로그인
- 콘솔창 탭에서 앱 만들기

- API Key 생성

- 웹브라우저 또는 모든 플랫폼 선택

## Daum 블로그 검색 API
____
- 블로그 검색 API : XML, JSON(P) 형식으로 전달하는 API 서비스
- API 키와 GET 방식을 통해 검색 데이터를 가져온다.
- 다음 블로그 검색 API 문서 : [https://developers.daum.net/services/apis/search/blog](https://developers.daum.net/services/apis/search/blog)

- 블로그 검색 API 기술문서에 파라미터 값과 사용 예제가 있으니 참조하면 좋다.
`https://apis.daum.net/search/blog?apikey={apikey}&q=카카오프렌즈 -네오&output=json`
- 질의 검색(q)을 `카카오프렌즈`로 검색하고, `-네오`는 제외하는 질의문이다.
- 오류 없이 검색 성공하면 `json` 형식으로 데이터 출력이된다.
## Daum 블로그 검색 Javascript 소스 코드
____
- 내부 `localhost` 서버로 사용하는 테스트 환경에서는 `dataType`에 `json`으로 설정해주면 보안상 내부 데이터만 가져오기 때문에 외부에 있는 daum 서버에서 결과 값을 가져오지 못하게 된다. 그래서 ajax의 dataType을 `jsonp`로 설정해야 출력할 수 있다.
<pre><code class="html" style="font-size:14px"><script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$(":button").click(function(){
$.ajax({
url: "https://apis.daum.net/search/blog",
type: "get",
data: {
apikey: "Your API Key",
q:'알고리즘',
result: 5,
output: "json"
},
dataType: "jsonp",
success: callback,
error: function(){
alert('error');
}
});
});
});
function callback(data){
var itemList = data.channel.item;
for(var i=0; i<itemList.length; i++){
var item = itemList[i];
var title = item.title;
var link = item.link;
var desc = item.description;
$('#searchResult').append('<hr/>');
$('#searchResult').append("<a href='" + link + "'>" + title + "</a>");
$('#searchResult').append("<br/>");
$('#searchResult').append(desc + '<br/>')
$('#searchResult').append('<hr/>');
}
}
</script>
</code></pre>
## Daum 블로그 검색 HTML 소스 코드
____
<pre><code class="html" style="font-size:14px"><body>
<h2>블로그 검색페이지</h2>
검색어 입력 : <input type="text" name="search" size="40"/>
<input type="button" value="검색"/><br/>
<h4>검색결과</h4>
<div id="searchResult"></div>
</body>
</code></pre>
'웹 프로그래밍' 카테고리의 다른 글
Spring - 핵심 개념(IoC, DI) (0) | 2017.07.05 |
---|---|
Spring - Maven 설치 및 Eclipse 환경설정 하기 (0) | 2017.07.04 |
AJAX 비동기 처리 방식 (0) | 2017.06.20 |
JSP, jQuery로 간단한 텍스트 편집기 만들기 (1) | 2017.06.13 |
Tomcat 웹 서버 설치하기 (0) | 2017.05.30 |