2012. 1. 9. 02:59
JSON 은 써보면 써볼수록 유용한 것 같다. 간결하고 편하고 직관적이다. 어쨌든 JSON Text를 Object로 변환해야 할 때가 있다. 여기서 JSON Text라는 것은 형태는 JSON의 형태이지만 자바스크립트에서 이걸 Object가 아닌 그냥 텍스트로만 인식하고 있다는 것이다. 이걸 Object로 바꾸어야만 그안의 값을 불러다가 사용할 수 있다.
가장 흔한 예가 Ajax를 사용할 경우이다. Ajax로 호출을 하고 결과값으로 받은 req.responseText로 JSON을 받았을 경우에는 그냥 Text이기 때문에 Object로 변환해 주어야 한다.
Ajax에서 리턴받을 JSON의 형태가 위와 같이 되어 있을 경우에는
위의 코드처럼 eval을 해주면 JSON 오브젝트로 변환할 수 있다.
JSON이 위의 형태처럼 배열로 되어 있을 경우에는
그냥 eval을 해주면 JSON 오브젝트로 변환할 수 있다.
다만 이렇게 변환할 경우 eval()은 빠르기는 하지만 단순히 그안의 스트링을 그대로 실행시켜 주는 것이기 때문에 리턴값으로 자바스크립트 명령문이 온다면 그대로 실행시켜버리기 때문에 보안이슈가 발생할 수 있다.
이렇게 리턴받은 소스를 신뢰하기 어려울 때는 JSON.org 에서 제공하는 JSON parser을 사용해야 한다. JSON parser는 오직 JSON text만 받아들이고 다른 스크립트는 거부하고 eval()만큼이나 빠르다.
JSON.parse()의 목적대로 JSON 텍스트 외에는 거부해야하기 때문에 JSON문법을 정확히 지켜주지 않으면 SyntaxError 예외가 던져진다. 그렇기 때문에 키와 값을 모두 쌍따옴표(")로 묶어주는 문법을 정확하게 지켜주어야 한다.(물론 이 경우는 값들이 스트링이기 때문에 쌍따옴표로 묶어주는 것입니다.) 아래처럼....
여기서 JSON.parse()를 사용하기 위해서는 Douglas Crockford 가 만든 json2.js 가 필요하다. json2.js는 더글라스 크록포드가 JSON의 편리한 사용을 위해 만든 JSON API의 새버전이다.(그래서 2가 붙어있다.) 이 API에는 2개의 메서드가 들어있는데 JSON.stringify()와 JSON.parse()이다. JSON.stringify()는 JSON.parse()와는 완전히 반대로 JSON 객체를 주면 JSON 텍스트로 만들어서 준다. 필요할때 갖다 쓰면 된다. (John Resig 이 이전버전보다 새버전의 API가 훨씬 좋다고 꼭 이걸 쓰란다.)
가장 흔한 예가 Ajax를 사용할 경우이다. Ajax로 호출을 하고 결과값으로 받은 req.responseText로 JSON을 받았을 경우에는 그냥 Text이기 때문에 Object로 변환해 주어야 한다.
{ id:'Outsider', sex:'male' }
Ajax에서 리턴받을 JSON의 형태가 위와 같이 되어 있을 경우에는
1
2
| var obj = eval( "(" +returnValue.responseText+ ")" ); alert(obj.id); // Outsider |
위의 코드처럼 eval을 해주면 JSON 오브젝트로 변환할 수 있다.
[ { id:'Outsider', sex:'male' },
{ id:'Zziuni', sex:'male' } ]
JSON이 위의 형태처럼 배열로 되어 있을 경우에는
1
2
| var obj = eval(returnValue.responseText); // -> { id:"Outsider", sex:"male" } |
그냥 eval을 해주면 JSON 오브젝트로 변환할 수 있다.
다만 이렇게 변환할 경우 eval()은 빠르기는 하지만 단순히 그안의 스트링을 그대로 실행시켜 주는 것이기 때문에 리턴값으로 자바스크립트 명령문이 온다면 그대로 실행시켜버리기 때문에 보안이슈가 발생할 수 있다.
이렇게 리턴받은 소스를 신뢰하기 어려울 때는 JSON.org 에서 제공하는 JSON parser을 사용해야 한다. JSON parser는 오직 JSON text만 받아들이고 다른 스크립트는 거부하고 eval()만큼이나 빠르다.
1
2
| var obj = JSON.parse(returnValue.responseText); // -> { id:"Outsider", sex:"male" } |
JSON.parse()의 목적대로 JSON 텍스트 외에는 거부해야하기 때문에 JSON문법을 정확히 지켜주지 않으면 SyntaxError 예외가 던져진다. 그렇기 때문에 키와 값을 모두 쌍따옴표(")로 묶어주는 문법을 정확하게 지켜주어야 한다.(물론 이 경우는 값들이 스트링이기 때문에 쌍따옴표로 묶어주는 것입니다.) 아래처럼....
{ "id":"outsider", "sex":"male" }
여기서 JSON.parse()를 사용하기 위해서는 Douglas Crockford 가 만든 json2.js 가 필요하다. json2.js는 더글라스 크록포드가 JSON의 편리한 사용을 위해 만든 JSON API의 새버전이다.(그래서 2가 붙어있다.) 이 API에는 2개의 메서드가 들어있는데 JSON.stringify()와 JSON.parse()이다. JSON.stringify()는 JSON.parse()와는 완전히 반대로 JSON 객체를 주면 JSON 텍스트로 만들어서 준다. 필요할때 갖다 쓰면 된다. (John Resig 이 이전버전보다 새버전의 API가 훨씬 좋다고 꼭 이걸 쓰란다.)
'PP > JSON' 카테고리의 다른 글
JSON 의 eval() 함수 사용의 문제 (0) | 2012.01.09 |
---|---|
Json / JQuery (Ajax)/ Asp.net 3가지를 연동하여 데이터 가져오기 (0) | 2012.01.07 |
JSON 개요 및 예제 (0) | 2012.01.04 |
DATASET - > JSON (1) | 2012.01.04 |
JSON.NET (0) | 2012.01.04 |