Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-03 04:38


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

XMLDOM 을 JSON 으로 파싱하여 활용하기, xml2json : 자바스크립트

written by Seok Kyun. Choi. 최석균

자바스크립트에서 데이터 인터페이스를 원활하게 사용하기 위해 XML 제어는 필수적이다. DOM 구문을 이용해 XML 내용 처음부터 마지막 줄까지 반복해서 읽어들여 노드와 속성이 일치하는 값을 출력하는 과정을 만드는 프로그램을 개발해야 한다. 하지만 이런 프로그램은 확장성이나 호환성에 어려움을 곁게 될 것이다.

좀 더 다이나믹한 방법은 없을까? 방법은 XPath 를 이용해 XML 내용을 검색하는 객체를 이용하는 것. 익스플로러에서는 selectSingleNode 를 이용하면 되고, 그 외의 브라우저는 작자가 간단한 XPath 기능을 지원하는  selectSingleNode 개발하여 사용하고 있다.


** XML 예제 소스

<?xml version="1.0" encoding="UTF-8" ?>
<action version="2.0">
  <question>
    <insert xml:lang="ko">등록하시겠습니까?</insert>
    <delete xml:lang="ko">삭제하시겠습니까?</delete>
    <update xml:lang="ko">수정하시겠습니까?</update>
    <execute xml:lang="ko">진행하시겠습니까?</execute>
    <cancel xml:lang="ko">취소하시겠습니까?</cancel>
    <apply xml:lang="ko">적용하시겠습니까?</apply>
    <enter xml:lang="ko">참여하시겠습니까?</enter>
  </question>

  <message>
    <sub xml:lang="ko">최소 {$min}자 이상 , 최대 {$max}자 이하로 입력하세요.</sub>
    <select xml:lang="ko">최소 {$min}개 이상 , 최대 {$max}개 이하로 선택하세요.</select>
    <not xml:lang="ko">는 지원하지 않습니다.</not>
  </message>
</action>


** XPath 사용

2009/05/25 - [마이오픈소스/Action Framework] - XPath 표현식을 이용한 XML 노드 검색 : selectSienleNode

posted syaku blog

하지만 위 방법도 브라우져 모두를 지원하는 데 한계가 있을 것이다. 그래서 XML 그대로 사용하지 않고 JSON 파싱작업을 거친 후 자바스크립트에서 사용하는 방법을 택했다.

++ 공식사이트 : http://goessner.net/
++ 다운로드 및 도움말 : http://goessner.net/download/prj/jsonxml/

xml2json.js : XML -> JSON 파싱
json2xml.js : JSON -> XML 파싱

** xml2json 사용

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
  <meta content="no" http-equiv="imagetoolbar"/>
  <title>xml2json</title>  

  <!-- 스크립트 호출 -->
  <script type="text/javascript" language="javascript" src="./xml2json-0.9.js"></script>

  <script type="text/javascript">

  /**
   * @file action
   * @brief Javascript Action 2.0
   *
   * registered date 20080327
   * updated date 20090716
   * programmed by Seok Kyun. Choi. (최석균)
   * http://syaku.tistory.com
   */

  // action.xml
  var _ja_action_xml = "./action.xml";

  // 브라우져
  var _ja_browser = getBrowser();

  /**
   * @ func getBrowser() { return int }
   * @brief 인터넷 브라우져를 int 리턴한다.
   */
  function getBrowser() {
    // 0 : MSIE , 1 : Firefox , 2 : Safari , 3 : Chrome , 4 : Opera , 5 : Netscape
    var browser = ["MSIE","Firefox","Safari","Chrome","Opera","Netscape"];
    var agent = navigator.userAgent;

    for (var i in browser) {
      if (agent.indexOf(browser[i]) != -1) { return i; }
    }

    return null;
  }

  /**
   * @func xmlDoc(string) { return object }
   * @brief xml 문서를 읽어옴
   */
  function xmlDoc(xml) {
    var objXml;

    switch (_ja_browser) {
      case "0" :
      case "1" :
        objXml = CreateXmlDocument();
        objXml.async = false;
        objXml.load(xml);
        return objXml.documentElement;
      break;
      default :
        objXml = CreateXmlHttpRequest();
        objXml.open("GET",xml,false);
        objXml.send(null);
        return objXml.responseXML.documentElement;
      break;
    }

    return null;
  }

  /**
   * @func CreateXmlDocument() { return object }
   * @brief DOM 객체를 호출함.
   */
  function CreateXmlDocument() {

    if (document.implementation && document.implementation.createDocument) {
      return document.implementation.createDocument("","",null);
    } else if (typeof ActiveXObject != "undefined") {
      try {
        return new ActiveXObject("Msxml2.DOMDocument");
      }
      catch (e) {
        return new ActiveXObject("Msxml.DOMDocument");
      }
    }
    return null;
  }

  /**
   * @func CreateXmlHttpRequest() { return object }
   * @brief XMLHTTP 객체를 호출함.
   */
  function CreateXmlHttpRequest() {
    if (window.ActiveXObject) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");	
      } catch (e) {
        return new ActiveXObject("Msxml.XMLHTTP");
      }
    }
    else if (window.XMLHttpRequest) { return new XMLHttpRequest(); }
    else { return null; }
  }

  // xmldom 로드
  var dom = xmlDoc(_ja_action_xml);

  // dom -> json 변형 : 문자열인 상태
  var json = xml2json(dom," ");

  // 테스트 출력
  document.write(json);

  // json 객체화
  json = eval("("+json+")");

  // 등록하시겠습니까?
  document.write(json.action.question.insert["#text"]);

    // <sub xml:lang="ko">최소 {$min}자 이상 , 최대 {$max}자 이하로 입력하세요.</sub>
  document.write(json.action.message.sub["#text"]);

  </script>
</head>
<body>
</body>
</html>

http://syaku.tistory.com

댓글 남기기
◀ PREV 12345678···19 NEXT ▶