404 Blog Not Found:javascript - prototype HateBJSON

2006年09月22日 06:00 [Edit]

javascript - prototype HateBJSON

これでやっと fetch4js みたいな力技を使わずに、Javascriptのみではてブのデータを再利用できますね。

http://b.hatena.ne.jp/entry/json/任意のURL*1 を GET リクエストで送信することにより、JSON 形式でデータを取得することができます。

というわけで、はてブのJSONを取ってくるPrototypeを。

基本的な使い方はこんな感じ。

var hatebjson = new HateBJSON('parse_hatebjson');
function parse_hatebjson(json){
  // ここでjsonを処理
}
// ここでJSONを取得し、取得したJSONがparse_hatebjson()で処理される。
hateb.parse('http://www.example.com/');

ここでは秀作習作として、JSONの中身をdumpする例。JKL.Dumperを使っているので、parserの中身は

function parse_hatebjson(json){
  $('hatebjson').innerHTML = (new JKL.Dumper()).dump(json)
}

と簡単なものです。

以下がHTMLまで含めた全sourceとなります。Enjoy!

<script language="JavaScript"
 src="http://www.kawa.net/works/js/jkl/share/jkl-dumper.js"></script>
<script>
function HateBJSON(cb){
  this.proxy = 'http://b.hatena.ne.jp/entry/json/';
  this.cb    = cb;
  this.parse = function(uri, cb){
    var script = document.createElement('script'); 
    script.id = this.proxy + '?url=' + encodeURIComponent(uri) 
                + '&callback=' + this.cb;
    script.charset = 'UTF-8';
    script.src = script.id; 
    document.lastChild.appendChild(script);
    document.removeChild(script);
  };
  return this;
}
function $(id){ return document.getElementById(id) }
function parse_hatebjson(json){
  $('hatebjson').innerHTML = (new JKL.Dumper()).dump(json)
}
var hatebjson = new HateBJSON('parse_hatebjson');
//hatebjson.parse('http://www.hatena.ne.jp/'); 
</script>
<div style="border: dotted 1px; padding: 0.25em">
<input type="text" id="uri" size="64"
 value="http://www.dan.co.jp/~dankogai/">
<input type="submit" onclick="hatebjson.parse($('uri').value)" >
<pre id="hatebjson">
</pre>
</div>

Dan the Javascripter

Posted by dankogai at 06:00│Comments(2)│TrackBack(2)