Nakajiman Software Blog: JSONP Plugin for jQuery 1.1.2

JSON for jQuery

This adds a json() method to the $ function. The first argument is the URL to the JSON resource, with the text {callback} wherever the JSON callback method should be provided. In a JSONP URL, you would use jsonp={callback}; in a Yahoo! JSON URL you would use format=json&callback={callback}.

JSON for jQuery というプラグインを jQuery ライクに書き換えてみました。

JSONP Plugin for jQuery 1.1.2

/*
 * JSONP Plugin for jQuery 1.1.2
 *
 * Copyright(C) 2007 LEARNING RESOURCE LAB.
 * http://postal-search-apis-and-solutions.blogspot.com/
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 */
(function($) {

  // $.jsonp
  $.jsonp = {
  };

  // jsonp
  $.fn.jsonp = function(url, fn) {
    var self = this;
    var key = 'fn' + (new Date()).getTime();

    var script = $(document.createElement('script'))
      .attr('type', 'text/javascript')
      .attr('charset', 'UTF-8')
      .attr('src', url.replace(/{fn}/, 'jQuery.jsonp.' + key));

    $.jsonp[key] = function(json) {
      script.remove();
      fn.apply(self, [json]);
    };

    $('head', document).append(script);

    return self;
  };

})(jQuery); // function($)

次のとおり、使い方は JSON for jQuery とほとんど変わりありません。JSON for jQuery は URL に埋め込むコールバック関数を {callback} で表しますが、このプラグインは {fn} としています。何でも短い名前が好みなんです。(^^


  var url = 'http://express.heartrails.com/api/json?jsonp={fn}';
  var params = jQuery.param({
    method: 'getStations',
    x: 経度,
    y: 緯度,
  });

  jQuery('#station')
    .text('loading...')
    .jsonp(url+'&'+params, function(json) {
      //TODO:
    });

JSON for jQuery のアイディアとと実装の枠組みは同じですが、いくつか改善しています。

コールバックしたタイミングで、生成した script タグを削除するようにしています。また、script タグを生成するとき charset 属性を UTF-8 としています。

コールバック関数をグローバルではなく $.jsonp オブジェクトに保持するようにしています。

コールバックのコンテキストをメソッドチェーン中の jQuery オブジェクトとしています。fn.apply(self, [json]) とするか、self.each(fn, [json]) どちらにすべきか悩みましたが、前者を選択しました。jQuery の流儀だと後者の気もします。う～む。まだ悩み中です。

JSONP Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。