jquery 이용한 Ajax 데이터로드하기 xml편

Ajax 데이터로드하기 xml편

xml은 가장 널리알려지고 호환성좋은 데이터 형식이다.현재 웹상에서 보편적으로 통용되기에 부담없이 사용가능하다.이번엔 xml파일을 로드해보자

xml

 
  
    
        어쩌고 저쩌고~~
    
  
  

위와같은 파일을 로드해볼것이다. term이라지정된Xml을 h2 엘리멘트로 part의extensible markup language를 h3엘리먼트로 그리고 definition의 내용은 div엘리먼트로 로드해보자 이번엔먼저 만들어질 html 소스부터 생각해보자.앞서 설명한대로라면 다음과같이 나와야 할것이다.

Xml
extensible markup language
어쩌고 저쩌고~~

두번 설명한 기본적인페이지 소스를다시보자 이번엔 part03로 아이디주고 list에 xml삽입이라고 텍스트를 입렸해줬다.

jquery를 이용한 ajax 데이터로드_01


 
html 삽입
 
JSON 삽입
 
xml 삽입
 



로드된 데이터가 들어올자리

불러올 스크립트소스는 json파일을 부를때처럼 get을 사용한다

 $(document).ready(function() {
 $('#part03').click(function() {
     $.get('./ajax_part/aboutXML.xml' ,function(data)  {
   });													  
     return false;
   });
 });

약간 스크립트소스짜는방법이 차이나는데 JSON에서 대괄호entry[' ']로 데이타를 불러왔다면 여기선 $entry.attr()로 불러오게 되어있다.

 $('#content').empty();
     $(data).find('entry').each(function() {
     //데이타에서 entry를 모두검색
        var $entry = $(this); 
        var html = '
' + $entry.attr('term') + '
';
        //term의 속성값을 h2엘리먼트로
        html += '
' + $entry.attr('part') + '
';
        //part의 속성값을 h3엘리먼트로
        html += '
' + $entry.find('definition').text() +'
';
        //역시definition의 속성값을 div엘리먼트로
        $('#content').append(html);

완성된 최종 소스는 아래

   $(document).ready(function() {
   $('#part03').click(function() {
     $.get('./ajax_part/aboutXML.xml' ,function(data) {
    $('#content').empty();
     $(data).find('entry').each(function() {
        var $entry = $(this);
        var html = '
' + $entry.attr('term') + '
';
        html += '
' + $entry.attr('part') + '
';
        html += '
' + $entry.find('definition').text() +'
';
         $('#content').append(html);
       });
     });
     return false;
   });
 });

요약

• 불려진 데이타 xml역시 부른페이지의 css의 영향을 받는다.
• xml데이터 형식은 널리 쓰이고 통용화되어 부담없이사용가능하다.
• xml데이터 형식은 다른 데이타에 비해 조금 느리다.

마지막을 완성된 예제를 직접보자면 여기를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_03.html