あまり知られていないけど役に立つ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の場合は特殊です。
var xdr = new XDomainRequest();
xdr.onload = function(){
alert('Response:' +xdr.responseText);
};
xdr.onerror = function(){
alert('エラーだよ');
};
xdr.onprogress = function(){};
xdr.open('POST', '送信先URL');
xdr.send({param1:'value1', param2:'value2'});
といった具合に記述します。特殊ですね。
注意点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だけじゃなく、サーバー側も手をいれないとダメだよ！
いかがでしたでしょうか。結構使いやすそうでしょう？是非これらを利用して、面白いアプリケーションを作ってください！