Program

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だと思いますw

まとめ

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

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

Facebook / 広告
2012年12月04日 | Posted in Program1 Comment » 

関連記事

コメント1件

  • 技術情報 より:

    クロスドメインXMLHttpRequestを実現するnode.js/expressプロキシ

    参考リンクとして掲載させていただきました。

  • コメントを残す

    メールアドレスが公開されることはありません。

    スパム対策のため、コメントする際は下記の計算式を埋めてください。 計算式の有効期限が切れました。計算式の隣にある再読み込みボタンを押してください。