BLOG

우선 이 글에서는 PHP 와 AJAX 초보이신 분들을 대상으로 Naver 실시간 검색어를 구현하는 것에 대해 간단히 설명을 하고자 함을 알려드립니다. 다음 실시간 검색어는 등록만 하고 제공되는 코드만 입력하면 되므로 아주 간단!
(바로 올려서 사용가능한 풀 소스 및 페이지를 제공하진 않습니다.)

우선 구현한 모습은 http://gooum.com 에서 볼 수 있습니다.

사용자 삽입 이미지




















다음 실시간 검색어 붙이기

다음은 http://apis.daum.net/register/ajaxapi.daum?t=3 요 페이지에서 등록을 하면 스크립트 코드를 하나 알려주는데 그것을 자신의 페이지에 넣고 싶은 곳에 붙여넣기만 하면 됩니다.
근데 중요한 것은 등록할 때 사용할 자신의 블로그/홈페이지 주소를 적으라고 하는데, 그 때 적은 그 주소에 있는 페이지에서만 사용이 됩니다.

예로.. gooum.com 을 입력하고, 받은 코드를 사용했더니 www.gooum.com 으로 들어오는 경우에는 사용이 안됐습니다. 물론 전혀다른 도메인에서도 사용할 수 없습니다.

그래서 저는 여러번 등록해서 신청해도 되길래 www.gooum.com 용으로 또 등록해서 두 개를 사용해서 처리했습니다.

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 에서 보세요~

사용자 삽입 이미지


사용자 삽입 이미지


사용자 삽입 이미지
Posted by xiles

Comment

  1. 가림토 2007.06.27 10:53 신고  Comment Address  Edit/Delete  댓글쓰기

    네이버 검색순위는 클릭이 되지 않군요.. 이부분 수정 가능한가요?

  2. 가림토 2007.06.27 11:30 신고  Comment Address  Edit/Delete  댓글쓰기

    그럼 Gooum 에도 수정해주세요~ ^^ 다른건 다 괜찮은데 그부분이 쪼금~!!

  3. rocksea 2007.07.23 16:58 신고  Comment Address  Edit/Delete  댓글쓰기

    저도 지금 님께서 올려주신 자료를토대로 한번해보았는데 문제가 두번째 파일의
    request = GetRequestObject(); 객채가 필요합니다 라고나오네요...

    그리고 제가 완전 생초짜라 마지막부분도 보면 실시간검색어가 출력 되는부분에 뭘 어떤식으로해야될지도

    모르겠네요 ㅠㅠ 설명좀 부탁드려도될까요??

    shimsonms1004@hotmail.com 혹시몰라 이메일주소도 남깁니다.

    구경잘하고갑니다.^^

    • xiles 2007.07.23 22:06 신고  댓글주소  수정/삭제

      GetRequestObject함수는 기본적으로 있는 것이 아니라 만들어서 사용하는건데 위에 본문에는 포함하지 않았었던 것입니다.

      본문 처음에 언급했듯이 기본적으로 AJAX에 대해서 강좌를 우선 좀 보신 후에 해보셔야 좀 이해가 가실겁니다~

      GetRequestObject함수는 아래와 같습니다.
      function GetRequestObject()
      {
      var req = null;
      if (typeof XMLHttpRequest != "undefined")
      req = new XMLHttpRequest();
      if (!req && typeof ActiveXObject != "undefined")
      {
      try
      {
      req=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e)
      {
      try
      {
      req=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e2)
      {
      try {
      req=new ActiveXObject("Msxml2.XMLHTTP.4.0");
      }
      catch (e3)
      {
      req=null;
      }
      }
      }
      }
      if(!req && window.createRequest)
      req = window.createRequest();

      if (!req)
      alert("Request Object instantiation failed!");//this.DebugMessage("Request Object Instantiation failed.");

      return req;
      }


      그리고 마지막에 출력되는 부분도 AJAX 기본 강좌를 조금 보시면 어떻게 처리해야 할 지 알 수 있으실 겁니다..
      생초짜시라면 바로 이걸 보시기보다는 AJAX 기본 강좌를 한 번 본 후에..다시 이걸 만들어보세요..

      성공하시길 빕니다~~^^;

This blog is powered by Daum / Skin design by xiles