ウェブサービスAPI を利用したウェブアプリケーションを開発する上で、 例えば Ajax(JavaScript)を使用してレスポンスXMLを取得しようとする場合、 同じドメイン内から自サイト内のファイルを取得する分には問題ありませんが、 別サーバーにあるファイルを取得しようとする場合は、 クロスドメインの問題によりアクセスできないようになっています。
○ Ajax(ドメインA) ───→ ウェブアプリケーションAPI (ドメインA)
× Ajax(ドメインA) ───→ ウェブアプリケーションAPI (ドメインB)
この場合、クロスドメイン問題を回避して、レスポンスXMLの取得とAjaxへのデータ受け渡しをアシストしてくれるような別の仕組み(CGI やPHP等)が必要になってきます。
○ Ajax(ドメインA) ───[CGI/PHP]──→ ウェブアプリケーションAPI (ドメインB)
そのための簡単なPHPをご紹介します。
以下のソースをコピーして、「load.php」と言うファイル名で保存してください。(ファイル名は自由です)
たったこれだけでOKです。
CGI だともう少し長いソースになったり、実行にはパーミッションの設定が必要になりますが、
PHPならサーバーへ放り込むだけで済むので、とても管理が楽になります。(もちろんPHP対応のサーバーが必要)
あとは、AjaxからウェブサービスAPI へリクエストする際に、このPHPを介すだけで取得が可能になります。
(load.php は Ajax を実行する側のサーバーに設置してください)
× Ajax ──[取得不可]─→ http://API のURL/
○ Ajax ──[取得成功]─→ load.php?url=http://API のURL/
以上、参考になれば幸いです。
関数 getXML へ リクエスト URL を渡してレスポンス XML を取得するサンプル Ajax です。
(このサンプルではタイムアウトを5秒に設定してあります)
- getXML('http://api.anomura.1023world.net/'); * 5秒後にタイムアウト (エラー)
- getXML('load.php?url=http://api.anomura.1023world.net/');
レスポンス取得後の XML のパーサー部分のスクリプトの記述は割愛します。自由に行ってください。
ちなみに「クロスドメインPHPを使ったAjaxサンプル」と書いておきながら、ここではクロスドメインによる実験結果を見せるために、
敢えてスクリプト自体にはload.phpを介す処理を含めていません(引数自体に含めて関数へ渡してます)。
なので、実際にこのサンプルソースを流用する際には、スクリプト内にPHPパスも含めてしまうと良いでしょう。
また、当サイトのウェブアプリケーションサンプル JavaScript も、参考になれば幸いです。
api-anomura.js / 超ヤドカリ図鑑 Ajax
api-shop.js / ショップ新着案内 Ajax