DevOthers

XML, JSON 그리고 XMLHttpRequest

⏱ 7 min.
, ,

웹에서 API로 통신을 할 때 데이터를 전달받는 형식이 있다. XML과 JSON이 그 형식들이다. Ajax나 API로 요청하고 데이터를 받을때, JSON으로 데이터가 넘어오고 하는데, 한 번 정리하고 넘어가고 싶어서 정리한 글이다.

JSON과 XML은 데이터 통신을 위해 고안된 형식이라고 한다. 그래서 자바, 파이썬 같은 프로그래밍 언어에 의해 파싱될 수 있으며, 계층적 구조(Hierarchical Structure)를 갖고 있다.


XML

HTML과 유사한 마크업 언어이다. 데이터를 저장하고, 전달할 목적으로 고안되었다.

1
2
3
4
5
6
<dog>
   <name>식빵</name>
   <family>웰시코기<family>
   <age>1</age>
   <weight>2.14</weight>
</dog>

dog 라는 객체의 name 속성으로 식빵, family 속성으로 웰시코기, age 속성으로 1, weight 속성으로 2.14를 반환하는 데이터이다.


JSON

XML과 마찬가지로 데이터 저장과 전달을 목적으로 고안되었으며, 자바 스크립트 기반으로 작성되었다.

XML의 대안으로서 고안되었으며, XML 대비 더 직관적이며, 작성하기 편리하다는 특징이 있다. 또 배열을 파싱할 수 없는 XML과 달리 JSON은 배열을 사용할 수 있다.

JSON은 key와 value가 한 쌍을 이루는 구조의 객체로 구성되어 있다.

1
2
3
4
5
6
{
   "name": "식빵",
   "family": "웰시코기",
   "age": 1,
   "weight": 2.14
}

위의 XML로 전달받은 동일한 객체를 JSON으로 전달받았을때 볼 수 있는 코드이다. name, family, age, weight 가 key가 되며, 각각의 key에 해당하는 value가 식빵, 웰시코기, 1, 2.14에 해당한다.

XML이 XML Parser로 파싱을 한다면, JSON은 자바스크립트 표준함수인 eval()로 파싱한다고 한다.

함께 읽어보면 좋은 문서


XML이든 JSON이든 결국 XMLHttpRequest 객체를 사용해서 동작한다. XMLHttpRequest에 대해서도 알아보도록 하자.

XMLHttpRequest

XMLHttpRequest는 서버와 상호작용(동기/비동기)하기 위하여 사용하는 객체이다. WebAPI의 인터페이스중 하나이다. 페이지의 Reload없이도 웹서버로부터 데이터를 가져올 수 있기 때문에 Ajax에서 주로 사용된다고 한다.

XML과 JSON 모두 XMLHttpRequest 객체를 이용하여 서버에서 데이터를 전송받는다.

주요 속성과 메서드는 MDN 공식문서를 통해 확인가능하다.

XMLHttpRequest를 이용한 데이터 전송을 하는 예제 코드이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function loadDoc() {
    // XMLHttpRequest 객체를 생성
    var xmlHttp = new XMLHttpRequest();
    // onreadystatechange 이벤트 핸들러 생성
    xmlHttp.onreadyStatechange = function() {
        // 서버에 문서가 존재하고, 요청한 데이터의 처리가 완료되어 응답 준비가 완료되었을때
        if(this.status == 200 && this.readyState == this.DONE){
            // 요청한 데이터를 문자열로 반환
            document.getElementById("parseText") = xmlHttp.responseText;
        }
    };
    // 요청 초기화
    xmlHttp.open("GET", "/data.txt", true);
    // 요청을 실행. 기본값은 비동기(Asynchronous) 요청 직후 즉시 반환.
    xmlHttp.send();
}

위에서 사용한 XMLHttpRequest의 속성은 다음과 같다.

  • XMLHttpRequest.onreadystatechange
  • XMLHttpRequest.status
    • 요청의 응답 상태를 갖는 unsigned short를 반환
  • XMLHttpRequest.readyState
    • 요청의 상태를 unsigned short로 반환
  • XMLHttpRequest.responseText
    • 요청에 대한 응답을 텍스트로 갖는 DOMString을 반환.
    • 요청에 실패할 경우 null 반환
  • XMLHttpRequest.open()
    • 요청을 초기화하는 메서드.
  • XMLHttpRequest.send()
    • 요청을 보낸다.
    • 요청이 비동기(default)일 경우, 요청 직후 즉시 반환하는 메서드.

출처 : MDN - XMLHttpRequest


왜 JSON을 사용해야 하는가?

XMLHttpRequest를 사용해서 데이터를 통신할 경우 배열 객체를 전달받고 사용하는 일이 까다로워질 수 밖에 없다.

XMLHttpRequest.responseText는 문자열을 반환하므로 이를 사용하기 위해서는 , 를 중심으로 문자열을 나눠야한다. 그러나 JSON을 사용하면 배열 자체를 사용할 수 있기 때문에 번거로운 파싱작업을 할 필요가 없어진다.

또 XML 대신 최근에 JSON만을 사용하는 이유로는 JSON은 XML처럼 엔드 태그가 존재하지 자바스크립트로 간단히 작성할 수 있으며, 더 가볍기 때문이다. 또한 XML로는 배열을 표현하는데 한계가 있지만, JSON은 그렇지 않다는 특징도 있다.


Reference