第9回 Ajax編（後編）：連載：jQuery逆引きリファレンス（8/10 ページ）
ｊQueryにおいて、Ajax関連操作のコアである「$.ajaxメソッド」についてまとめた、すぐに役立つ9本を一挙公開。
$.ajaxメソッドのdataType、jsonpオプションを利用することで「JSONP技術」を利用した外部サービスへのアクセスを行うことができます。JSONP（JSON with Padding）そのものについては本稿では割愛しますが、ざっくりといってしまうならば、JavaScriptの機能を応用して外部サーバからデータを取得する仕組みと考えておけばよいでしょう。
さっそく、具体的な例を見てみます。以下は、「Yahoo! ブログ検索」というWeb APIを利用して、指定されたキーワードでブログ検索を行い、その結果をリスト表示するサンプルです。Yahoo! ブログ検索に渡すことができるパラメータ、また、結果構造については、本家サイトを参照してください。
<script type="text/javascript">
$(function() {
// ボタン・クリック時の挙動を定義
$('#btn').click(function() {
// HTTP GETでJSONデータを取得
$.ajax({
url: 'http://search.yahooapis.jp/BlogSearchService/V1/blogSearch?appid=wings-project&results=10&output=json&callback=?', // アクセス先のURL
data: {
query: $('#keywd').val() // キーワードをパラメータとして追加
},
dataType: 'jsonp', // 応答データの種類
jsonp: 'callback', // JSONPリクエストの際に使用するパラメータ名
// コールバック関数で結果データを処理
success: function(data) {
// 結果データから<ul>／<li>リストを整形
var result = '<ul>';
$.each(data.Result,
function(index, value) {
result += "<li><a href='" +
value.Url + "'>" +
value.Title + "</a></li>";
}
);
result += "</ul>";
// 結果データを<div>要素に反映
$('#result').html(result);
}
});
});
});
</script>
……中略……
<form>
<input type="text" id="keywd" />
<input type="button" id="btn" value="検索" />
<div id="result"></div>
</form>
このHTMLを実際にブラウザで開く
JSONPによるリクエストを行うには、
- dataTypeパラメータに"jsonp"
- jsonpパラメータに任意のキー名
を指定するだけです。dataTypeパラメータは応答データの型を指定するためのパラメータで、取得するコンテンツの種類に応じてxml、html、script、json、textなどを指定できます。
jsonpパラメータには、JSONPレスポンスに含まれるコールバック関数の名前を指定するためのキー名を指定します。例えば、「jsonp: myfnc」と指定した場合には、リクエストURLに「&myfnc=xxxxxx」*が付与されます。jsonpパラメータのデフォルト値は"callback"ですので、リスト127の例ではjsonpパラメータを省略しても構いません。
* 「xxxxxx」の部分はjQueryによって自動生成される関数名ですので、プログラマーは特に意識する必要はありません。リスト127でも見たように、JSONPであっても、その応答データは通常の成功ハンドラ（successパラメータ）で処理できます。
事前の設定は実にこれだけで、後は、successパラメータで取得したJSONデータ（オブジェクト）から必要な値を取り出し、必要に応じて整形するだけです。結果レイアウト整形のためのコードがやや長いため、複雑にも思えるかもしれませんが、結果データの構造と照らし合わせつつ、対応関係を読み取ってみてください。
なお、JSONPによるリクエストを行うには、専用のメソッドとして$.getJSONメソッドもあります。$.getJSONメソッドを利用することで、よりシンプルなコードでJSONPリクエストを行うことができます。
Copyright© Digital Advantage Corp. All Rights Reserved.