XMLHttpRequest Level 2(XHR2)による次世代Ajax通信 (5/5)
作成:2013-02-24 10:11
更新:2013-02-24 10:11
更新:2013-02-24 10:11
■XHR2によるクロスドメインAjax通信
XHR2では、スクリプトが配置されているドメイン以外のサイトにもアクセスすることができます。
これは「CROSS ORIGIN RESOURCE SHARING(CORS)」と呼ばれるもので、これを利用すれば外部からJavaScriptで直接必要なデータを受け取れます。
ただし! どんなサイトからも自由に取り出せる、というわけではありません。あるサーバーが、別のサーバーからCORSによるアクセスを許可するためには、そのページのヘッダーに以下のものを追加する必要があります。
これだけです。JavaScript側では、特に設定などはありません。openする際、アクセス先のアドレスに利用するドメインのアドレスを書くだけです。XHR2自体の使い方は普通のAjax通信と全く同じです。
CORSの設定は、お使いのサーバーなどの環境によって、設定は違ってきます。それぞれの環境に応じて設定などを行なってください。またサーバー側で何らかの言語を用いているならば、サーバーサイドプログラムでヘッダーを出力させることで対応できます。以下に主なものをまとめておきましょう。
・Apache HTTP Server
.htaccessの中に以下の一文を追加しします。どこからでもアクセスできるように公開するなら、ドメインの値にワイルドカード(*)を指定すればOKです。
・Javaの場合
・Pythonの場合
・PHPの場合
・Rails(Ruby)の場合
・ASP .netの場合
これは「CROSS ORIGIN RESOURCE SHARING(CORS)」と呼ばれるもので、これを利用すれば外部からJavaScriptで直接必要なデータを受け取れます。
ただし! どんなサイトからも自由に取り出せる、というわけではありません。あるサーバーが、別のサーバーからCORSによるアクセスを許可するためには、そのページのヘッダーに以下のものを追加する必要があります。
Access-Control-Allow-Origin: 《許可するドメイン》
これだけです。JavaScript側では、特に設定などはありません。openする際、アクセス先のアドレスに利用するドメインのアドレスを書くだけです。XHR2自体の使い方は普通のAjax通信と全く同じです。
CORSの設定は、お使いのサーバーなどの環境によって、設定は違ってきます。それぞれの環境に応じて設定などを行なってください。またサーバー側で何らかの言語を用いているならば、サーバーサイドプログラムでヘッダーを出力させることで対応できます。以下に主なものをまとめておきましょう。
・Apache HTTP Server
.htaccessの中に以下の一文を追加しします。どこからでもアクセスできるように公開するなら、ドメインの値にワイルドカード(*)を指定すればOKです。
Header append Access-Control-Allow-Origin: 《ドメイン》
・Javaの場合
response.addHeader("Access-Control-Allow-Origin", "《ドメイン》");
・Pythonの場合
self.response.headers.add_header("Access-Control-Allow-Origin", "《ドメイン》")
・PHPの場合
header("Access-Control-Allow-Origin: 《ドメイン》");
・Rails(Ruby)の場合
headers['Access-Control-Allow-Origin'] = '《ドメイン》'
・ASP .netの場合
Response.AppendHeader("Access-Control-Allow-Origin", "《ドメイン》");
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る