第9回 Ajax編(後編)連載:jQuery逆引きリファレンス(8/10 ページ)

» 2010年07月30日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 $.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>

リスト127 Yahoo!ブログ検索を利用して、ブログ検索機能を実装(AjaxJsonp.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト127の実行結果

 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.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。