jQuery를 활용한 XML data island 변경

Name

achor

( 2013-11-16 22:50:04 Hit: 2851 Vote: 79 )

Homepage

http://empire.achor.net

Category

웹개발

2000년 초반 유행한 XML data island.

XML 형식의 data를 직접 컨트롤 할 수 있어서 간단하게 소식을 전하기엔 매우 편리하긴 했지만
IE 밖에 지원하지 않는 치명적인 단점이 있었지요.

결국 웹표준이 중시되는 지금에 와서는
MS 또한 지원을 공식적으로 중단하여
IE10부터는 IE에서조차 사용이 불가능 해졌습니다.
http://msdn.microsoft.com/ko-kr/library/ie/hh801224(v=vs.85)

어디선가 XML data island 방식의 게시판을 jQuery로 변환하는 걸 본 적은 있는 듯 한데
다시 찾으려니 쉽지 않아
짬을 내 후딱, 직접 만들어 보았습니다.
요즘 jQuery의 정교함에 새삼 놀라고 있기도 하여 연습 삼아.

물론 저는 단순 취미로 웹개발을 즐길 뿐, 전문적인 개발자는 아니기에
코드의 수준은 매우 낮습니다.

곧 저와 같은 어려움을 겪은 분들이라면
참고는 하시되
코드는 직접 좀 더 세련되어 짜시길 추천 드립니다. -__-;

예전 XML data island의 코드는 아래와 같습니다.
10년 전 짠 코드라서 table로 틀을 잡고 있습니다. -__-;

<xml id='DSONOTICE' src='XML_DATA_FILE'></xml>
<table id='NOTICE' datasrc='#DSONOTICE' datapagesize='6' cellpadding='0' width='100%' border='0' align='center' style='table-layout: fixed;'>
   <col width="100%"></col><col width='55'></col>
   <tr>
       <td width="100%" height='18px' nowrap='nowrap'>
           <span datafld='cont'>
               IE 전용 XML 데이터바인딩
           </span>
       </td>
       <td align='right'><span datafld='date'></span></td>
   </tr>
   <tr>
       <td colspan='2' bgcolor='#cacaca' height='1'></td>
   </tr>
</table>
 
<table width="100%" cellpadding='0' cellspacing='0' border='0' align='center'>
   <tr>
       <td width='50%' align='left'>   <a href='#' onclick='NOTICE.previousPage()'>prev</a></td>
       <td width='50%' align='right'><a href='#' onclick='NOTICE.nextPage()'>next</a>   </td>
   </tr>
</table>

일단 html 내 코드는 아래와 같이 바꿨습니다.
6줄씩 표현하고 있어서 cont0부터 cont5까지 id를 부여했고,
이전, 다음 페이지를 계산하기 위해 xmlpagepnum, xmlpagennum으로 hidden값을 부여해 놨습니다.

<table cellpadding='0' width='100%' border='0' align='center' style='table-layout: fixed;'>
   <col width="100%"></col><col width='55'></col>
<?php
for($i=0;$i<6;$i++) {?>
   <tr>
       <td width="100%" height='18px' nowrap='nowrap'>
           <span id='cont<?=$i?>'>
           </span>
       </td>
       <td align='right'>
           <span id='date<?=$i?>'></span>
       </td>
   </tr>
   <tr>
       <td colspan='2' bgcolor='#cacaca' height='1'></td>
   </tr><?php
}
?>
</table>
<div style='display:none;'><input id='xmlpagepnum' type='hidden' value='0' /><input id='xmlpagennum' type='hidden' value='0' /></div>
 
<table width="100%" cellpadding='0' cellspacing='0' border='0' align='center'>
   <tr>
       <td width='50%' align='left'>  < <a href='#' onclick='acxmlboard(1)'>prev</a></td>
       <td width='50%' align='right'><a href='#' onclick='acxmlboard(2)'>next</a> >  </td>
   </tr>
</table>

다음 javascript function을 2개 만들었는데,
acxmlboard는 레퍼런스처럼 제공되는 jQuery의 DOMParser 모델을 차용하여
xml file을 읽어 구조화 하였고,

function acxmlboard(a) {
  jQuery.ajax({
    type: "GET",
    url: "XML_DATA_FILE",  
    dataType: "xml",
 
    success: function( xmlDoc, status )
    {
      processXMLDoc( xmlDoc, a );
    },
    complete: function( xhr, status )
    {
      if( status == 'parsererror' )
      {
        alert( "There was a PARSERERROR.  Luckily, we know how to fix that.\n\n" +
               "The complete server response text was " + xhr.responseText ) ;
 
        xmlDoc = null;
 
        if( window.DOMParser )
        {
          parser=new DOMParser();
          xmlDoc=parser.parseFromString( xhr.responseText,"text/xml" ) ;
        }
        else // Internet Explorer
        {
          xmlDoc=new ActiveXObject( "Microsoft.XMLDOM" ) ;
          xmlDoc.async = "false" ;
          xmlDoc.loadXML( xhr.responseText ) ;
        }
 
        processXMLDoc( xmlDoc, a ) ;
      }
    },
    error: function( xhr, status, error )
    {
      alert( 'ERROR: ' + status ) ;
      alert( xhr.responseText ) ;
    }
  });
}

processXMLDoc function으로
xml data를 각 요소별로 지정된 위치에 표현하였습니다.
맨 처음, 맨 마지막 페이지를 고려하여 페이지 이동을 설정하였고요.

function processXMLDoc( xmlDoc, a )
{
  var j=0;
  if(a==1) var x=$("#xmlpagepnum").val();
  else  var x=$("#xmlpagennum").val();
  if(x<0) x=0;
  var z=x*6;
  for (var i=z; i<z+6; i++)
  {
     var heading = $(xmlDoc).find('date:eq('+i+')').text() ;
     var bodyText = $(xmlDoc).find('cont:eq('+i+')').text() ;
     $( '#cont'+j).empty() ;
     $( '#date'+j).empty() ;
     $( '#cont'+j).append(bodyText) ;
     $( "#date"+j).append(heading) ;
     j++;
  }
  if($(xmlDoc).find('cont:eq('+i+')').text()) {
     var prev=x-1;
     var next=++x;
  }else {
     var prev=x-1;
     var next=x;
  }
  $( "#xmlpagepnum").val(prev);
  $( "#xmlpagennum").val(next);
}

완성된 화면은
http://empire.achor.net 화면 좌측 상단의 News를 통해 확인하실 수 있습니다.

공개하기엔 코드가 너무 지저분 하고, 수준 낮습니다만 (함수명이나 변수명도 대충 막 정해져 있고, -__-;)
이제는 쓰지 않아 반드시 변화가 필요함에도
한국어로 된 XML data island에 대한 정보가 너무 없어 일단 적어둡니다.

누군가에겐 도움이 되시길.

- achor

본문 내용은 4,153일 전의 글로 현재의 관점과 다를 수 있습니다.

Post: https://achor.net/board/blog/10
Trackback: https://achor.net/tb/blog/10

Please log in first to leave a comment.

Tag

jQuery, XML, 웹개발, 프로그래밍

- 웹개발: IndieWeb Facebook 댓글 연동 (2015-02-08 23:41:52)	- 프로그래밍: YWCA 마루 (2001-10-08 13:12:39)

- 프로그래밍: Tech News by achor (2025-03-08 17:08:50)	- 웹개발: 홈페이지 글작성과 동시에 자동으로 Twitter에 전송되는 기능 이야기 (2010-09-14 23:26:28)

- 웹개발: IndieWeb Twitter 댓글 연동 (2015-02-15 19:52:26)	- 웹개발: CKFinder 한글파일명 문제 해결 방법 (2011-06-02 01:07:46)

- 웹개발: Twitter: send message from a PHP page (2010-03-22 05:27:44)	- 프로그래밍: 오락실 (2016-10-20 01:03:55)

- 프로그래밍: 이야기 메뉴 추가 (2001-09-29 02:33:36)	- jQuery: jQuery 셀렉터 (2013-11-16 14:24:33)