PhoneGapアプリでjQuery(1.5以上)のクロスサイトなajax通信を有効にするには
アプリなのにクロスサイトという言い方はちょっとおかしいですけど、PhoneGapの場合は assets/www/ 以下にhtmlファイルを展開していますから、そのフォルダ内であれば same-origin な resource としてアクセス可能なわけです。DreamweaverCS5.5 で作る場合もまずはサイトを作成しないといけなくて、それが assets/www/ になっているわけですね。
で、アプリ内から Google などの APIを叩きたいのだけど、どうしたらいいのか。
普通に↓のようにして問題なくいければいいのですが、何故か動かない。
$.ajax({
type: "GET",
url: "http://foo.com/bar.html",
success: function(msg) {
alert("success");
}
});
なので、↓のようにしてerrorを調べてみると、errorThrown が "No Transport"って出てました。
$.ajax({
type: "GET",
url: "http://foo.com/bar.html",
success: function(msg) {
alert("success");
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(errorThrown); // "No Transport"
}
});
最初、エミュレータ自体が通信できてないのかなって思ってたけど、どうやらそうではなく、"No transport"で調べていたら、「Force jQuery 1.5 to always allow cross-site scripting」に辿り着きました。
jQuery.support.cors = true; // force cross-site scripting (as of jQuery 1.5)
ってことなので、jQuery1.5以上はこれを設定しておかないといけないです。
corsってCross-Origin Resource Sharing (CORS)なんですね。「cross-site xmlhttprequest with CORS」とかに書いてますが、XMLHttpRequest には withCredentialsってプロパティがある、と。知らなかった。。
記事にはSafari4とFirefox3.5って書いてますが、現在どの程度ブラウザに実装されてるのか...。また調べてみたいと思います。
