「del.icio.us JSON Feedsを使ってブックマークをサムネイル付きで表示する」の続きです。今回は「JSON Post Feeds」のコールバックの仕組み(JSONPともいう)を使ってみました。↓こんな感じです。
見た目や機能は前回の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という仕組みを活用しましょう。