xml http request level2 の噂を聞いたので調べてみた

15
XML Http Request Level2 の噂を聞いたので調べてみた Pasta-K / Shuto Morii [email protected] 2010.04.29.Thu Kanasan.JS

Upload: shoot-morii

Post on 18-Dec-2014

5.997 views

Category:

Documents


6 download

DESCRIPTION

 

TRANSCRIPT

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

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

Pasta-K / Shuto [email protected]

2010.04.29.ThuKanasan.JS

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

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

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

昨日@ビックカメラ● たまたま目についた本の目次の中に

XMLHttpReques Level2というのがあったから調べてみました

● 一夜で調べたので、 間違ってたら 優しく教えてください● 調べたことを偉そうに喋ります

– 知ったかぶりです

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

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

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

ブラウザー対応状況● 対応済み

● 条件付きで対応

● 非対応

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

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

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

Internet Explorer 8● IE6 ,IE7では非対応● XDomainRequest

– IE8独自

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

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

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

クロスドメインの実装● サーバーサイドで.htaccessを用いてHeader append Access-Control-Allow-Origin: を指定する。

– 許可するorigin : URL– ワイルドカード : *

● クライアントサイドは特に必要はない– いつも通りのXMLHttpRequestの中で上手くやっ

てくれてるらしい

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

サンプル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 の噂を聞いたので調べてみた

デモ● pastak.cosmio.netからlocalhostへ通信

– 本当は逆でやりたかったのに500エラーが出て、上手くいかなかったです ><

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

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

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

まとめ● Javascriptでクロスドメイン通信が出来る● クロスドメインでのアクセスはサーバサイド

(API提供側)が指定出来る● 将来的にはsend()でテキストデータだけじゃな

くて、DOMとかバイナリデータも渡せるようになるらしい

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

参考文献● 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 の噂を聞いたので調べてみた

おしまい♪