dojoのXhrIframeProxyでプロキシサービスを使わずにクロスドメインXML取得
以前にここで触れた
http://d.hatena.ne.jp/shinichitomita/20060803/1154609128
について、最近0.4.0でパッケージに正式に含まれたらしいので、ちょっと試してみる。
テスト内容
http://stomita.web.fc2.com/xip_test.html
から、サイトの外にある
http://www.geocities.jp/stormriders999/fruits.xml
のデータを取得し、表示
セットアップ
- dojo 0.4.0をダウンロード
http://download.dojotoolkit.org/release-0.4.0/dojo-0.4.0-ajax.zip
- 圧縮ファイルを展開し、dojo-0.4.0/src/io/xip_server.html を http://www.geocities.jp/stormriders999/ にアップロード。ただし、以下の点を変更しないと動かなかった。たぶんFirefoxがlocation.hashで勝手にURLデコードをしてしまうため。
122c122 < xipClientUrl = decodeURIComponent(window.location.hash.substring(1, window.location.hash.length)); --- > xipClientUrl = decodeURIComponent(window.location.href.replace(/^.*#(.*)$/, '$1'));
- http://www.geocities.jp/stormriders999/isAllowed.js を定義する。xip_server.htmlから呼び出されるポリシー記述ファイル。これによってどのリクエストをクロスドメインで許すかオプトインできる。
function isAllowedRequest(request){ // only GET request from stomita.web.fc2.com is allowed. return (xipClientUrl.indexOf("http://stomita.web.fc2.com/")==0 && request.method == "GET") }
<?xml version="1.0"?> <fruits> <fruit> <name>apple</name> <size>XS</size> <color>red</color> </fruit> <fruit> <name>banana</name> <size>S</size> <color>yellow</color> </fruit> <fruit> <name>melon</name> <size>XS</size> <color>green</color> </fruit> </fruits>
- http://stomita.web.fc2.com/js/dojo 以下に、dojoライブラリをアップロード
- http://stomita.web.fc2.com/xip_test.html を以下のように記述
<html> <head> <title>dojo XhrIframeProxy test</title> <script type="text/javascript" src="./js/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.io.*"); dojo.require("dojo.io.XhrIframeProxy"); </script> </head> <body> <script type="text/javascript"> function getXML(url) { dojo.io.bind({ iframeProxyUrl: 'http://www.geocities.jp/stormriders999/xip_server.html', url: url, load: function(type, data, event, kwArgs) { alert(data); } }); } </script> <input type="text" id="xmlUrl" value="http://www.geocities.jp/stormriders999/fruits.xml" size="80" /><br /> <input type="button" onclick="javascript:getXML(document.getElementById('xmlUrl').value)" value="Get XML" /> <div id="result"></div> </body> </html>
所感
良い点
懸念点
- IEでリクエストのたびにクリック音が発生。気にならないならOK。
- IFRAMEを二重に使うため、リソース消費が大きくなる?かも。
- タイマーを使ってfragment identifier(URLの#以降)を監視するため若干遅延する可能性。
- 巨大データの取り扱いについてまだ未知数。
あ、あとdojoが大きすぎ ^^;
(追記)
IEのクリック音、Onにしてテストしてみたら、巨大データを通信するときに狂ったように連打しだした。まあ面白いがこれはどうよ。