2010년 6월 16일 수요일

자바스크립트로 xml문서 불러 들이기

아시다시피 자바스크립트로  xml문서 연동이 가능합니다.
물론 이 방법은 접근성에 좋지 않습니다. 자바스크립트 미지원 혹은 꺼놓은 브라우저에서는 xml로 불러들인 내용을 전혀 알 수 없기 때문에 중요한 컨텐츠나 주요 네비게이션에서에서 사용시 반드시 대체 내용이 들어가야 하거나 지양해야 합니다. 하지만 이럼에도 불구하고 js 나 xml을 이용한 네비게이션을 많이 사용하는 이유는 유지보수, 운영의 편의성 때문입니다.

큰 예로 플래시로 이루어진 네비게이션 등에 많이 사용되는데,  fla파일을 열어 일일이 메뉴를 수정하고, 또 그것을 swf로 내보내는등의 수고 없이 xml문서만 열어 수정하면 되기 때문에 그 편의성 및 시간의 절약에 효과적이라고 할 수 있습니다. 이는 플래시가 아닌 일반 코딩 네비게이션에서도 마찬가지 입니다.
수백 페이지에 달하는 사이트에서 해당메뉴 링크 하나를 수정하기 위해 그 버튼이 들어있는 페이지 들을 일일히 열어보기는 힘들기 때문이죠. 언제나 득과 실이 있는 법인듯 합니다.

따라서 사람들은 접근성에 치명적 약점이 있음에도 불구하고 xml연동, 혹은 url만 js로 빼놓는 방법에 환호하며, 많이 사용하고 있습니다. 실질적으로 자바스크립트를 미지원하는 브라우저나 혹은 꺼놓은 사용자가 극 소수 라는 판단하에 작업을 진행 하는 것 이죠.

아래 기술되는 내용은 제가 구글링 과 관련 서적등을 통해 습득한 내용이므로 오류 등이 포함되어 있을 수 있습니다. 오류 및 버그, 잘못된 내용들에 대해 답글 및 메일 보내주시면 확인후 수정 하도록 하겠습니다.

그럼 xml접근 방법에 대해 알아봅니다.
xml을 연동하기 위해서는 먼저 익스플로러와 익스플로러 외의 브라우저 호환성을 맞춰 주어야 합니다.
익스플로러7버전 및 이하버전에서는 XML 객체를  ActiveX컨트롤러로 제공하며,  그외에 브라우저는 브라우저 내장객체로 제공합니다.

var xmlDoc=null;
if (window.ActiveXObject)
{
  // IE용
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
  // Mozilla, Firefox, Opera, 기타 용
  xmlDoc=document.implementation.createDocument("","",null);
}
else
{
  alert('XML을 사용못하는 브라우저입니다.');
}
아...태그 및 스크립트용 css,js를 만들어 놔야 겠네요..ㄷㄷ..

window.ActiveXObject 를 지원하는 브라우저와 document.implementation.createDocument 를 지원하는 브라우저를 구분하여 각각 xmlDoc에 저장합니다. 과거 header정보를 통해 브라우저를 구분하기도 했었지만 그 방법은 절대 좋은 방법이 아니라고 하는군요.(헤더 정보는 쉽게 변경할 수 있기 때문에 정확하지 않다고 합니다)
여기까지 xml객체를 가지고 오는 방법 이었습니다.

이상입니다......(-_-..장난입니다.)

다음은 xml객체에 있는 아이들(??)을 꺼내다 써야 겠죠.
방법은 간단합니다. 물론 이방법이 정답은 아니며, 또한 어떤곳에 사용하느냐에 따라 다르게 코딩할 수 있습니다.

if (xmlDoc!=null){
  xmlDoc.async=false; //xml문서를 완전히 읽을 때 까지 실행을 중지
  xmlDoc.load("menu.xml"); //xml로드("경로")
  var x=xmlDoc.getElementsByTagName("desc"); //xml 문서 내에 있는 desc이라는 태그에 접근
}
xml을 어떤식으로 짰느냐, 어떤식으로 구조화 했느냐에 따라 사용법 및 기타 방법은 달라 지겠습니다.
xml문서내에 <desc> 라는 태그에 접근하는 것 까지만 코딩 해 두었습니다. 그냥 저런식으로 접근하면 불러 올수 있다...라는 식으로, 나머지도 DOM을 이용한 접근방법을 어느정도 아신다면 어렵지 않으시리라 생각 됩니다.
물론 getAttribute로 속성값에 접근이 가능 하겠죠.

문서로 빼내는 방식은 여러분 자유 입니다. document.write 를 사용하셔도 되겠네요.

여기까지 허접한 퍼블리셔의 xml 연동 이었습니다.
여러모로 쓸데가 많지만 실상 저는 잘 사용은 하고 있지 않습니다. 이미 플래시에서 이부분들을 대체하고 있기 때문에 굳이 제가 xml에서 무언가를 불러와 써야할 이유가 없었거든요. 추가로 저희 회사에서도 xml에서 메뉴를 불러오기 보다는 js파일에 url코드들을 불러와 인수호출 하는 방식으로 사용하고 있어 특별히 xml에 깊이있게 공부 한적도 없습니다.

단. 모르는 것 보다는 아는게 힘이 되기 때문에 항상 공부하는 마음으로 ...
뭐 이런 이유로 이번 기회에(회사가 한가함..ㅡㅡ) 블로그 해 봤습니다.

허접하지만 도움이 되었으면 합니다.(여기까지 읽으셨으면 리플도 달아주세요-0-a)
감합니다.

댓글 없음:

댓글 쓰기