IE8, IE9 環境 において jQuery で クロスドメイン通信 する方法

2013年8月10日 0:53 , , , 0 件のコメント

クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"クライアント側" ── 特に IE8, IE9 ── において クロスドメイン通信 を実現する 実装方法 を記載します。

IE8、 IE9 で クロスドメイン通信 を行う場合、 XDomainRequest を利用します。 この XDomainRequest は XMLHttpRequest と似て非なるもの（詳細は こちら）なので、そのまま jQuery.ajax で使うことが出来ません。 jQuery の バグトラック によると、この違いは プラグイン で吸収するそうです。 で、その プラグイン と 使い方 は以下の通りです。

XDomainRequest 対応 プラグイン を利用した クロスドメイン通信 の 実装

  1. プラグインをコピーして保存。
  2. クロスドメイン通信 する スクリプト を編集。
    <!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({
    url: 'http://server/test',      // 別ドメインサーバーへの URL。
    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 の フォロー」 お願いします！！