結局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