jQueryでAJAX入門2回目：JSON形式を扱う
前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく，
JSON？
JSONはJavaScript Object Notationの略で，
JSONサンプル
[
{
"name": "技評太郎",
"age" : 26,
"skills":["PHP" , "JavaScript"]
},
{
"name": "長谷川広武",
"age":25,
"skills":["HTML" , "CSS"]
},
{
"name": "徳田和規",
"age":26,
"skills":["JavaScript" , "jQuery"]
}
]- オブジェクトは{}で全体を囲む
- キーと値のペアはコロン
（:） で区切る - 複数指定はカンマ
（,） で区切る - キーには文字列のみ使用可能
JSONの例
JavaScriptのオブジェクトと配列の構造と同じですが，
オブジェクト例
オブジェクト例
{
"name" : "長谷川広武" ,
"age" : 25
}配列の例
配列の例
["JavaScript" , "jQuery" , "HTML" , "CSS"]それでは早速先ほどのサンプルを表示させる簡単なサンプルを見てみましょう。
JSONをリストで表示させるサンプル
JSONは先ほどJSONサンプルを利用して，
$.getJSON()メソッド
JSON形式を取得する場合は，
$.getJSON("js/sample01.json",function(data){
// ここに実行したい処理を書く
});$.ajax()メソッドを使うよりも手続きが簡単です。
早速サンプルを見てみましょう。
jQuery(function(){
$.getJSON("js/sample01.json",function(data){
$('p','#demo').remove();
$('#demo').append('<ul/>');
$.each(data,function(i,items){
$("<li/>",{
text:'名前：'+items.name+' 年齢：'+items.age+' スキル：'+items.skills.join(',')
}).appendTo('ul','#demo');
});
});
});
前回のXMLのサンプル時には，
items中の複数の中身を一つのリスト中に入れてしまっているのですが，
スキルだけ
$.getJSON()を使わない場合
JSONデータはJavaScriptで簡単に扱えるようになっているデータでもあるので，
JSONサンプル
//変数とする
var jsonData = [
{
"name": "技評太郎",
"age" : 26,
"skills":["PHP" , "JavaScript"]
},
{
"name": "長谷川広武",
"age":25,
"skills":["HTML" , "CSS"]
},
{
"name": "徳田和規",
"age":26,
"skills":["JavaScript" , "jQuery"]
}
] 上記のデータをScriptで読み込みます
<script type="text/javascript" src="js/sample02.json"></script>これでデータを扱う準備ができたので，
jQuery(function(){
$('p','#demo').remove();
$('#demo').append('<ul/>');
$.each(jsonData,function(i,items){
$("<li/>",{
text:'名前：'+items.name+' 年齢：'+items.age+' スキル：'+items.skills.join(',')
}).appendTo('ul','#demo');
if ( i == 4 ) return false;
});
});この方法だと，
