Ajax通信（その３）

jQuery jsonp

次に実際にJSONPを使った通信をしているサンプルを作ってみようと思う。
今回はあくまでもクライアント側の実装についての勉強なので、サービス側は既に存在するものを使用する。


以下は、ようつべに対してキーワードを送信し、ヒットした10件のサムネイル画像を表示する「ローカルアプリ」
すごいね〜、これ、ソースコードをまるまるコピペしてローカルファイルに保存してブラウザで開くだけで
クライアント・サーバ形式アプリとして使えるんだぜ？

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      //検索処理
      function search(keyword) {
        //初期化
        $("#videos").text("Loading...");

        //ajax通信（引数として、通信時に必要なパラメータをJSON形式でセットする。）
        $.ajax({
          dataType: "jsonp", //通信方式を指定する。ここではJSONP。
          data: {            //通信で指定するパラメータを、これまたJSON形式で記述。
            "vq": keyword,
            "max-results":"10",
            "alt":"json-in-script"
          },
          cache: true,
          //通信先のURLを指定。
          url: "http://gdata.youtube.com/feeds/api/videos",

          //★↓これがJSONPにおける肝であるコールバック関数。
          //    処理に成功した場合はこの関数が返り値データdataとともに即座に実行される。
          //    で、クライアント側のJavascriptでは、取得データを材料にして、
          //    必要な処理を実行させる。
          //    ちなみに返り値データdataがどんな構造をしているかは、
          //    通信したWebサービスの仕様による感じ。
          success: function (data) { 
            $("#videos").empty();
            $.each(data.feed.entry, function(i,item){
              var group = item.media$group;
              $("<a/>")
                .attr("href", group.media$player[0].url)
                .append("<img src='" + group.media$thumbnail[0].url + "'/>")
                .appendTo("#videos");
            });
          }
        });
      }
      $(function(){
        $("#searchButton").click(function() {
          //このsearch関数の中で、検索ボタンクリック時に発生する処理を全て行う。
	  search($("#keyword").val());
          return false;  //formタグ中のボタンなので、submitが発生しないように。
	});
      })
    </script>
  </head>
  <body>
    <form>
      <div id="videos"></div><br/>
      <input id="keyword" type="text" value="検索キーワード" /><br/>
      <input id="searchButton" type="button" value="検索" /><br/>
    </form>
  </body>
</html>