XMLなど同様、データ記述言語ですが、Javascriptにおけるオブジェクト表記法をベースにしているため、解析処理の手間が一気に省けます。
XMLが面倒臭く感じますね。。。
細かい話はwikipediaの
JSONの説明に記載されているので、簡単なサンプルと簡易説明にします。
SAMPLE
データ形式は以下のようになっています。
{"name": "John Smith", "age": 33}
これがJSONのデータ表記法です。
この場合、連想配列が２セット(名前と年齢)入っています。
もちろん連想配列だけではなく、通常の配列も可能です。
<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ではevalで値を評価するとプログラムの記述が簡易になる。
var data = eval('(' + httpRequest.responseText + ')');
document.getElementById('test2').innerHTML = data['name'];
document.getElementById('test3').innerHTML = data['age'];
}
//リクエスト送信
httpRequest.send(null);
}
</script>
1.eval関数で評価するだけでデータが取得できます。
※データ注意事項
連想配列のキーは文字列にしないといけません。
様々なサイトでJSONとして情報を提供してくれています。
ただし、JSONではクロスドメインによる直接取得できません。
プロキシアプリケーションを作成するか、JSONPを使用する必要があります。
※脆弱性について
evalで実行する以上、値ではなく、スクリプトが注入されていた場合、簡単に実行されます。
クロスサイトスクリプティングの対応の一部としてエスケープ処理を施しておくべきです。
PR
