忍者ブログ

25Apr

[PR]

Posted by in

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

14May

JSON2(json2.js)

Posted by No Name Ninja in JSON

結局JSONは、JSONフォーマットとJavascriptオブジェクトの互換性の高さがメリット。
json2.jsというユーティリティのモジュールがあります。
DOWNLOAD先
・evalによるセキュリティの危惧を吸収してくれる。
・JSONフォーマットからjavascriptオブジェクトに変換時に値を変更することができる。(逆もしかり)
SAMPLE

<script language="javascript" type="text/javascript" src="json2.js"></script>
<script language="javascript" type="text/javascript">

var httpRequest = false;

/**
 * HTTPRequestオブジェクトを生成します。
 */
function createHttpRequest(){
  var request;
  //I.E.の場合
  if(typeof ActiveXObject != "undefined"){
    request = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if(!httpRequest && typeof XMLHttpRequest != "undefined") {
    request = new XMLHttpRequest();
  }
  return request;
}

function getData(method,url,headerName){
  //エラー処理
  if(!httpRequest){
    httpRequest = createHttpRequest();
    if(!httpRequest){
      alert('HTTPオブジェクトを生成できませんでした。');
      return;
    }
  }

  httpRequest.open(method, url);
  //ヘッダーを追加する。
  httpRequest.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");

  //データ受信後の処理を記載
  httpRequest.onreadystatechange = function(){
    if(httpRequest.readyState != 4 || httpRequest.status != 200){
      return;
    }

    document.getElementById('test1').innerHTML = httpRequest.responseText;
    //JSONでは
    var data = JSON.parse(httpRequest.responseText,function(key,value){
      if(key == 'gender'){
        if(value == '0'){
          return 'male';
        }else{
          return 'female';
        }
      }
      return value;
    });

    document.getElementById('test2').innerHTML = data['name'];
    document.getElementById('test3').innerHTML = data['age'];
    document.getElementById('test4').innerHTML = data['gender'];
  }
  //リクエスト送信
  httpRequest.send(null);
}
</script>

1.基本的にはevalの部分をJSON.parseに変更するだけです。第二引数はオプションで、値を変換する関数を設定することができます。


●JavascriptオブジェクトをJSONデータに変換する。
SAMPLE

<script language="javascript" type="text/javascript" src="json2.js"></script>
<script language="javascript" type="text/javascript">

obj = {"name": "John Smith", "age": 33,"gender":"male"};

onload = function(){
  document.forms['testForm'].elements['testButton'].onclick = jsonStringify;
}

function jsonStringify(e){
  var jsonstring = JSON.stringify(obj,convertFlag,0);
  document.getElementById('test1').innerHTML = jsonstring;
}

function convertFlag(key,value){
  if(key == 'gender'){
    if(value == 'male'){
      return 1;
    }else{
      return 0;
    }
  }
  return value;
}

</script>

第三引数は、ホワイトスペース数と種類を指定します。
PR

Comment


Vodafone絵文字 i-mode絵文字 Ezweb絵文字