Download - XML Http Request Level2 の噂を聞いたので調べてみた
![Page 2: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/2.jpg)
自己紹介● 「Pasta-K」で検索!!
![Page 3: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/3.jpg)
昨日@ビックカメラ● たまたま目についた本の目次の中に
XMLHttpReques Level2というのがあったから調べてみました
● 一夜で調べたので、 間違ってたら 優しく教えてください● 調べたことを偉そうに喋ります
– 知ったかぶりです
![Page 4: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/4.jpg)
XMLHttpRequest Level2● XMLHttpRequestのクロスドメイン対応版● 今までのXMLHttpRequestと同じ感じで使える● W3C Working Draft 20 August 2009● 最新のブラウザーだと大体動きます
![Page 5: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/5.jpg)
ブラウザー対応状況● 対応済み
● 条件付きで対応
● 非対応
![Page 6: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/6.jpg)
Google Chrome, Firefox, Safari● それぞれ最新版は対応済み● XMLHttpRequest
![Page 7: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/7.jpg)
Internet Explorer 8● IE6 ,IE7では非対応● XDomainRequest
– IE8独自
![Page 8: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/8.jpg)
Opera● 最新版(v10.52)でも非対応
![Page 9: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/9.jpg)
クロスドメインの実装● サーバーサイドで.htaccessを用いてHeader append Access-Control-Allow-Origin: を指定する。
– 許可するorigin : URL– ワイルドカード : *
● クライアントサイドは特に必要はない– いつも通りのXMLHttpRequestの中で上手くやっ
てくれてるらしい
![Page 10: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/10.jpg)
サンプルif(window.XDomainRequest){
var xhr=new XDomainRequest();}else{
var xhr=new XMLHttpRequest();}try{
xhr.onload=function(){alert(xhr.responseText);};
xhr.open("GET","http://hoge.com/hoge.json");xhr.send(null);
}catch(e){alert(e.message);}
![Page 11: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/11.jpg)
デモ● pastak.cosmio.netからlocalhostへ通信
– 本当は逆でやりたかったのに500エラーが出て、上手くいかなかったです ><
![Page 12: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/12.jpg)
jQueryでもやってみた$.ajax({ type: "GET", url: "http://hoge.com/hoge.json", success: function(xml){ $("#t").text(xml); }});
![Page 13: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/13.jpg)
まとめ● Javascriptでクロスドメイン通信が出来る● クロスドメインでのアクセスはサーバサイド
(API提供側)が指定出来る● 将来的にはsend()でテキストデータだけじゃな
くて、DOMとかバイナリデータも渡せるようになるらしい
![Page 14: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/14.jpg)
参考文献● 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/1266845737
● Access-Control-Allow-Origin– http://www.w3.org/TR/2008/WD-access-control-20080912/ #access-control-allow-origin– https://developer.mozilla.org/en/HTTP_access_control #Access-Control-Allow-Origin
![Page 15: XML Http Request Level2 の噂を聞いたので調べてみた](https://reader034.vdocuments.pub/reader034/viewer/2022051209/5495c5dab479596f4d8b4db2/html5/thumbnails/15.jpg)
おしまい♪