반응형
사실 제가 한번 해볼려구 했는데 넘 어렵네요
그래서 결국 포기....
우선 이 글에서는 PHP 와 AJAX 초보이신 분들을 대상으로 Naver 실시간 검색어를 구현하는 것에 대해 간단히 설명을 하고자 함을 알려드립니다. 다음 실시간 검색어는 등록만 하고 제공되는 코드만 입력하면 되므로 아주 간단!
(바로 올려서 사용가능한 풀 소스 및 페이지를 제공하진 않습니다.)
자료출처 : http://xiles.net
다음 실시간 검색어 붙이기
다음은 http://apis.daum.net/register/ajaxapi.daum?t=3 요 페이지에서 등록을 하면 스크립트 코드를 하나 알려주는데 그것을 자신의 페이지에 넣고 싶은 곳에 붙여넣기만 하면 됩니다.
근데 중요한 것은 등록할 때 사용할 자신의 블로그/홈페이지 주소를 적으라고 하는데, 그 때 적은 그 주소에 있는 페이지에서만 사용이 됩니다.
Naver 실시간 검색어 만들기
우선 네이버의 경우 Naver Open API를 사용해야 하고, 이를 위해서는 http://openapi.naver.com 에서 openapi를 사용하겠다는 등록을 하고 키를 받은 후 이 키를 사용해야 합니다. 이 키는 아래 설명 중 naver_queryrank.php 에서 사용됩니다.
등록을 했다면, 아래와 같이 페이지를 만들면 됩니다.
우선 실시간 검색어를 붙일 페이지에 아래와 같은 자바스크립트 함수를 만듭니다.
몇 초마다 반복해서 순위를 갱신할 수 있도록 해줍니다. 그리고 이 함수를 body의 onload이벤트에 연결합니다. (예: <body onload="updateList()">)
위에서 updateNaverRank() 함수에서는 AJAX를 이용해서 검색어 순위 정보를 얻어와서 페이지에 뿌려주는 역할을 합니다. 실제 정보를 받아온 후 처리는 request.onreadystatechange에 연결된 HandleStateChange 함수에서 처리합니다. 그리고 네이버쪽에 연결해서 정보를 가져오는 것은 naver_queryrank.php 에서 처리하게 됩니다.
HandleStateChange 부분을 보면, 네이버와 연결해 받아온 xml 정보를 request.responseXML을 통해서 얻어옵니다. 그리고 xml에서 item 태그를 찾은 후 그 노드를 updateNaverRankList()에 넘겨줍니다. 이 함수에서 페이지의 내용을 업데이트 시켜줍니다.
위에서 설명한 것 처럼 , naver_queryrank.php 에서 이일을 하고 방식은 아래와 같습니다.
(request 는 XMLHttpRequest 객체)
request ----> naver_queryrank.php ----> Naver Open API
HandleStateChange() <---- <----
naver_queryrank.php의 소스는 아래와 같습니다.
처음에 OpenAPI 등록하면서 받은 키는 아래 소스에서 5번째 줄,
GET /search?key=요부분에다가 넣어주면 됩니다&query=nex...
마지막으로 실제로 페이지를 업데이트하는 updateNaverRankList() 함수에서는
아래와 같이 필요한 노드의 텍스트를 얻어와서 원하는 부분의 내용을 Javascript를 사용해서 바꾸어주면 됩니다. (K는 키워드, S는 순위증감, V는 순위증감 정도를 나타냅니다.)
i는 0~9까지 돌아가면서 처리하면 됩니다. (1위부터 10위까지)
K, S, V를 가지고,
미리 만들어놓은 페이지에 내용을 업데이트 해주면 됩니다.
예) getElementById("rank1").innerHTML = K ;
네이버 Open API 문서를 참고하면, 각 주제별 실시간 검색어를 얻어 오 수도 있습니다.
아래는 네이버 OpenAPI 문서에서 실시간 검색어 부분 내용을 캡쳐해온 것입니다.
더 자세한 내용은 http://openapi.naver.com 에서 보세요~
