prototype.js でクロスドメインの Ajax の読み込みテスト

Opera が動くようになっていたので更新しました

表示は、console.log で行っています。各ブラウザの開発者ツールを開いた状態でボタンをクリックして下さい。
IE : F12 => スクリプトタブ ( その後ページをリロード )
Firefox : Firebug のコンソール
Chrome : F12( または CTRL + SHIFT + I )からコンソール
Safari : CTRL + ALT + I からコンソール
Opera : CTRL + SHIFT + I からコンソール

結局 IE8 用に prototype.js を改造するはめになりました。テストした URL は、「Access-Control-Allow-Origin: *」 を返すようにしていますが、prototype.js 内で、ヘッダーを変更している為、セキュリティ回避の為、そのままでは エラーになるのでsetRequestHeaders
を無効にしています。( 偽装を拒否する為のようです )

IE8 の場合、インターネットオプションで、「ドメイン間でのデータソースのアクセス」を有効にしてやると、Access-Control-Allow-Origin が無くても XMLHttpRequest でアクセスできるようになります。Access-Control-Allow-Originの有無で制御したい場合は、XDomainRequest を使用する必要があります

但し、XDomainRequest は、XMLHttpRequestとでは、イベントに互換性が無いようなのでこのような変更が必要になります。

<script type="text/javascript" src="http://lightbox.on.coocan.jp/prototype_x.js"></script>
<script type="text/javascript">
Ajax.Request.prototype.setRequestHeaders = function() {}
function testCall() {
new Ajax.Request('http://lightbox.on.coocan.jp/ver.php', {
	method: "get",
	asynchronous: true,
	onComplete: function(response) {
		console.log(response.responseText);
	}
});
}

</script>
<input type="button" value="実行" onclick='testCall();'>

以下は変更部分です

var Ajax = {
  getTransport: function() {
    return Try.these(
      function() {return new window.XDomainRequest()},
      function() {return new XMLHttpRequest()},
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')}
    ) || false;
  },

  activeRequestCount: 0
};
--------------------------------------------
      if ( Prototype.Browser.IE ) {
          var ieparam1 = this.options.onComplete;
          var ieparam2 = this.transport;
          this.transport.onload = function() { ieparam1(ieparam2) };
      }
      else {
          this.transport.onreadystatechange = this.onStateChange.bind(this);
      }

関連する記事

prototype.js を クロスドメイン対応にするパッチ
Google の prototype.js を使う

▼ クロスドメインで呼び出されるコード

<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/javascript; Charset=shift_jis" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

$ver = phpversion();
print "document.write( '$ver' );";

?>

旧更新日付 : 2011-04-16

prototype.js

prototype.js (1.7.2) : Browser プロパティ

prototype.js でブラウザの種類を知る為の簡単な拡張。

prototype.js で使っていたのをさらに短縮した IE かどうかの判断。

Google の prototype.js を使う

prototype.js 内の getElementsByName の代わりになるメソッド

prototype.js : $ 関数

prototype.js : 1.6.1と1.7_rc2 の evalJSON の違い

JavaScript : prototype.js(1.6.1) の Try.these と XMLHttpRequest

prototype.js の Object.extend でプロパティを追加する

prototype.js で、$(id) 関数が name 属性のみの場合 IE 以外で使え無いのをとりあえず使えるようにする