티스토리 뷰

웹프로그래밍/js

JSON Parse~parsing

VoidNoble 공허공자 2010. 1. 28. 17:11

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: });
댓글
  • 프로필사진 재떨이 한참 고생했는데...
    덕분에 잘 해결했습니다.

    한수 배우고 갑니다.
    감사합니다 <(__)>
    2012.03.26 18:39
댓글쓰기 폼
Total
803,199
Today
23
Yesterday
241
«   2019/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
글 보관함