XMLHttpRequest Level2を使って別ドメインと通信する

こんばんは、最近はPHPとjavascriptしか書いていないころすけ(@wg_koro)です。

あまり知られていないけど役に立つJavascript tips Advent Calendar 2012 参加者リスト – Qiitaの順番が回ってきたので書こうと思います。

さてさて。今回はAjaxの基幹技術であるXMLHttpRequest(以降、XHR)のお話です。これを使って、別ドメインと通信する方法を書いてみます。

XMLHttpRequest

ご存じの通り、XHRを使うとサーバーとHTTP通信ができますね。この通信は同じドメイン内でしか利用できません。

ところがXMLHttpRequest Level2が実装されているブラウザを利用すると、別ドメインのサーバーと通信ができるようになります。

XHR Level2が実装されているブラウザ

XHR Level2が実装されているブラウザは下記の通りです。

• Firefox
• Chrome
• Safari

IEとOperaはだめ？

IEは8以降であれば、IE独自の「XDomainRequest」を使うことにより別ドメインと通信が可能になります。何でまた独自なんだマイクロソフトさんや・・・。

Operaは・・・諦めましょう(´・ω・｀)

使い方

XHR Level2が実装されているブラウザの場合、別ドメインと通信するのは非常に容易です。通常のAjax処理と同じようにするだけで利用できます。

jQueryで言うと、$.ajax({url:[ここを別ドメインのURLにするだけ]}); ですね。

IEの場合は特殊です。

といった具合に記述します。特殊ですね。

注意点1

Chrome, Firefox, Safariは通常のXHRと同じくcookieの送信ができますが、IEだとできません。※もしかしてできる方法があるのかな・・・

注意点2

今回はjavascriptのお話なので深くは書きませんが、別ドメインと通信するには受信サーバー側の設定も必要です。サーバーでは特定のヘッダー(下記)を出力しなくてはなりません。※送信側のヘッダーじゃないよ！

PHPであれば、
header(“Access-Control-Allow-Origin: *”);
header(“Access-Control-Allow-Methods: GET”);
などのヘッダー出力が必要です。

サーバー側について詳しく知りたい方は、過去エントリーへどうぞ。

Google App Engineでクロスドメイン通信 | Azrael

使いやすい

Safari、Chromeが動くということは、AndroidとiPhoneのブラウザで使えるということです。これは嬉しい。スマートフォン用のサイトを使う場合に活用するとVery Goodだと思いますｗ

まとめ

• Safari, Chrome, Firefox・・・とIE8(ちょっと機能が限られますが)で使えるよ！
• IE以外は通常のAjax処理でOKだよ！
• javascriptだけじゃなく、サーバー側も手をいれないとダメだよ！

いかがでしたでしょうか。結構使いやすそうでしょう？是非これらを利用して、面白いアプリケーションを作ってください！