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実装

数値等の選択に使うスライダーを作成する

JavaScript と CSS を使って、指定した範囲から値を選択するスライダーを作成する(FireFox動作可)

HTML5 から、input 要素にスライダーが追加された( HTML:<input type=”range” min=”0″ max=”10″ step=”1″/> 最小値 0、最大値 10、1目盛が 1 のスライダー )が、FireFox ではサポートされていない(2012/3現在)。
※ 以下は、スライダーをサポートしているブラウザ( Chrome, Safari 等)でのみ表示可能。

そこで、JavaScript と CSS を使ってクロスブラウザのスライダーを作ってみた(IE8+,Chrome,Opera,FireFoxで動作確認済)。
CSS を編集すれば、スライダーのスタイルを変更できる。


■ Sample( 最小値 0、最大値 10、1目盛が 1 のスライダー)

【HTML】

  

【CSS】

/*スライダー本体*/
.js-slider{
  position:relative;
  width:300px;
  top:15px;
  height:7px;
  background:#E8DBC7;
  border:1px inset #E8DBC7;
  border-radius: 10px;
}
/*スライダーのバー*/
.js-slider div{
  position:absolute;
  height:7px;
  font-size:0px;
  background:#D24034;
  border-radius: 10px;
}
/*スライダーのつまみ*/
.js-slider input{
  position:absolute;
  top:-4px;
  width:20px;
  height:20px;
  display:block;
  border:1px #cccccc;
  box-shadow: 2px 2px #cccccc;
  border-radius: 20px;     
  background:#ffffff;
  font-size:15px;
  color: #A6937C;
  text-align:center;
}
.js-slider input:hover{
  color: #D24034;
}

【JavaScript】

window.onload = function(){
	
  var output = document.getElementById('slider1o');//Valueを表示するテキストエリア	
  var slider = document.getElementById('slider1');//スライダー本体
  var bar1 = document.getElementById('bar1');//スライダーバー
  var input = document.getElementById('slider_btn');//スライダーのつまみ

  var dragging = false;
  var value = output.value;// 初期位置
  var width = input.clientWidth / 2; //ツマミの中心点までの距離

  var max_val = 10;//最大値
  var min_val = 0;//最小値
  var step = 1; //区切り間隔

  if( ((max_val-min_val) % step) > 0) {
     alert("区切り間隔の値が不正です。");
    return;
  }
  //1目盛毎のwidth。小数点以下1桁まで。
  var step_width = Math.round( (slider.clientWidth / ((max_val-min_val) / step)) * 10) / 10 ;

  var set_value = function (){

    // つまみのサイズ(input.clientWidth)だけ位置を調整
    input.style.left = (value - input.clientWidth/2) + 'px';

    //指定範囲内から選択された値
    if(value < 0) value = max_val;
    else if (value > slider.clientWidth) value = min_val;  
    value = Math.round(value / step_width) * step + min_val;
    //テキストエリアにセット
    output.value = value;
  };
  set_value();

  // バー部分をクリックしたとき
  slider.onclick = function(evt){
    dragging = true;
    document.onmousemove(evt);
    document.onmouseup();
  };
  // ドラッグ開始
  input.onmousedown = function(evt){
    dragging = true;
    return false;
  };
  // ドラッグ終了
  document.onmouseup = function(evt){
    if (dragging) {
      dragging = false;
      output.value = value;
      //つまみの色を戻す
      input.style.color = "#A6937C";
    }
  };

  document.onmousemove = function(evt){
    if(dragging){
      // ドラッグ途中
      if(!evt){
        evt = window.event;
      }
      //マウスのx座標の位置
      var left = evt.clientX;
      //スライダーの位置
      var rect = slider.getBoundingClientRect();
      // マウス座標とスライダーの位置関係で値を決める
      value = Math.round(left - rect.left - width);
			
      //つまみの位置を目盛にあわせる		
      value = Math.round(value / slider.clientWidth * 10 ) * step_width;	
	
      // スライダーからはみ出したときの修正
      if (value < 0) {
        value = 0;
      } else if (value > slider.clientWidth) {
        value = slider.clientWidth;
      }
		
      //スライダーバー
      bar1.style.left = "0px";
      bar1.style.width = value + "px";
      bar1.style.top = "0px";
      //つまみの色
      input.style.color = "#D24034";
	
      set_value();
      return false;
    }
  };
};

ちなみに、jQuery を使うスライダー
jQuery UI