JSON(Javascript Object Notation)
JSON 이란?
JSON은 경량화 되어있는 하나의 데이터교환 형식이다.
서로 다른 언어들간에 데이터를 주고받을 수 있도록 (보다 편리하게)만들어진 텍스트 기반의 형식이다. 우리가 잘 알고 있는 XML(eXtensible Markup Language)도 서로 다른 언어들간의 데이터 교환, 사람이 볼 수 있는 정보 표기, 쉽구 단순한 구성 등을 목표로 만들어진 데이터 교환방식 중의 하나인데 이보다 더 가볍게 만들어진 것이 JSON 표기방식이다.
JSON은 프로그래밍 언어가 아니다.
JSON은 이곳 저곳 어느곳에서든 사용되고 있다. 하지만 JSON은 프로그래밍 언어가 아니라 그저 단순히 데이터 표기방법 중의 하나이다. XML 보다 기능이 적고 가볍기 때문에 파싱도 빠르고 용이하며 간단한 구조로 인해 클라이언트/서버 어디서든 쉽게 사용가능하다.
JSON의 구조
기본적으로 'name/value' 형태의 구조를 가지고 있다.
{object}
name(string):value
[array]
그냥 이게 다다.
- object 는 중괄호를 이용해서 감싸고 있다. '{}'
- name은 string 으로 되어 있고 name 에 한 쌍으로 콜론 ':' 을 두고 value 가 온다.
- value는 큰따옴표안에 string, number ,true ,false , null, object ,array 이 올수 있다.
더 자세한 내용을 원한다면,
JSON 공식 사이트 둘러보기 - 무려 한글도 지원한다.
http://ko.wikipedia.org/wiki/JSON
정말 심플한 설명과 데이터 표기방식의 구조를 도식으로 설명하고 있다.
별거 없는만큼 쉽고 간단하다.
JSON 구조 어떻게 생겼을까?
JSON 예제
{
"member": [
{
"id": "hyunc87",
"blog": "tistory",
"from": "korea",
"memo": "HelloWorld"
},
{
"id": "abcd",
"blog": "tistory.com",
"from": "korea",
"memo": "HelloWorld2"
}
]
}
가장 쉽고 심플한 JSON 구조를 만들어 보았다.
굳이 설명하자면,
member 라는 name에 value로 배열이 들어가 있다. 그 배열안에는 각 object가 두개 나열되어 있는데 name:value 로 각각 string 값이 들어가 있다.
Javascript 내에서 위의 JSON 데이터를 읽는 방법을 예제로 알아보자.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> JSON Example </TITLE>
</HEAD>
<BODY onload="jsonParsing()">
<span id='a'> </span> <br>
<span id='b'> </span>
</BODY>
<SCRIPT type="text/javascript">
function jsonParsing() {
var jsonText = '{"member":[{"id":"hyunc87","blog":"tistory","from":"korea","memo":"HelloWorld"},{"id":"abcd","blog":"tistory.com","from":"korea","memo":"HelloWorld2"}]}';
var o = JSON.parse(jsonText);
document.getElementById('a').innerHTML = o.member[0].id + '.' + o.member[0].blog;
document.getElementById('b').innerHTML = o.member[1].id + '.' + o.member[0].blog;
}
</SCRIPT>
</HTML>
JSON.parse 를 이용해서 텍스트를 JSON object 로 변환하여 사용하였다.
결과는 다음과 같다.
hyunc87.tistory abcd.tistory
JSON object 를 다시 JSON text 로 변환하려면?
console.log(JSON.stringify(o));
결과
{"member":[{"id":"hyunc87","blog":"tistory","from":"korea","memo":"HelloWorld"},{"id":"abcd","blog":"tistory.com","from":"korea","memo":"HelloWorld2"}]}