イナヅマTVログ

Ajax, jQueryでXMLをParseそしてAccess-Control-Allow-Originについて

| 2件のコメント

絶賛JavaScriptカキカキしてます。

AjaxでXMLを取得してパース処理をJavaScriptでの巻。
みんな大好きjQueryさんの登場です。

AjaxといってもJSONでデータ取得することが多くXMLよりはるかに簡単にデータを展開可能なところが魅力です。
とは言ってもこちらの希望ばかりで世の中が回る訳でもなくAjax本来のXMLをパースしてみます。

さて、ローカルにXML吐き出しようのダミーサーバーとダミーXMLをおき取得の準備を整えました。
XML吐き出しサーバーとJavaScriptで取得するファイルを置いているドメインを変えています。

Access-Control-Allow-Origin

Chromeでテストしています。
取得まではなんの問題もないだろうと思ったら…

XMLHttpRequest cannot load…Access-Control-Allow-Origin とエラーになってしまいます。
取得は同一ドメインじゃないとダメよなエラーらしいです。
セキュリティ サンドボックス的なことなのでしょうか。
ですよね〜、勝手に他ドメインのデータをこっそり取ってきて使ったりしたら問題ありあり過ぎます。

XML出力側が大丈夫だよな感じのヘッダーを追加すると解決できます。
PHP

header("Access-Control-Allow-Origin: *");
// この後でXML出力

jQueryでXMLをParse: parseXML

jQueryにはparseXMLというステキ関数が用意されています。
jQuery.parseXML()

var xmlDoc, $xml;
 
try {
    xmlDoc = $.parseXML(xml);
} catch (error) {
    throw new Error(error);
}
$xml = $(xmlDoc);

たったこれだけでXML取得の準備が整いました。
あとはDOMElementと同じように処理できます。

タグの取得は
$xml.find('exmpleTagName');

タグに挟まれているデータの取り出しは
$xml.find('exmpleTagName').text();

属性(attribute)のデータ取り出しは
$xml.find('exmpleTagName').attr('exampleAttr');

jQueryさんのおかげですね〜、とっても簡単!

update
IE だと Access-Control-Allow-Origin を追加しても取得できないことがあるようです。
[JavaScript]あれっ、IEはCross DomainだとXMLがとれない?とれない!

update
header("Access-Control-Allow-Origin: *");
上記設定はローカルあるいはクローズドのテスト環境で設定しています。
公開サーバーでの設定はまずいように思います。

2件のコメント

  1. ピンバック: 超個人的メモ, JavaScript関連の投稿リンクをまとめておく « イナヅマTVログ

  2. ピンバック: [JavaScript]あれっ、IEはCross DomainだとXMLがとれない?とれない! « イナヅマTVログ

コメントを残す

必須欄は * がついています