JSON Parse~parsing

JSON 문법검사기

http://www.jsonlint.com/

 

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

 

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

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

FF
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 기술이 쓰이기에

   1: $.ajax({url: "/url", 

   2:   dataType: "json",

   3:   success: function(json) {

   4:     // json 변수로 바로 접근 가능

   5:   }

   6: });

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

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

   1: $.ajax({url: "/url",

   2:   dataType: "text",

   3:   success: function(data) {

   4:     json = eval("(" + data + ")");

   5:     // do something with json

   6:   }

   7: });

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

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

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

 

방법3. Prototype

   1: new Ajax.Request(url, 

   2: {

   3:     method:'post',

   4:     parameters:$('frm').serialize(),

   5:     onSuccess: function(trans) {

   6:         var json = trans.responseText.evalJSON(); // 또는 .toJSON();

   7:     }

   8: });

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

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

 

방법4. Prototype 1.6 이상

   1: // 글 목록에서 체크상자로 선택된 글 처리

   2: new Ajax.Request(url, {

   3:    method: 'post', parameters: Form.serializeElements($('frm_list').getInputs('checkbox','chk_id')),

   4:    onLoading: function() { $('frm_list').startWaiting(); },

   5:    onComplete: function() { $('frm_list').stopWaiting(); },

   6:    onSuccess: function(trans) {

   7:       var json = trans.responseJSON;      

   8:       if(json.code == "1") {

   9:           alert(json.msg);

  10:       }

  11:    }

  12: });

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

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

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

 

Javascript 변수로 JSON Object 만들기

   1: // jQuery Submit

   2: $j.ajax({

   3:     url:"/member/?mode=update", type:"post", data:frm.serialize(), dataType:"text",

   4:     success: function(rp) {

   5:         var json = eval("("+ rp +")");

   6:         if(json.code == 1) {    // 입력완료

   7:                   self.location = url;

   8:               } else {                // 입력오류

   9:                   if (json.id) {

  10:                       // 이 부분이 핵심

  11:                       eval('var valErr={"'+json.id+'":"'+json.msg+'"};');

  12:                       joinValidate.showErrors(valErr);

  13:                   } else $j.jGrowl("입력 처리중 "+ json.msg +" 오류 발생!");

  14:               }

  15:     }, error: function(rp, status) { $j.jGrowl('회원가입 처리중 '+ status +' 오류 발생!'); }

  16: });