[Jquery] Ajax xml 파싱

Development note/Javascript, JQuery, CSS  2012. 9. 13. 10:11

안녕하세요. 명월입니다.


요번 포스팅에서 소개할 Ajax에서 xml의 데이터를 받는 방법입니다. 보통은 Json파일로 데이터를 받아서 사용하지만 xml로 할 수 있습니다.예를 들면 티스토리에서 rss와 연결해서 사용하는 방법이던가..

function get_data(key){
  $.ajax({
    type:"GET",
    url:"url",
    data : "",
    dataType : "xml",
    success:function(object){ },
   error: function(xhr,status,error){ }
  }); 
}

예제입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE> New Document </TITLE>
    <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
      var R = new Array(10);
      function Node(){
        var K="";
        var S="";
        var V="";
      }
      function Item_trans(object){
        var item = object.getElementsByTagName('item');
        return item[0];
      }
      function node_trans(object,name){
        return object.getElementsByTagName(name)[0];
      }
      function get_data(key){
        $.ajax({
          type:"GET",
          url:"http://openapi.naver.com/search",
          data : "key="+key+"&query=nexearch&target=rank",
          dataType : "xml",
          success:function(object){
            var item = Item_trans(object);
            for(var i=0;i<10;i++){
              R[i] = new Node();
              R[i].K = node_trans(item,'R'+(i+1)).getElementsByTagName('K')[0].firstChild.nodeValue;
              R[i].S = node_trans(item,'R'+(i+1)).getElementsByTagName('S')[0].firstChild.nodeValue;
              R[i].V = node_trans(item,'R'+(i+1)).getElementsByTagName('V')[0].firstChild.nodeValue;
            }
            set_design(R);
          },
          error: function(xhr,status,error){
          }
        }); 
      }
      function set_design(R){
        for(var i=0; i<10; i++){
          $("#search_lank").append("<LI><SPAN id=number class=number>"+(i+1)+"</SPAN><SPAN id=keyword class=keyword>"+R[i].K+"</SPAN><SPAN id=upndn class=upndn>"+R[i].S+"</SPAN><SPAN id=upndn_number class=upndn_number>"+R[i].V+"</SPAN></LI>");
        }
      }
      $(document).ready(function(){
        get_data("*****************");
      });
    </script>
  </HEAD>
  <BODY>
    <div id=search_lank></div>  
  </BODY>
</HTML>

위 코드는 Same Origin Policy 에 걸린 소스 입니다.

XML 은 JSONP 와 마찬가지로 안 걸릴 줄 알고 해본 것이나 결국, 걸려서 실패 된 소스입니다.

그래도 로컬에서는 되니 한번쯤 확인 해 볼만한 소스입니다.

 

※물론 Key 값에는 https://dev.naver.com/openapi/register 에서 발부 받은 자기 키값으로 확인하세요.

결과 화면 입니다.

Noname1.html

※ 혹시 Same Origin Policy 를 피할 수 있는 방법이 있으면 댓글로 알려주세요.

'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글

[Javascript] 소스 보기 라이브러리 - Syntaxhighlighter  (0) 2013.03.12
[Jquery] 스크롤링 효과 예제  (0) 2012.10.06
[Jquery] 롤링 라이브러리 - jcarousellite  (0) 2012.09.24
[Jquery] Html에서 나타내는 Treeview  (0) 2012.09.22
[Jquery] 슬라이드 메뉴  (8) 2012.09.19
[Jquery] append(), appendto()  (0) 2012.09.09
[Jquery] 소스보기, 새로고침, 드래기 막기 소스  (0) 2012.09.08
[Jquery] Ajax 관련 이벤트  (0) 2012.09.07