クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"クライアント側" ── 特に IE8, IE9 ── において クロスドメイン通信 を実現する 実装方法 を記載します。
IE8、 IE9 で クロスドメイン通信 を行う場合、 XDomainRequest を利用します。 この XDomainRequest は XMLHttpRequest と似て非なるもの(詳細は こちら)なので、そのまま jQuery.ajax で使うことが出来ません。 jQuery の バグトラック によると、この違いは プラグイン で吸収するそうです。 で、その プラグイン と 使い方 は以下の通りです。
XDomainRequest 対応 プラグイン を利用した クロスドメイン通信 の 実装
- プラグインをコピーして保存。
- プラグイン ソースコード:[GitHub] tlianza/ajaxHooks/src/ajax/xdr.js
- クロスドメイン通信 する スクリプト を編集。
123456789101112131415161718192021222324252627282930<!DOCTYPE html>
<
html
>
<
head
>
<
title
>xdr テスト</
title
>
</
head
>
<
body
>
<
input
type
=
"button"
id
=
"btn"
value
=
"recieve"
/>
<
div
id
=
"rst"
></
div
>
<!-- jQuery 本体 の読み込み -->
<script type="text/javascript" src="./jquery-1.10.2.js">
</script>
<!-- プラグイン の読み込み -->
<script type="text/javascript" src="./xdr.js">
</script>
<!-- クロスドメイン通信 する スクリプト -->
<script type="text/javascript">
$.ajax({
type:
'GET'
,
// "GET" または "POST" のみ利用可能
crossDomain:
true
,
dataType:
'text'
// "text" のみ利用可能
}).done(
function
(data, textStatus, jqXHR) {
$(
'#rst'
).html(JSON.stringify(data));
}).fail(
function
(jqXHR, textStatus, errorThrown) {
window.alert(textStatus);
});
</script>
</
body
>
</
html
>
注意
この方法で利用できる通信は GET
, POST
で、Content-Type: text/plain
のみです。
これは XDomainRequest
の機能制約に依存しています。
その他の制約に関する詳細は こちら をご参照ください。
また、上記実装だけで クロスドメイン通信 は実現できません。
サーバー からの レスポンス に Access-Control-Allow-Origin
が含まれている必要があります。
サーバー側 の 設定は以下を参考にしてください。
今回、以下のサイトを参考にしました。
jQuery の バグトラック
元のソースコード。
プラグイン化したソースコード。
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!