ajaxで JSON データを取得する

JSON
JavaScript Object Notation の略で、Webアプリケーションに役立つ軽量型のデータ交換フォーマット。
テキストベースのフォーマットなので読み書きが簡単で、さらにプログラムで容易に解析できる正規構文を備えている。
基本的にはJavaScriptのサブセットであり、XML以上に構文の解析が容易。

【JSONサンプルコード】
※ employees の子要素に, “surname” : “Lacava” と “Brown” がいる。

{ 
"employees" : 
  [ 
    {
     "surname" : "Lacava", 
     "name" : "Alessandro", 
     "city" : "Milan", 
     "age" : 30
    }, 
    { 
     "surname" : "Brown", 
     "name" : "John", 
     "city" : "Rome", 
     "age" : 35
    } 
  ]
}
名前は文字列でなければならず、かならず「”」で囲む。値は,文字列,数値,オブジェクト,配列,真偽値(true,false),nullのいずれか。
文字列は,「”」で囲まれたUnicode文字の集まり。
数値は,10進数のみ表記可能(整数,浮動小数点)。

参照►JSONを使ってAJAXベースのアプリケーションを高速化する
 
 

JSONP
JSON with Paddingの略。JSONデータを引数としてJavascriptの関数を呼び出す形式で,レスポンスを受け取る方式を指す。
script タグの src 属性には、 呼び出し側とは異なるドメインのURLを指定することができるため、 異なるドメインに JSON によるリクエストを投げ、他のドメインで提供されている機能を直接呼び出すことが可能 となる(クロスドメイン通信が可能)。
JSONを使用するためデータ交換が軽量であることもあり、JSONPは マッシュアップを行うために適した技法の一つ として注目されている。

参照►JSONPってなに?

 
 

 jQuery (ajax) で JSON データを取得

【サンプルコード】
※ パラメータを付加したURLを投げて、結果を取得する。


$.ajax({ 

 type:"POST"
 dataType: "json", // データ形式はJSONを指定
 data: { // リクエストパラメータを定義
  "vq": keyword, 
  "max-results":"10", 
  "alt":"json-in-script" 
 }, 
 cache: true, // キャッシュを使用
 url: "http://gdata.youtube.com/feeds/api/videos", 


 success: function (data) { 
   // データ取得に成功した場合の処理を定義
   $("#videos").empty(); 
   $.each(data.feed.entry, function(i,item){
     // entryの各要素へアクセス
     var group = item.media$group; 

     $("") // a要素を生成    
      .attr("href", group.media$player[0].url) //a要素のhref属性を設定
      .append("") // a要素の子要素にimg要素を追加 
      .appendTo("#videos"); // a要素を表示領域の子要素に追加 
   }); 
 },
 error : function(XMLHttpRequest, textStatus, errorThrown){ 
   // データ取得に失敗した場合の処理定義
 }
});

jQuery.ajax()リファレンス

参照►jQueryによるAjax実装