del.icio.us JSON FeedsはJSONPにも対応してます

「del.icio.us JSON Feedsを使ってブックマークをサムネイル付きで表示する」の続きです。今回は「JSON Post Feeds」のコールバックの仕組み(JSONPともいう)を使ってみました。↓こんな感じです。

View example

見た目や機能は前回のAjaxアプリと同じですが、コールバック関数を指定してJSON Post Feedsを取り込むという違いがあります。

JSON Post Feedsは次のようなscript要素を使って取り込んでいます。このとき「callback」というパラメータにというコールバック関数の名前を指定しています。

<script type="text/javascript"
  src="http://del.icio.us/feeds/json/developmentor?count=20&callback=onPosts"
></script>

このscript要素は次のようなJavaScript要素を出力します。callbackパラメータで指定した「onPosts」という関数を実行します。このとき関数の引数がブックマークのオブジェクトの配列になります。

onPosts([{
  "u": "http://astore.amazon.co.jp/",
  "n": "11月15日から正式版がスタートしました。自由度も上がって使ってみたい気にさせます。",
  "d": "Amazonアソシエイト・プログラム　インスタントストア",
  "t": ["amazon", "affiliate"]
  },
  ...
]);

onPostsという関数を用意しておき、引数のブックマークのオブジェクトを使ってWEBページにブックマークのリストを表示しています。リストの表示方法は前回と同じです。

function onPosts(posts) {
  ...
}

今回はあらかじめWEBページにscript要素を埋め込んでいますが、さらにJavaScriptを使ってscript要素を動的生成すれば、よりインタラクティブなAjaxアプリにもなるでしょう。どんどんJSONPという仕組みを活用しましょう。