JSON 문법 및 오류사례

출처 : http://chayu07.tistory.com/89

JSON 문법검사기

http://www.jsonlint.com/

 

Cross browser 에서의 흥미로운 예제들

 

IE8 

JSON.parse(”{ ‘a’:1 }”) 

: Syntax Error

CHROME 

JSON.parse(”{ ‘a’:1 }”) 

: OK

FireFox

JSON.parse(”{ ‘a’:1 }”) 

: Syntax Error

OPERA 10.10 

JSON.parse(”{ ‘a’:1 }”) 

: Undefined variable JSON

SAFARI 4.0.4 

JSON.parse(”{ ‘a’:1 }”) 

: Syntax Error

 

jQuery 1.3 까지는 고유의 parsing 기술이 쓰이기에

$.ajax({url: "/url", 
  dataType: "json",
  success: function(json) {
  // json 변수로 바로 접근 가능
  }
});

위와 같이 바로 사용이 가능했는데

jQuery 1.4 부터는 브라우저 고유의 JSON parsing 기술에 맞겨버린다.

 

그렇다면...

 

모든 브라우저에서 문법오류가 안나게하려면?

방법1. 쌍따옴표(“)로 키와 값 모두 감싸라~!

http://www.neeraj.name/blog/articles/895-handling-json-parsing-natively-in-jquery-1-4-and-what-changed-from-jquery-1-3

페이지의 글 하단의 의견을 보면

 

var a = {“hello” : “world” }

와 같이 쌍따옴표로 키와 값을 모두 감싸야만 JSON 이라고 한다.

그래서 FF 에서만 개발중이던

var a = {hello : “world” } 형태의 JSON을

IE 에서 인식시켜보려 했더니 parse 오류만을 내뱉었다.

그래서 쌍따옴표로 모두 감싸줘 보니 

잘 작동하였다.

 

방법2. jQuery 1.4

$.ajax({url: "/url",
    dataType: "text",
    success: function(data) {
        json = eval("(" + data + ")");
        // do something with json
    }
});

그냥 text 형식으로 가져온 뒤 eval 함수를 통해 변형한다.

보내는쪽의 Content-type 은 application/json 이든 html/text 이든 관계 없다.

보내는쪽 형식만 {키:값} 이면 된다.

 

방법3. Prototype

new Ajax.Request(url, 
{
    method:'post',
    parameters:$('frm').serialize(),
    onSuccess: function(trans) {
        var json = trans.responseText.evalJSON(); // 또는 .toJSON();
    }
});

이건 구글링 안하고도 처리 했던 방식.

그때 마음은 그냥 IE 때문에 Content-type = application/json 을 포기했다랄까...

 

방법4. Prototype 1.6 이상

// 글 목록에서 체크상자로 선택된 글 처리
new Ajax.Request(url, {
    method: 'post', parameters: Form.serializeElements($('frm_list').getInputs('checkbox','chk_id')),
    onLoading: function() { $('frm_list').startWaiting(); },
    onComplete: function() { $('frm_list').stopWaiting(); },
    onSuccess: function(trans) {
        var json = trans.responseJSON;      
        if(json.code == "1") {
        alert(json.msg);
        }
    }
});

응답 url 쪽의 헤더는 Content-type = application/json 로 선언해줘야 한다.

응답 받는것을 .responseJSON 으로 받아주면 브라우저 구분이나 형식오류 없이 잘 동작한다.

Prototype 1.6 부터 이 부분을 패치한듯 하다.

 

Javascript 변수로 JSON Object 만들기

// jQuery Submit
$j.ajax({
    url:"/member/?mode=update", type:"post", data:frm.serialize(), dataType:"text",
    success: function(rp) {
        var json = eval("("+ rp +")");
        if(json.code == 1) {    // 입력완료
            self.location = url;
        } else {                // 입력오류
            if (json.id) {
            // 이 부분이 핵심
            eval('var valErr={"'+json.id+'":"'+json.msg+'"};');
            joinValidate.showErrors(valErr);
        } else $j.jGrowl("입력 처리중 "+ json.msg +" 오류 발생!");
    }
}, error: function(rp, status) { $j.jGrowl('회원가입 처리중 '+ status +'