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

                 ...
自己紹介
●   「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
    –   ワイ...
サンプル
if(window  .XDomainRequest){
   var xhr=newXDomainRequest();
}else{
   var xhr=newXMLHttpRequest();
}
try{
   xhr.onl...
デモ
●   pastak.cosmio.netからlocalhostへ通信
    –   本当は逆でやりたかったのに500エラーが出て、上
        手くいかなかったです ><
jQueryでもやってみた
$.ajax({
  type: "GET",
  url: "http://hoge.com/hoge.json",
  suc ess: function(xml){
     c
      $("#t").t...
まとめ
●   Javascriptでクロスドメイン通信が出来る
●   クロスドメインでのアクセスはサーバサイド
    (API提供側)が指定出来る
●   将来的にはsend()でテキストデータだけじゃな
    くて、DOMとかバイナリ...
参考文献
●   XMLHttpRequest Level 2
    –   http://www.w3.org/TR/XMLHttpRequest2/
    –   http://d.hatena.ne.jp/os0x/20090610/...
おしまい♪
Upcoming SlideShare
Loading in...5
×

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

6,335
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,335
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. XML Http Request Level2 の噂を聞いたので調べてみた Pasta-K / Shuto Morii pasta0915@gmail.com 2010.04.29.Thu Kanasan.JS
  2. 2. 自己紹介 ● 「Pasta-K」で検索!!
  3. 3. 昨日@ビックカメラ ● たまたま目についた本の目次の中に XMLHttpReques Level2というのがあったか ら調べてみました ● 一夜で調べたので、  間違ってたら  優しく教えてください ● 調べたことを偉そうに喋ります – 知ったかぶりです
  4. 4. XMLHttpRequest Level2 ● XMLHttpRequestのクロスドメイン対応版 ● 今までのXMLHttpRequestと同じ感じで使える ● W3C Working Draft 20 August 2009 ● 最新のブラウザーだと大体動きます
  5. 5. ブラウザー対応状況 ● 対応済み ● 条件付きで対応 ● 非対応
  6. 6. Google Chrome, Firefox, Safari ● それぞれ最新版は対応済み ● XMLHttpRequest
  7. 7. Internet Explorer 8 ● IE6 ,IE7では非対応 ● XDomainRequest – IE8独自
  8. 8. Opera ● 最新版(v10.52)でも非対応
  9. 9. クロスドメインの実装 ● サーバーサイドで.htaccessを用いて Header append Access-Control-Allow-Origin: を指定する。 – 許可するorigin : URL – ワイルドカード : * ● クライアントサイドは特に必要はない – いつも通りのXMLHttpRequestの中で上手くやっ てくれてるらしい
  10. 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. 11. デモ ● pastak.cosmio.netからlocalhostへ通信 – 本当は逆でやりたかったのに500エラーが出て、上 手くいかなかったです ><
  12. 12. jQueryでもやってみた $.ajax({ type: "GET", url: "http://hoge.com/hoge.json", suc ess: function(xml){ c $("#t").text(xml); } });
  13. 13. まとめ ● Javascriptでクロスドメイン通信が出来る ● クロスドメインでのアクセスはサーバサイド (API提供側)が指定出来る ● 将来的にはsend()でテキストデータだけじゃな くて、DOMとかバイナリデータも渡せるよう になるらしい
  14. 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. 15. おしまい♪
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×