[xmlDom] xml 읽어와 뿌리기 javascript | Client Side

xmlDom 을 편하게 사용하기 위한 javascript 함수화..ㅋ

 

<?xml version='1.0' encoding='utf-8'?>
 <parts>
  <part>
   <name>송토리</name>
   <addr>서울시 광진구 화양동</addr>
  </part>
  <part>
   <name>장동건</name>
   <addr>우리들의 천국</addr>
  </part>
  <part>
   <name>서태웅</name>
   <addr>슬램덩크시 북산고</addr>
  </part>
  <part>
   <name>원빈</name>
   <addr>하늘시 신계구 왕성</addr>
  </part>
  <ADMIN_GRADE code='ADM' text='관리자'/>
  <ADMIN_GRADE code='MAG' text='매니저'/>
  <ADMIN_GRADE code='GUE' text='게스트'/>
</parts>

 

위에는 XML 파일.

 

아래와 같이 하면됨.

 

var xmlDoc;  //xml DOM
 
 function getXmlObj()
 {
  var xmlhttp = null;
  
  // Mozilla/Safari
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {// IE
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  return xmlhttp;
 }
 function getXMLDom(pUrl,pOption,pSearchValue)
 {
    
  var xmlhttp = getXmlObj(); 
  var templateStr = null;
  var pAsync = false;
  
  
  if (pOption == "TRUE")
  {
   pAsync = true;
  }
  
  if (pOption == "POST")
  {
   xmlhttp.open("POST",pUrl,pAsync);
   xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  }
  else
  {
   xmlhttp.open("GET",pUrl,pAsync);
  
  }
  xmlhttp.onreadystatechange = function () {
   
   if(xmlhttp.readyState == "4")
   {
    xmlDoc = xmlhttp.responseXML;
   }

  }
  
  xmlhttp.send(); 
  return xmlDoc;
 }
 function getDomLength(pName,pDom)
 {
  try
  {
   return pDom.getElementsByTagName(pName).length;
   
  }
  catch (e)
  {
   return xmlDoc.getElementsByTagName(pName).length;
  }
 }
 
 function getValue(pName,pIndex,pAttr)
 {
  
  if (typeof pIndex == "undefined" || pIndex =="")
  {
   pIndex = 0;
  }
  
  x = xmlDoc.getElementsByTagName(pName);
 
  if (typeof pAttr == "undefined" || pAttr =="")
  {
   
   
   if(x[pIndex].hasChildNodes())
   {
    v = x[pIndex].childNodes[0].nodeValue;
   }
   else
   {
    v = "";
   }
 
  }
  else
  {
    v = x[pIndex].getAttribute(pAttr);
  }
  
  return v; 
 }
 function getXMLText(pCode,pValue)
 {
  var xDom = getXMLDom('code_test.xml');  
  var cnt = getDomLength(pCode,xDom);
  var strHTML = ""  ;
  for(var i=0;i<cnt;i++)
  {
   if(getValue(pCode,i,"code") == pValue)
   strHTML = getValue(pCode,i,"text");
  }
  
  
  return strHTML;
 }

 

 

사용법

 - nodeValue 로 불러올때..

var doc = getXMLDom('code_test.xml');
var cnt = getDomLength("part");
var txt = "";
for(var i=0; i<cnt; i++)
{
txt = txt+getValue("name",i);
} 
document.getElementById("myDiv").innerHTML=txt;

 

- getAttribute로 불러올때.

var doc = getXMLDom('code_test.xml');
var v = getXMLText("ADMIN_GRADE","code");
document.getElementById("myDiv2").innerHTML=v;

 

 

설명은 부족하지만 소스만 보면 알수 있습니다.

 

익스,크롬,파폭등 다 잘 작동됩니다.

 

xmlDom,ajax,XMLHttpRequest
Comment Write
Comment List
등록된 코멘트가 없습니다.