ID-Blogger

Ajax.RequestのresponseXMLでXMLが取得できない場合の対処法

世の中はお盆休み中ですが、この間に滞っていたAjaxごにょごにょプロジェクトを再始動。
なんかトライ&エラーのテストプログラムばかり大量量産してます...。

「Prototype」Ajax.Requestを使っていろんな外部WebサイトのサービスAPIからXMLデータを抜き出すテストをしていたのですが、早くも壁にぶち当たって頓挫いたしました。
Ajax.RequestでサービスAPIにアクセスしてXMLデータを貰って来るまでは良かったのですが、いざresponseXMLで表示するとデータがNull(空白)!!
初期テストの段階では問題なかったのに...。

という事でいろいろ調べたらやはり原因がありましたw


外部Webサイトとのクロスドメイン通信は出来ない

通常はXMLを読み込んだ後responseXMLでストレートに吐きだすと[object XMLDocument]という表示が出るはずです。
ではナゼ空欄になってしまうのか?
[JavaScript]responseXMLではまった / LiosK-free Blog
1. クロスドメイン通信はできない

これはXHRの基本的な制約。 api.hotpepper.jp以外のドメインからapi.hotpepper.jpのデータをXHRで取ってくることはできない。普通はここでつまづくことはないのだが、サーバーサイドとクライアントサイドで連携しつつ、複数のリクエストをあちこちに送信してると時々間違える。しかも、iframe や<script src="...">はクロスドメイン可能だから余計こんがらがって。

これを解決するには、一度自分のサーバーで外部ドメインのデータを取得して、改めて出力しなおす必要がある。


非同期通信を実現するXMLHttpRequestの仕様で外部Webサイトとのクロスドメイン通信は出来ないようですので、一旦PHPなんかを間にかませて自サーバからXMLを取得し直すしかないようです。

LiosK-free Blogさんの記事の通りに作業を進めていくと...おぉ!出来た♪
他にも重要な情報が多数掲載されておりましたので、参考にしながらスクリプトを組んでいくといいかと思います。

トラックバック(1)

Ajax上でのXMLデータの取り扱いについていろいろ調べていくと、どうも「JSONが軽量でいいよ」という話が多いようです。 前の「Ajax.Request... 続きを読む