XMLHttpRequest level2ではクロスドメインでの通信が可能になったので、その仕組を少し調べてみた。(以下 XMLHttpRequestはXHR)
間違いなどあるかもしれませんので、ご注意ください。
まずは XHR level1の時にクロスドメインでの通信を使用としたときの動作について説明します。
A.comを表示してロードされた上記のスクリプトがB.comにXMLHttpRequestを行うと、JSがエラーを吐きます。この時実際、HTTPリクエストは送信されません。
何故こういったことが起きるかというと、クロスドメイン制約と呼ばれる制約があり、あるドメインでロードされたスクリプトは同一ドメインへの通信しか許可されません。
制約がある理由としては
XHR level1はクッキーをブラウザが自動で付加するので、例えばユーザがログイン済みのB.comなどの情報を取得されてしまいます。
又、スクリプトはユーザのブラウザで実行されるのでユーザのプライベートネットワーク上のサーバなどの情報を取得されてしまいます。
そのため、XHR level1ではクロスドメインでの通信は出来ません。
では、XHR level2ではどのようにしてクロスドメインでの通信を行うのでしょうか？
XHR level2 ではクロスドメインの通信時にはクッキーを付加しないでHTTPリクエストを行い、レスポンスに許可ヘッダ(Access-Control-Allow-Origin)が付加されていた場合のみブラウザはスクリプト側に受け取ったデータを渡します。
(こうすればサーバが提供したいデータのみ提供することができます)
なので、クロスドメインであってもHTTPリクエストはひとまず送信されますし、そのレスポンスもブラウザは受信もします。
以下その様子です。
http://192.168.1.104/xhr/に自サイトへのXHRとクロスドメインになるXHRを行うスクリプトを配置しました。(chromeではXHRはlevel2になります)
画像のように、http://www.yahoo.comへのXHRの部分でXMLHttpRequest Exceptionが投げられていて、実際にデータの取得は行えてません。
しかし、ブラウザの通信情報を見るとブラウザはhttp://www.yahoo.comから200番のレスポンスを受信している事が分かります。
対応ブラウザはIE(8〜),Firefox,Chrome,safariとほとんどの主要ブラウザが対応していますが、Operaだけまだ対応してないようです。サーバ側にXHR level2を許可するヘッダを追加しなければならないので、XHR level2が主流になるのはOperaが対応し、IE8以降の利用者が増えてからになるのかなと思います。
