가장 흔한 예가 Ajax를 사용할 경우이다. Ajax로 호출을 하고 결과값으로 받은 req.responseText로 JSON을 받았을 경우에는 그냥 Text이기 때문에 Object로 변환해 주어야 한다.
{ id:'Outsider', sex:'male' }
Ajax에서 리턴받을 JSON의 형태가 위와 같이 되어 있을 경우에는
- var obj = eval("("+returnValue.responseText+")");
- alert(obj.id); // Outsider
위의 코드처럼 eval을 해주면 JSON 오브젝트로 변환할 수 있다.
[ { id:'Outsider', sex:'male' },
{ id:'Zziuni', sex:'male' } ]
JSON이 위의 형태처럼 배열로 되어 있을 경우에는
- var obj = eval(returnValue.responseText);
- // -> { id:"Outsider", sex:"male" }
그냥 eval을 해주면 JSON 오브젝트로 변환할 수 있다.
다만 이렇게 변환할 경우 eval()은 빠르기는 하지만 단순히 그안의 스트링을 그대로 실행시켜 주는 것이기 때문에 리턴값으로 자바스크립트 명령문이 온다면 그대로 실행시켜버리기 때문에 보안이슈가 발생할 수 있다.
이렇게 리턴받은 소스를 신뢰하기 어려울 때는JSON 에서 제공하는 JSON parser을 사용해야 한다. JSON parser는 오직 JSON text만 받아들이고 다른 스크립트는 거부하고 eval()만큼이나 빠르다.
- var obj = JSON.parse(returnValue.responseText);
- // -> { id:"Outsider", sex:"male" }
JSON.parse()의 목적대로 JSON 텍스트 외에는 거부해야하기 때문에 JSON문법을 정확히 지켜주지 않으면 SyntaxError 예외가 던져진다. 그렇기 때문에 키와 값을 모두 쌍따옴표(")로 묶어주는 문법을 정확하게 지켜주어야 한다. 아래처럼....
{ "id":"outsider", "sex":"male" }
여기서 JSON.parse()를 사용하기 위해서는 Douglas Crockford


