絶賛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: *");
上記設定はローカルあるいはクローズドのテスト環境で設定しています。
公開サーバーでの設定はまずいように思います。
ピンバック: 超個人的メモ, JavaScript関連の投稿リンクをまとめておく « イナヅマTVログ
ピンバック: [JavaScript]あれっ、IEはCross DomainだとXMLがとれない?とれない! « イナヅマTVログ