Help us understand the problem. What is going on with this article?

Local環境のXMLファイルからJavascriptを使って情報を取得する方法

はじめに

Local環境にてXMLファイルからJavascriptを使って情報を取得する方法について自分なりにプログラムを作成してみたのでまとめました。
ニッチな内容でほとんどの人に役に立たないことかもしれませんが、ハードを使う事業をしている人にとっては割と役に立つのではないかと思います。
困っている方がいればその人に役立てばなと思っています。

関連リンク

Local環境で色々なことをする関連リンクを下記に載せておくので、参考にしてください。。
こちらもニッチではありますが、なかなかおもしろいです。

やりたいこと

ブラウザにてHTMLファイル(get_local_xml.html)に埋め込んだJavascriptを動かして、ローカル上にあるXMLファイル(config.xml)から情報を取得したい。

XMLHttpRequestではなぜダメなのか。

XMLHttpRequestでコードを書いてみたのですが、下記リンク先の通りセキュリティでエラーが出てしまいました。。

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.js
// 上記のリンクからここにコピーする。
// ローカル環境のみで完結させたいため、リンク先を参照する訳ではなくコードを丸々コピーする。

まとめ

ブラウザはローカル環境にて使用されることを想定していないと思いますので、使用する際は必ず検証を行なった上で使ってみてください。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした