[Jquery] Ajax xml 파싱

개발 노트/JQuery  2012.09.13 10:11



안녕하세요 개발자 명월입니다.

 

요번 포스팅에서 소개할 Ajax에서 xml 파싱 할 방법입니다. 보통은 JSON을 파싱해서 사용하는게 대부분이지만 xml도 할 경우가 있으니 참고해 두는 것도 좋을 듯 싶습니다.

 

Ajax 용법

 

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

 

예제입니다.

 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2 <HTML>
  3  <HEAD>
  4   <TITLE> New Document </TITLE>
  5   <META NAME="Generator" CONTENT="EditPlus">
  6   <META NAME="Author" CONTENT="">
  7   <META NAME="Keywords" CONTENT="">
  8   <META NAME="Description" CONTENT="">
  9   <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
10   <script>
11     var R = new Array(10);
12 function Node(){
13 var K="";
14 var S="";
15 var V="";
16 }
17 function Item_trans(object){
18 var item = object.getElementsByTagName('item');
19 return item[0];
20 }
21 function node_trans(object,name){
22 return object.getElementsByTagName(name)[0];
23 }
24 function get_data(key){
25 $.ajax({
26 type:"GET",
27 url:"http://openapi.naver.com/search",
28 data : "key="+key+"&query=nexearch&target=rank",
29 dataType : "xml",
30 success:function(object){
31 var item = Item_trans(object);
32 for(var i=0;i<10;i++){
33 R[i] = new Node();
34 R[i].K = node_trans(item,'R'+(i+1)).getElementsByTagName('K')[0].firstChild.nodeValue;
35 R[i].S = node_trans(item,'R'+(i+1)).getElementsByTagName('S')[0].firstChild.nodeValue;
36 R[i].V = node_trans(item,'R'+(i+1)).getElementsByTagName('V')[0].firstChild.nodeValue;
37 }
38 set_design(R);
39             },
40             error: function(xhr,status,error){
41             }
42 });
43 }
44 function set_design(R){
45 for(var i=0; i<10; i++){
46 $("#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>");
47 }
48 }
49 $(document).ready(function(){
50 get_data("*****************");
51 });
52   </script>
53  </HEAD>
54  <BODY>
55 <div id=search_lank></div> 
56  </BODY>
57 </HTML>
58

 

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

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

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

 

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

 

 

결과 화면 입니다.

 

 

 

예제 첨부파일 넣습니다. 확인해 보세요.

 

Noname1.html

 

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

 


댓글 0개가 달렸습니다.
댓글쓰기