1. XML Http Request Level2
の噂を聞いたので調べてみた
Pasta-K / Shuto Morii
pasta0915@gmail.com
2010.04.29.Thu
Kanasan.JS

2. 自己紹介
● 「Pasta-K」で検索！！

3. 昨日＠ビックカメラ
● たまたま目についた本の目次の中に
XMLHttpReques Level2というのがあったか
ら調べてみました
● 一夜で調べたので、
間違ってたら
優しく教えてください
● 調べたことを偉そうに喋ります
– 知ったかぶりです

4. XMLHttpRequest Level2
● XMLHttpRequestのクロスドメイン対応版
● 今までのXMLHttpRequestと同じ感じで使える
● W3C Working Draft 20 August 2009
● 最新のブラウザーだと大体動きます

5. ブラウザー対応状況
● 対応済み
● 条件付きで対応
● 非対応

6. Google Chrome, Firefox, Safari
● それぞれ最新版は対応済み
● XMLHttpRequest

7. Internet Explorer 8
● IE6 ,IE7では非対応
● XDomainRequest
– IE8独自

8. Opera
● 最新版(v10.52)でも非対応

9. クロスドメインの実装
● サーバーサイドで.htaccessを用いて
Header append Access-Control-Allow-Origin:
を指定する。
– 許可するorigin : URL
– ワイルドカード : *
● クライアントサイドは特に必要はない
– いつも通りのXMLHttpRequestの中で上手くやっ
てくれてるらしい

10. サンプル
if(window .XDomainRequest){
var xhr=newXDomainRequest();
}else{
var xhr=newXMLHttpRequest();
}
try{
xhr.onload=function(){
alert(xhr.responseT ext);};
xhr.open("GET" ,"http://hoge.c om/hoge.json");
xhr.send(null);
}c h(e){alert(e.message);}
atc

11. デモ
● pastak.cosmio.netからlocalhostへ通信
– 本当は逆でやりたかったのに500エラーが出て、上
手くいかなかったです ＞＜

12. jQueryでもやってみた
$.ajax({
type: "GET",
url: "http://hoge.com/hoge.json",
suc ess: function(xml){
c
$("#t").text(xml);
}
});

13. まとめ
● Javascriptでクロスドメイン通信が出来る
● クロスドメインでのアクセスはサーバサイド
（API提供側）が指定出来る
● 将来的にはsend()でテキストデータだけじゃな
くて、DOMとかバイナリデータも渡せるよう
になるらしい

14. 参考文献
● XMLHttpRequest Level 2
– http://www.w3.org/TR/XMLHttpRequest2/
– http://d.hatena.ne.jp/os0x/20090610/1244618814
– http://subtech.g.hatena.ne.jp/mala/20100222/1266
● Access-Control-Allow-Origin
– http://www.w3.org/TR/2008/WD-access-control-20
#access-control-allow-origin
– https://developer.mozilla.org/en/HTTP_access_cont

15. おしまい♪