コールバックのイベントハンドリングを容易にする jQuery JSONP プラグイン

ホーム > Postal Search Ajax API with jQuery > AJAX

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 ライクな jQuery JSONP プラグインに書き換えてみました。

ダウンロード

jquery.jsonp.js (Uncompressed only) -- 2008-06-08

(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) {

      setTimeout(function() {
        script.remove();
      }, 10);

      self.each(fn, [json]);
    };

    jQuery('head', document)[0]
      .appendChild(script[0]);

    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:
    });