実装してみよう (2)
検索
キーワードを引数として検索を実行する関数を実装します。データを解析し,
リスト8
function search(keyword) {
// (1) 表示領域を初期化します。
$("#videos").text("Loading...");
// (2) ajax通信を行います
$.ajax({
dataType: "jsonp", // (3) データ形式はJSONPを指定します。
data: { // (4) リクエストパラメータを定義します。
"vq": keyword,
"max-results":"10",
"alt":"json-in-script"
},
cache: true, // (5) キャッシュを使用します。
url: "http://gdata.youtube.com/feeds/api/videos",
success: function (data) { // (6) データ取得に成功した場合の処理を定義します。
$("#videos").empty();
$.each(data.feed.entry, function(i,item){ // (7) entryの各要素へアクセスします。
var group = item.media$group;
$("<a/>") // (8) a要素を生成
.attr("href", group.media$player[0].url) // (9) a要素のhref属性を設定
.append("<img src='" + group.media$thumbnail[0].url + "'/>") // (10) a要素の子要素にimg要素を追加
.appendTo("#videos"); // (11) a要素を表示領域の子要素に追加
});
}
});
}
まず,
ビデオを検索するajax通信を定義します
$.ajax({オプションパラメータ});
今回定義するオプションパラメータは次の通りです。
dataTypeは,
dataは,
cacheにfalseを指定すると,
urlは,
successはデータ取得に成功した場合に,
まず,
$("#videos").empty();
empty()は,
次に,
$.each(data.feed.entry, function(i,item){
// 各要素への処理...
});
とするることで,
2番目の引数fnには,
よって,
var group = item.media$group
ここではループの中で処理しやすいように,
次にプレーヤのページへリンクを張ったサムネイル画像を生成します。
まず,
DOMプログラミングでは,
そのリンク要素のjQueryオブジェクトに対して,
.attr("href", group.media$player[0].url)
そのリンク要素のjQueryオブジェクトに対して,
.append("<img src='" + group.media$thumbnail[0].url + "'/>")
appendメソッドの処理イメージは次のようになります。
そして,
.appendTo("#videos")
ここで,
jQueryオブジェクトのメソッドの殆どは,
以上で,