XML Http Request Level2 の噂を聞いたので調べてみた

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

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

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

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

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

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

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

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

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

サンプル 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

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

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

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

参考文献 ● 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

おしまい♪

XML Http Request Level2 の噂を聞いたので調べてみた

by Shoot Morii

Accessibility

Upload Details

Usage Rights

2 Embeds 34

Statistics

XML Http Request Level2 の噂を聞いたので調べてみた Presentation Transcript

http://www.slideshare.net	33
http://webcache.googleusercontent.com	1