美女Linuxブログパーツ作成企画
- ブログパーツを作る(準備)
- ブログパーツで画像の切り替え
- ブログパーツのフォントを揃える
- ブログパーツをjavascriptだけで作る場合の懸念点
- ブログパーツに画像を重ね合わせてフレームを付ける
- ブログパーツから動的にパーツデータを取得する ← いまここ
ブログパーツをjavascriptだけで作る場合の懸念点 | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/1530
のところで、クロスサイトスクリプトの問題がなぁ、う~ん、と思っていたのですが、なんじゃ JSONP を使えば簡単にクリア。
これでできる! クロスブラウザJavaScript入門:第11回 JSONP入門|gihyo.jp … 技術評論社
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011
要するに、JSON でデータを拾えればいいので、callback 関数を用意してやれば良い、という抜け道ですね。最近の javascript の定番です。これを使うと、XMLHttpRequest を使わなくて良いし、結構便利。
詳しい手順なんかは、技術評論社のページを参考にして欲しいのですが、簡単にメモしておくと、
- コールバックされる関数を書いておく。
- document.write 等で、コールバック呼出しを書き出す PHP をコール。
- PHPが、コールバック関数を書き出す。
- コールバック関数が呼び出される。
- コールバック関数内の処理が行われる。
ってな感じで処理が流れます。
callback.php に
callback( [ { name: "su", desc: "管理者モードになる", url: "photo000.png" }, { name: "arp", desc: "proxy apr テーブルを表示する", url: "photo001.png" }, { name: "route", desc: "ルーティングテーブルを表示する", url: "photo002.png" }, { name: "shutdown", desc: "システムをシャットダウンする", url: "photo003.png" }, { name: "sudo", desc: "管理者モードで実行する", url: "photo004.png" }, { name: "unzip", desc: "zipファイルを解凍する", url: "photo005.png" }, ] );
なるデータを用意しておく。
# このあたりは、実際は、MySQLからデータを引っ張って来て構成ですね。
これを呼出し側の javascriptで
document.write("<script src='callback.php'></script>);
と書いておいて、
function callback ( items ) { for ( var i in items ) { items[i] で、それぞれの要素を処理する } }
という訳です。なるほど、こうすると非同期的に動くので後処理なんかは callback 関数内に書けばよいので便利。
これを実装したのが下の例です。
<サンプル>
試しに右上に該当するコマンド名を表示させています。