クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"クライアント側" ── 特に IE8, IE9 ── において クロスドメイン通信 を実現する 実装方法 を記載します。
IE8、 IE9 で クロスドメイン通信 を行う場合、 XDomainRequest を利用します。 この XDomainRequest は XMLHttpRequest と似て非なるもの(詳細は こちら)なので、そのまま jQuery.ajax で使うことが出来ません。 jQuery の バグトラック によると、この違いは プラグイン で吸収するそうです。 で、その プラグイン と 使い方 は以下の通りです。
XDomainRequest 対応 プラグイン を利用した クロスドメイン通信 の 実装
- プラグインをコピーして保存。
- プラグイン ソースコード:[GitHub] tlianza/ajaxHooks/src/ajax/xdr.js
- クロスドメイン通信 する スクリプト を編集。
<!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 の フォロー」 お願いします!!