クロスドメインへのアクセスが回避できるXMLHttpRequest2

最近クロスドメインの記事を書きました。
jQueryでクロスドメインのjson取得(JSONP)

が、もっと良い手がありました。

HTTP access control – MDN
404 Blog Not Found:Ajax – Goodbye, JSONP. Hello, Access-Control-Allow-Origin

小飼弾さんの記事を見ると2年前ですね。知らなかった。

XMLHttpRequest2(XHR2)ではサーバー側がAccess-Control-Allow-Originヘッダーを設定していればクロスドメインの制限を回避できるようです。

<html>
<head>
<title>XHR2/jquery test</title>
</head>
<body>
<input type="text" id="zip" style="width:100px;" value="2210824">
<input type="button" id="run" value="test">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {

var api = 'http://api.aoikujira.com/zip/json/';

$('#run').click(function (){
    var zip = $('#zip').val();
    var url = api + zip;
    $.getJSON(url).then(
        function (json){
            alert(json.address);
        },
        function (){
            alert('error dayo');
        }
    );
});

})(jQuery);
</script>
</body>
</html>

これで自分で提供するAPIならクロスドメインも気にしなくてよさそうです。
各apiはcallbackを用意するよりAccess-Control-Allow-Originヘッダーを指定した方が助かりますね。

これでめでたしめでたしと思ったらブラウザ毎に挙動の違いがあるみたいです。
XMLHttpRequest level2に対応しているブラウザまとめ at HouseTect, JavaScriptな情報をあなたに
IE7が未対応なのは痛い。実サービスだと厳しいかもしれません。

一応自分のブラウザでも試してみました。
○ chrome 17.0.963.56
○ Firefox 10.0.2
× IE 8.0.7601.17514
あ、IE8でもダメだ。途中で変わったのか、私のIEだけなのかはわからないところ。う～

利用API
クジラ　郵便番号　API

クロスドメインへのアクセスが回避できるXMLHttpRequest2

2件のコメント

コメントを残す