リファラをスライスするサービス作ったよ！なんてココとココで鼻息を荒くしながら紹介したのですが、あのままですと他のドメイン（mojalog.com以外）からjavascriptで呼ぶことが出来ないじゃんかってことが調べていたら判ったので（ブフー）呼べるようにしました。みて下さった方にお詫びいたします。すみませんでした。
特に当該エントリに引用いただいたコマネタ帳のネタ帳さん。申し訳ございません。
コマネタ帳：コチラがメインブログでしょうか
このクロスドメインの問題はウェブサービスをいくつか作っているうちに判っていたことなのですが、放置していました。重ねてすみません。
というわけで、テスト用のhtml（エントリ下部参照）と、javascriptのライブラリをご自身のサイトにアップロードして、正しく動けばいろいろいじくれるかと思います。一応、labs.mojalog.comのサブドメインで試してみたので大丈夫かと思います。
javascriptのライブラリは、
JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript
こちらからダウンロードしてきてください。「1.My JSONscriptRequest class」ってとこにアンカされてます。
このクロスドメイン版は、JSONPという技術で実現しているのですが、JSONのデータフォーマットにコールバック関数なる記述を加えることによってクロスドメインの制約を解決しているわけです。判りにくいですね。
判りやすい説明がありましたので引用させていただきます。といいますか、ほとんどこちらの戯言++さんでいろいろ調べさせていただきました。
JavaScript でリモートのデータを呼び込む際に2通りの方法があると説明しました。ひとつは XMLHttpRequest クラスを使う方法，もうひとつは JavaScript ソースとしてインクルードする方法です。「クロスドメインの制約」からXMLHttpRequest を使う方法では読込先が他ドメインの場合は使えません。そこでデータを JSONP の形式にして JavaScript のソースとしてインクルードしてしまうわけです。また JSONP は関数呼び出しの形式になっているので，その関数の処理を別に記述することでコールバック関数のように機能します。
リモートのデータをjavascriptのソースとしてインクルードするということみたいですね。すごいね。
リファラのスライスサービス・サーバ側は、json([{"idx":"0","item","hoge"}]);というコールバックをしますので、script側の実装はお好きな方法でどうぞ。
サンプルソースはこんな感じです。上記のjsr_class.jsというライブラリを使用させていただいています。
<html>
<head>
<script type="text/javascript" src="jsr_class.js"></script>
<script type="text/javascript">
var jsrInst;
function getItems(){
// google でjavascript jsonという検索を行ったと仮定します。
jsrInst = new JSONscriptRequest('http://mojalog.com/mojascript/gsajax/refrxml.php?refr=http%3A//www.google.co.jp/search%3Fhl%3Dja%26q%3Djavascript+json%26lr%3D&fmt=json');
// 実際にはこう使う
// var jsrInst = new JSONscriptRequest('http://mojalog.com/mojascript/gsajax/refrxml.php?refr=' + escape( top.document.referrer ) + '&fmt=json');
jsrInst.buildScriptTag();
jsrInst.addScriptTag();
}
// コールバックがjsonなのでjsonというメソッド。変えちゃだめっぽい
function json( data ) {
var html = "";
for( idx = 0; idx < data.length; idx++ ){
alert( data[ idx ].item );
alert( data[ idx ].idx );
html = html + data[ idx ].item + ",";
}
// スライスしたリファラはご自身の検索フォームにおくなど、ご自由に使ってください
document.getElementById('result').innerHTML = html;
jsrInst.removeScriptTag();
}
</script>
</head>
<body>
<input type="button" onclick="getItems()" value="send">
<div id="result"></div>
</body>
</html>
[ 最近のエントリーとその関連エントリー ]
[ スポンサードリンク ]
| パーマリンク
