Ajax クロスドメイン with jQuery
jQuery で Ajax を行うのにあたり、同一ドメインにアクセスする際には問題ないけど、違うドメインにアクセスしようとする場合、何らかの対応が必要になります。
対応方法が３つあるので、簡単にまとめておきます。
ベース実装
まず、今回のエントリのベース実装はこんな感じです。
<html> <head> <script src="jquery-2.0.3.min.js"></script> <script> $.ajax({ url: 'http://www.ekidata.jp/api/l/11302.json', type: "GET", success: function(res) { console.log(res); } }); </script> </head> <body> </body> </html>
これをローカルに任意の名前で保存し（jQuery のダウンロードも忘れずに）、おもむろにダブルクリックすると、以下の様なエラーログがコンソールに表示されます。
XMLHttpRequest cannot load http://www.ekidata.jp/api/l/11302.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
以下はこれを解決しなければいけません、という話です。
ちなみに www.ekidata.jp は、登録不要で駅データが取得できる Web API を提供しているクールなサービスです*1。今回のサンプルは山手線沿線の駅名と位置情報が取得できます。
1. 'Access-Control-Allow-Origin' ヘッダを付与
エラーログに 'Access-Control-Allow-Origin' がありません、という内容が表示されている通り、レスポンスヘッダに Access-Control-Allow-Origin ヘッダがあればクロスドメイン Ajax が可能になります。
API を提供するサーバ側を修正しなければならないため、今回の「駅データ.jp」のような他社のサービスを利用する場合はこの方法は適用できません。
2. JSONP で行う
クライアント側は jQuery で JSONP を使用するように修正します。
$.ajax({ url: 'http://www.ekidata.jp/api/l/11302.json', dataType: 'jsonp', // 追加 type: "GET", success: function(res) { console.log(res); } });
ただし、これも API 提供側が JSONP に対応している必要があります。JSONP はサーバとクライアントでコールバックインターフェイスを取り決めておく必要があるのですが、jQuery の場合は 'callback' というパラメータでコールバック関数を渡すため、特に jQuery に対応する場合はこの仕様に従う必要があります。
同様に「駅データ.jp」ではこの方法は利用できません。
3. jquery.xdomainajax.js を利用する
jquery.xdomainajax.js という jQuery プラグインを用いることで、普通に ajax で他ドメインにアクセスできるようになります。
<html> <head> <script src="jquery-2.0.3.min.js"></script> <script src="jquery.xdomainajax.js"></script> <!-- 追加 --> <script> $.ajax({ url: 'http://www.ekidata.jp/api/l/11302.json', type: "GET", success: function(res) { console.log(res); } }); </script> </head> <body> </body> </html>
これで取得できたデータを見てみます。
{responseText: "<html> <head> <meta content="HTML Tidy for Java (vers. 26 Sep 2004), see www.w3.org" name="generator"/> <title/> </head> <body> <p>if(typeof(xml)=='undefined') xml = {}; xml.data = {"line_cd":11302,"line_name":"JR山手線","line_lon":139.73522275686264,"line_lat":35.69302730762992,"line_zoom":12,"station_l":[{"station_cd":1130201,"station_g_cd":1130201,"station_name":"大崎","lon":139.728439,"lat":35.619772},{"station_cd":1130202,"station_g_cd":1130202,"station_name":"五反田","lon":139.723822,"lat":35.625974},{"station_cd":1130203,"station_g_cd":1130203,"station_name":"目黒","lon":139.715775,"lat":35.633923},{"station_cd":1130204,"station_g_cd":1130204,"station_name":"恵比寿","lon":139.71007,"lat":35.646685},{"station_cd":1130205,"station_g_cd":1130205,"station_name":"渋谷","lon":139.701238,"lat":35.658871},{"station_cd":1130206,"station_g_cd":1130206,"station_name":"原宿","lon":139.702592,"lat":35.670646},{"station_cd":1130207,"station_g_cd":1130207,"station_name":"代々木","lon":139.702042,"lat":35.683061},{"station_cd":1130208,"station_g_cd":1130208,"station_name":"新宿","lon":139.700464,"lat":35.689729},{"station_cd":1130209,"station_g_cd":1130209,"station_name":"新大久保","lon":139.700261,"lat":35.700875},{"station_cd":1130210,"station_g_cd":1130210,"station_name":"高田馬場","lon":139.703715,"lat":35.712677},{"station_cd":1130211,"station_g_cd":1130211,"station_name":"目白","lon":139.706228,"lat":35.720476},{"station_cd":1130212,"station_g_cd":1130212,"station_name":"池袋","lon":139.711086,"lat":35.730256},{"station_cd":1130213,"station_g_cd":1130213,"station_name":"大塚","lon":139.728584,"lat":35.731412},{"station_cd":1130214,"station_g_cd":1130214,"station_name":"巣鴨","lon":139.739303,"lat":35.733445},{"station_cd":1130215,"station_g_cd":1130215,"station_name":"駒込","lon":139.748053,"lat":35.736825},{"station_cd":1130216,"station_g_cd":1130216,"station_name":"田端","lon":139.761229,"lat":35.737781},{"station_cd":1130217,"station_g_cd":1130217,"station_name":"西日暮里","lon":139.766857,"lat":35.731954},{"station_cd":1130218,"station_g_cd":1130218,"station_name":"日暮里","lon":139.771287,"lat":35.727908},{"station_cd":1130219,"station_g_cd":1130219,"station_name":"鶯谷","lon":139.778015,"lat":35.721484},{"station_cd":1130220,"station_g_cd":1130220,"station_name":"上野","lon":139.777043,"lat":35.71379},{"station_cd":1130221,"station_g_cd":1130221,"station_name":"御徒町","lon":139.774727,"lat":35.707282},{"station_cd":1130222,"station_g_cd":1130222,"station_name":"秋葉原","lon":139.773288,"lat":35.698619},{"station_cd":1130223,"station_g_cd":1130223,"station_name":"神田","lon":139.770641,"lat":35.691173},{"station_cd":1130224,"station_g_cd":1130101,"station_name":"東京","lon":139.766103,"lat":35.681391},{"station_cd":1130225,"station_g_cd":1130225,"station_name":"有楽町","lon":139.763806,"lat":35.675441},{"station_cd":1130226,"station_g_cd":1130102,"station_name":"新橋","lon":139.758587,"lat":35.666195},{"station_cd":1130227,"station_g_cd":1130227,"station_name":"浜松町","lon":139.757135,"lat":35.655391},{"station_cd":1130228,"station_g_cd":1130228,"station_name":"田町","lon":139.747575,"lat":35.645736},{"station_cd":1130229,"station_g_cd":1130103,"station_name":"品川","lon":139.738999,"lat":35.62876}]} if(typeof(xml.onload)=='function') xml.onload(xml.data);</p> </body></html>"}
ということで、取れていることは取れているのですが、なんだか余分な HTML 内にデータがくるまってしまっています*2。ひとつしかない P タグ内である、ということがわかっているので parseXML に通してしまえば良いだけですが、仕様変更が少し怖いですね。
それにしても jquery.xdomainajax.js がどんな仕組みで本来できないはずの Ajax クロスドメインアクセスを実現しているのか、スクリプトを覗いてみました。
Yahoo API を使用して一旦 Yahoo にアクセスさせ、JSONP で結果を取り出しているようだ。世界中のウェブサービスでこのプラグインが使用されたら Yahoo はパンクするんじゃないのかと心配になってしまう。
*1:クールと言いつつダメ出しすると、このサービスで取得するデータは JSON ではなく JavaScript な点、その JavaScript がグローバル領域を汚染してしまう点が残念です
