- カテゴリ
- JavaScript
Ajaxと言えば、JavaScriptから呼び出されたXMLHttpRequestによるサーバとの非同期通信に端を発した技術の総称です。
僕がこの技術に出会ったのは2003年4月でした。
OpenThoughtでデモを見て、仕組みを知ったとき衝撃を受けたのを今でも覚えています。
さて、そんなAjaxですが、XMLHttpRequestの有名な制約として、クロスドメイン通信ができないことが挙げられます。
通信ができない単純なケースなら想像できるし、実際昔にやってみたので、理解はしていたつもりなのですが、実はそんなに正確ではなかったので、今回はそのメモ。
あまり深く考えずずっとそう覚えていたのですが、これは正しくない。
ブラウザは最初のアドレスへ一次リクエストを出してhtmlを取得し、そのhtml内に記述されている画像やスクリプトのURLへ二次、三次のリクエストを発行し、ページに必要なリソース全てを回収します。
この時、JavaScriptの配布元がどこかに依らず、一次リクエスト先のドメインとしか通信できない、が正しい。
当然のことですが、整理として。
ついうっかり、スクリプト配布元のドメインとしか通信できないんだよね、みたいな事を口走ってしまうもので...。
分かりにくいですが、画にしてみました。
example-1.comが一次リクエスト先であれば、その後どこのドメインかに関わらず、XMLHttpRequestは一次リクエスト先としか通信できないと言うことを示したものです。
[画像:XMLHttpRequestのセキュリティ構造・クロスドメイン通信]
僕がこの技術に出会ったのは2003年4月でした。
OpenThoughtでデモを見て、仕組みを知ったとき衝撃を受けたのを今でも覚えています。
さて、そんなAjaxですが、XMLHttpRequestの有名な制約として、クロスドメイン通信ができないことが挙げられます。
通信ができない単純なケースなら想像できるし、実際昔にやってみたので、理解はしていたつもりなのですが、実はそんなに正確ではなかったので、今回はそのメモ。
【間違い】XMLHttpRequestはスクリプト配布元としか通信できない
あまり深く考えずずっとそう覚えていたのですが、これは正しくない。
ブラウザは最初のアドレスへ一次リクエストを出してhtmlを取得し、そのhtml内に記述されている画像やスクリプトのURLへ二次、三次のリクエストを発行し、ページに必要なリソース全てを回収します。
この時、JavaScriptの配布元がどこかに依らず、一次リクエスト先のドメインとしか通信できない、が正しい。
【正解】JavaScriptの配布元がどこかに依らず、一次リクエスト先のドメインとしか通信できない
当然のことですが、整理として。
ついうっかり、スクリプト配布元のドメインとしか通信できないんだよね、みたいな事を口走ってしまうもので...。
例)スクリプト配布元がexample-2.netであっても、example-1.comとしか通信できない
分かりにくいですが、画にしてみました。
example-1.comが一次リクエスト先であれば、その後どこのドメインかに関わらず、XMLHttpRequestは一次リクエスト先としか通信できないと言うことを示したものです。
[画像:XMLHttpRequestのセキュリティ構造・クロスドメイン通信]
[フレーム]
コメント一覧 (2)
ご存知かもしれませんが、クロスドメイン環境下での非同期通信の方法をまとめましたのでご参考に。
こちらがクロスドメイン環境下での非同期通信のサンプルです。