[xml] xml

29 Jan 2018 • xml

데이터를 전송하는 방식 중에 하나인 xml에 대해 학습합니다.

  • e X tensible M arkup L anguage의 약자로 확장 가능한 마크업 언어라는 뜻을 갖는다.
  • json 과 같이 데이터를 관리하는 목적으로 사용된다.
  • 프레임워크 등의 초기 세팅을 하는데 사용된다.
  • 사용자가 정의한 태그를 통해 데이터를 정의할 수 있다.

xml의 사용

json & xml

  • client는 사용자가 원하는 요청을 서버에 보낸다. (검색, 이동 등)
  • 서버는 client의 요청을 처리하고 client에게 결과를 응답한다.
  • 이때, 요청에 대한 응답을 xml 또는 json의 형태로 만들어 넘긴다.
  • client는 전달 받은 xml 또는 json 조합하여 사용자가 보기 편하도록 후처리를 한다.

Get Started

  • xml의 사용법은 굉장히 간단하다.
  • html처럼 열고 닫는 태그 안에 값을 써주면 된다.
  • 하지만 태그의 이름, 속성 등을 원하는대로 지정할 수 있다.
  • 데이터를 추출할 때 해당 태그 이름으로 값을 가져올 수 있다.
<name>홍길동</name>
<age>26</age>
<address>서울시</address>

<name>Parker</name>
<age>22</age>
<address>충주시</address>

예제

  • xml파일로 부터 xml을 읽어들여 html태그에 파싱하는 방법을 제시한다.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
  </head>
  <body>

    <p id="demo">

      <script type="text/javascript">
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            /* myFunc(this); */
            // nodeFunc(this);
            dataFunc(this);
          }
        };
        xhttp.open("GET", "sample2.xml", true);
        xhttp.send();

        // 값 전부 가져오기
        function myFunc(xml) {
          var x, i, txt, xmlDoc;

          xmlDoc = xml.responseXML;
          txt = "";
          x = xmlDoc.getElementsByTagName('number');

          for (i = 0; i < x.length; i++) {
            txt += x[i].childNodes[0].nodeValue + "<br>"
          }

          document.getElementById('demo').innerHTML = txt;
        }

        // node 전부 가져오기
        function nodeFunc(xml) {
          var x, i, xmlDoc, txt;

          xmlDoc = xml.responseXML;
          txt = "";
          x = xmlDoc.documentElement.childNodes;

          for (i = 0; i < x.length; i++) {
            if (x[i].nodeType == 1) {
              txt += x[i].nodeName + "<br>"
            }
          }
          document.getElementById('demo').innerHTML = txt;
        }

        // 데이터를 가져오는 방법
        function dataFunc(xml) {
          var x, i, xmlDoc, txt;

          xmlDoc = xml.responseXML;
          txt = "";				
          x = xmlDoc.getElementsByTagName('client')[0];
          var xlen = x.childNodes.length;

          y = x.firstChild;

          for (var i = 0; i < xlen; i++) {
            if(y.nodeType == 1){
              txt += i + " " + y.nodeName + "<br>";
            }
            y = y.nextSibling;
          }
          document.getElementById('demo').innerHTML = txt;

        }
      </script>
  </body>
</html>

sample2.xml

<?xml version="1.0" encoding="UTF-8"?>

<clients>
  <client job="요리사">
    <number>1</number>
    <name>홍길동</name>
    <address>서울시</address>
    <visit>2012/12/01</visit>    
  </client>
  <client job="운전사">
    <number>2</number>
    <name>일지매</name>
    <address>부산시</address>
    <visit>2013/12/02</visit>    
  </client>
  <client job="프로그래머">
    <number>3</number>
    <name>임꺽정</name>
    <address>대구시</address>
    <visit>2014/12/01</visit>    
  </client>
</clients>
 xml

Comments

Related Posts