JSON(JavaScript Object Notation)은 말 그대로 자바스크립트에서 사용하는 객체를 Plain text로 표현하는 방식이다.
JSON으로 표현된 문자열을 이용하면 시스템 간에 쉽게 데이터를 주고 받을 수 있다.
때문에 Ajax 스타일의 애플리케이션에서는 클라이언트와 서버가 데이터를 주고 받을 때 JSON이 거의 필수적으로 사용된다.
자바스크립트에서는 JSON 표현을 파싱해 객체로 만들어줄 수 있는 능력이 갖춰져 있다.
JSON
인터넷을 통해 전달되는 데이터 양이 많아지고 있는 가운데 문자열을 이용해 좀 더 가벼운 방식으로 데이터를 표현하기 위해 고안된 데이터 형식화 방법 중 하나가 JSON 이다.
JSON 표현 |
XML 표현 |
{ 'name' : 'Jusung' 'familyName' : 'Park', 'books' : ['java','javascript','c++'] } |
<?xml version="1.1" encoding="UTF-8"?> <response> <name>Jusung</name> <familyName>Park</familyName> <books> <book>java</book> <book>javascript</book> <book>c++</book> </books> </response> |
두 표현 모두 "이름,값"의 쌍을 나타낸다. 그러나 동일한 데이터를 표현하는데 JSON이 훨씬 간단하고 적은 용량을 차지한다는 사실을 알수있다. 따라서 JSON포맷의 문자열은 통신상에 서도 시간이 그만큼 더 절약 된다. 또한 보내는 쪽에서 데이터를 형식화하고 받는 쪽에서 다시 파싱하는 단계에서 JSON형식이 훨씬 더 시간이 절약된다.
용량이나 전송 속도면에서의 장점보다 훨씬 더 큰 이점은 자바스크립트와 궁합이 잘 맞는다는 것이다.
var obj = eval('('+ajaxResponseJsonText+''));
obj.name; -> Jusng
obj.books[0] -> java
문자열을 파싱할 때 사용하는 자바스크립트의 eval() 함수는 단순히 인자로 들어오는 문자열을 실행시키는 역할을 하기때문에 악의적인 스크립트를 받았을때 그대로 실행시키는 보안적 결함이 있다.
때문에 http://json.org/ 에서 제공해주는 JSON 라이브러리를 이용하여야 한다.
JSON.parse()는 인자로 오직 JSON text만을 받고 eval() 만큼 빠르다.
var obj = JSON.parse(ajaxResponseJsonText);
obj.name; -> Jusung
obj.books[0] -> java
단순히 문자열을 함수에 통과시키면 그 결과가 자바스크립트에서 사용할 수 있는 객체가된다.
JSON 형식
객체표현 : {"키#1" : "값#1", "키#2" : "값#2", "키#n" : "값#n"}
배열표현 : [값#1,값#2,.....값#n]
{
"obj" : {
"key1" : "data1",
"key2" : "data2",
"key3" : "data3"
},
"array" : [
{"key1" : "data1"},
{"key2" : "data2"}
],
"obj1" : null,
"num" : 1,
"boolean" : true
}
var v1 = {"name" : "Park", "age" : 20}; // Object 객체
var v2 = '{"name": "Park", "age" : 20}' // 문자열로 된 JSON 표현 바로 객체로 변환되지는 않는다. (JSON.parse() 함수로 Object 변환가능)
JQuery 라이브러리를 사용중이라면.. 아주 간편하게 JSON을 잘 다룰수 있다.
JQuery Ajax 관련 함수들에서도 데이터를 받을 형식만 지정해준다면 JSON 형식을 바로 Object로 변환해준다.
참고.
자바스크립트 객체지향 프로그래밍.
'Javascript' 카테고리의 다른 글
자바스크립트(javascript) 웹 브라우저 스크립팅. [1] (0) | 2017.06.20 |
---|---|
자바스크립트(javascript) 객체 응용 (2) | 2017.05.30 |
자바스크립트(javascript) 내장 객체 - 정규식 객체 (0) | 2017.04.04 |
자바스크립트(javascript) 내장 객체 - 배열 객체 (0) | 2017.04.02 |
자바스크립트(javascript) 상속 (2) | 2016.12.13 |
댓글