はじめに
Local環境にてXMLファイルからJavascriptを使って情報を取得する方法について自分なりにプログラムを作成してみたのでまとめました。
ニッチな内容でほとんどの人に役に立たないことかもしれませんが、ハードを使う事業をしている人にとっては割と役に立つのではないかと思います。
困っている方がいればその人に役立てばなと思っています。
関連リンク
Local環境で色々なことをする関連リンクを下記に載せておくので、参考にしてください。。
こちらもニッチではありますが、なかなかおもしろいです。
- Local上にて複数のHTMLコンテンツのデータを共有する方法（Store.js）
- Local環境でのCookie / WebStorage 挙動
- WebStorage と Cookie の違い
やりたいこと
ブラウザにてHTMLファイル（get_local_xml.html）に埋め込んだJavascriptを動かして、ローカル上にあるXMLファイル（config.xml）から情報を取得したい。
XMLHttpRequestではなぜダメなのか。
XMLHttpRequestでコードを書いてみたのですが、下記リンク先の通りセキュリティでエラーが出てしまいました。。
- javascriptでxmlファイルを読み込ませようと、IEでエラーになる
- [IE9でのJavascript] window.XMLHttpRequestを使用したローカルファイル読み込みについて
ActiveXObjectを使えばローカル上のファイルからも情報を取得できる。
- ActiveXObject オブジェクト
コード実装
get_local_xml.html に埋め込んだ Javascript を動かして、 config.xml の informationタグの1つ目の value の値を取得する。
- ポイント
- jQuery 1.9.1 をローカルから参照する。（jQuery 3系では動かない）
- 外部ファイルの内容を text データで出力されるので、XMLに変換して取得したい情報をとる。
config.xml
<?xml version="1.0" encoding="Shift_JIS"?>
<configuration>
<!-- 下の "1" という値を取得したい -->
<information value="1"/>
<information value="2"/>
<information value="3"/>
<information value="4"/>
<information value="5"/>
</configuration>
get_local_xml.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>get_local_xml</title>
</head>
<body>
<!-- jquery 読み込み (3系だと使用できない) -->
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
// Microsoft.XMLHTTP が使えない場合は XMLHttpRequest
$.ajaxSetup({
xhr: function() {
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { return new XMLHttpRequest(); }
}
});
// 外部ファイルのパス、参照したいファイル先に書き換える
var config_path = 'config.xml';
$.ajax(config_path, {
complete: function(e){
// 外部ファイルの内容を text データで出力
var data = e.responseText;
// text -> xml 変換
var dom_parser = new DOMParser();
var document_obj = dom_parser.parseFromString(data, "text/xml");
// xml から information を抽出
// ご自身が使う xml の内容に合わせて、コードを変更してください。
console.log(document_obj.documentElement.getElementsByTagName("information")[0].getAttribute("value"));
}
});
</script>
</body>
</html>
ローカル環境のみで完結させたいため、下記リンク先を参照する訳ではなくコードを丸々コピーする。
ちなみにこの方法だと、jQuery 3系だと動かないため注意。
- jQuery 1.9.1
jquery-1.9.1.js
// 上記のリンクからここにコピーする。
// ローカル環境のみで完結させたいため、リンク先を参照する訳ではなくコードを丸々コピーする。
まとめ
ブラウザはローカル環境にて使用されることを想定していないと思いますので、使用する際は必ず検証を行なった上で使ってみてください。
参考
- ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法
- [その他] ChromeにてAjaxでローカルファイルにアクセス
- DOMParser について