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

0 件のコメント

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

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

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

  1. プラグインをコピーして保存。
  2. クロスドメイン通信 する スクリプト を編集。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!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 の フォロー」 お願いします!!