본문 바로가기
Javascript

자바스크립트(javascript) 내장 객체 - JSON 객체

by 램쥐뱅 2017. 5. 29.

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로 변환해준다.














참고.


자바스크립트 객체지향 프로그래밍.

댓글