JavaScriptからJSON形式のWebサービスを呼び出す

Yahoo! や del.icio.usなど、JSON形式でコールバックに対応しているサービスが多いので、動的に呼び出すための JavaScript オブジェクトを作成してみた。

var JsonWebServicesStub = {

  requestCounter : 0,

  responseCallbacks : [],

  headElem : document.getElementsByTagName('head').item(0),

  invoke : function (url, callback) {
    var callbackParam = arguments[2] || 'callback';
    var script = document.createElement('script');
    var index = JsonWebServicesStub.requestCounter++;
    JsonWebServicesStub.responseCallbacks[index] = function(responseObj) {
      delete JsonWebServicesStub.responseCallbacks[index];
      callback(responseObj);
      script.parentNode.removeChild(script);
    }
    var callUrl = url.indexOf('?') > 0 ? url+'&' : url+'?';
    callUrl += callbackParam+'='+escape('JsonWebServicesStub.responseCallbacks['+index+']');
    // disable browser cache ..
    callUrl += '&rand='+Math.random();
    script.src = callUrl;
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    JsonWebServicesStub.headElem.appendChild(script);
  }

};

で、これを使って動的に呼び出すときは以下のようにする。

var div = document.getElementById('feeds');
var input = document.getElementById('deliciousID')
var userid = input.value;
var url = 'http://del.icio.us/feeds/json/'+userid+'?count=10';
JsonWebServicesStub.invoke(url, function(posts) {
  var html = '<ul>';
  for (var i=0; i<posts.length; i++) {
    var p = posts[i];
    html += '<li><a href="'+p.u+'">'+p.d+'</a></li>';
  }
  html += '</ul>
  div.innerHTML = html;
});

(追記)
一部スクリプト内容を修正

(追記 2007/12/25)
responseObj引数が欠けていたのを追加