やりたいこと

WebAPIを叩きたい。Yahoo! JAPAN 日本語形態素解析APIとか
RSSを読み込みたい。Yahoo!ニュース RSSとか
// 残念ながらYahoo!ニュースAPIは無い...

これを手っ取り早くAjaxでやりたい。
主にハッカソンとかハッカソンとかまずはアイディアを形にするのが大事なとき。

悲しいこと

こいつらXMLしか返さない。（RSSはそもそもそういうもんですが）
=> Same-Origin Policyでコケる

悲しい

回避してみた

日本語形態素解析API

コピペして、YOUR_APP_IDを書き換えてブラウザに放り投げるとこんな感じ。

とれた！

Yahoo!ニュース RSS

RSSの中からトピックスを選んでURL差し替え

diff --git a/call_webapi_which_return_xml_with_ajax.html b/call_webapi_which_return_xml_with_ajax.html
index 822831e..af8c10b 100644
--- a/call_webapi_which_return_xml_with_ajax.html
+++ b/call_webapi_which_return_xml_with_ajax.html
@@ -20,14 +20,7 @@
        $.ajax({
          // [NOTE] 使いたいAPIのURI, ここではYahoo! JAPAN 形態素解析API
          // http://developer.yahoo.co.jp/webapi/jlp/ma/v1/parse.html
-         url: 'http://jlp.yahooapis.jp/MAService/V1/parse',
-         data: {
-           // [NOTE] APIに渡したいパラメータ
-           // APPIDはhttps://e.developer.yahoo.co.jp/dashboard/ から取得
-           "appid": "<YOUR_APP_ID>",
-           "results": "ma,uniq",
-           "sentence": "庭には二羽ニワトリがいる。"
-         },         
+         url: 'http://news.yahoo.co.jp/pickup/rss.xml',
          type: 'GET',
          dataType: "xml",
          cache: false, // キャッシュOFF

とれた！

使ったもの

jQuery
jquery.xdomainajax.js
jquery.xml2json.js（XMLをJSONに変換しないなら不要）

補足

Q. どうやってるの
YQLというWebリソースをSQLライクに取得できるプラットフォームがありバックエンドを経由する形になるのでSame-Origin Policy関係なくなる。
jquery.xdomainajax.jsがjQueryのajaxメソッドをYQL経由になるようラップしてくれている

jsonだったりgetメソッド以外だったりするとラップしないajaxメソッドが呼ばれるよう
jquery.xdomainajax.js#L29

Q. なんでjQuery?
最初にこの問題に直面していたコードがjQuery使ってたから。
YQLのエントリポイントにURLを投げれば良いので自前実装も十分可能。

Q. gistのはライブラリ？
ライブラリではない。ほぼ、「jquery.xdomainajax.jsを使ってみた」。

Q. 別のAPIでも使えるか
urlとdataを書き換えれば何でも使えるはず。少なくともgetメソッドなら。

Q. CORSとかいうやつ
サーバサイドが対応してないとダメだし、そもそもそういうの考えたくない時用。

まとめ

YQLをラップしたjquery.xdomainajax.jsでSame-Origin Policy問題を回避してみた。
まじめに作るサービスで使えるかはともかく、まずは動かしたいって時には役立つんじゃないかと。

AjaxでSame-Origin Policyを越えてXMLなWebAPIやRSSの情報を取得する