« ◆ドメインはないでしょう、域にしましょう | トップページ | ◆jQueryを使ってみる:クロスフェード画像切り替えなど »

Javascriptで外部ファイルを読み込む、Jsonを読み込む

メモです。

 Javascriptでファイル読み込み(Ajax/XMLHttpRequest使用)

Ajaxでのサーバとの通信オブジェクトXMLHttpRequestを使ってファイルを読み込みます。


上部分の記述は次のようになっています。

<!--<html><head></head><body>-->
<script type="text/javascript">
function loadFile(fileName){
   httpObj = new XMLHttpRequest();
   httpObj.open('GET',fileName+"?"+(new Date()).getTime(),true);
   httpObj.send(null);
   httpObj.onreadystatechange = function(){
      if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){
         document.getElementById("text1").value=httpObj.responseText;
         }
      }
   }
</script>
<input type="text" id="text1" style="width:30em" /><br>
<input type="button" value="ファイル読み込み" 
       onClick="loadFile('../../../data/sample.txt')" />&emsp;
<input type="button" value="クリア" 
       onClick="document.getElementById('text1').value='';" />
<!--</body></html>-->

data/sample.txtには「本日は晴天なり。ただいまファイル読み込み試験中」という 文字がUTF-8で入っています。

次の制限があります。

  • IE6では動作しません。 IE6以前のブラウザでの手法は確立されており、 XMLHttpRequest IE4で検索すれば情報は得られます
  • HTTPサーバを介してしか読めません。例えば<script>や<img>のsrcのような 形でローカルhtmlから読み込むことはできません。
    ActiveXでローカル・ファイルを読むことはできます が、こんどはサーバhtmlで読んでもローカルファイルしか読めません。
    まったく、なんちゅうシステムじゃ。
  • onreadystatechangeには本来無名関数ではなく、別定義された関数 を設定できるはずですが、IE7では 「実装されていません」というエラーになり不安定な 動作をします。

補足説明をしておきます。

  • XMLHttpRequestが出すGETは通常のGETと何ら変わるものでは有りませんので、 ファイル取得の場合、サーバー側にサーブレットやCGIなどの特別な仕組み を組む必要はありません。
  • var宣言しない変数はグローバル変数となります。そのため、loadFile()関数内で設定したhttpObjeを stateChanged()関数内で参照できます。
  • XMLHttpRequest.open('GET')でファイルを読み込む場合、キャッシュを避ける ため通常後ろにダミーのクエリー文字を付加します。
  • XMLHttpRequest.open()は要求の設定であり、send()で要求が出ます
  • XMLHttpRequest.onreadystatechangeにイベント処理関数を設定すれば、状態が 変わるときに呼び出されます。ただしブラウザ自体はマルチスレッド動作をしていない ことには十分すぎるほどの注意を払う必要があります。

 Javascriptでjsonファイル読み込み(Ajax/XMLHttpRequest使用)

json記述ファイルを読み込んでobjectを生成します。生成したobjectから再びjson文字を 得、alert出力しています。


上部分の記述は次のようになっています。

<!--<html><head></head><body>-->
<script type="text/javascript" src="../../../js/json2.js"></script>
<script type="text/javascript">
function loadFile2(fileName){
   httpObj = new XMLHttpRequest();
   httpObj.open('GET',fileName,true);
   httpObj.send(null);
   httpObj.onreadystatechange = function(){
      if( ( httpObj.readyState == 4) && (httpObj.status == 200)){
         document.getElementById("text2").value=httpObj.responseText;
         var data= JSON.parse(httpObj.responseText);
         alert(JSON.stringify(data,null,'   '));
         document.getElementById("text2").value="";
         }
      }
   }
</script>
<input type="text" id="text2" style="width:30em"/><br>
<input type="button" value="jsonファイル読み込み"
       onClick="loadFile2('../../../data/json.jsn')" />
<!--</body></html>-->

読み込んでいるJSON文字列は次のものです。

[{"NAME":"a","name_list":["b","c","d"]},{"NAME":"e","name_list":["f"]}]

この例ではJSONのパーズ、オブジェクトのJSON化のためにjson2.jsを用いています。json2.jsは www.json.orgのJavascript/json2.jsからダウンロードできます。
json2.jsは17.0KB程の小さなものです(2010/6/23現在)。 json2.jsの先頭にはalertが入っていますので、コメントアウトする必要があります。

入力のJSON文字列はexec(httpObj.responseText)でデータ化することも可能ですが、 exec()はプログラムを動作させてしまう可能性があるので、JSON.parse()の方が 安全です。JSON.parse()はデータのデコードのみを行います。

JSON.stringify()の3番目の引数はインデント文字であり、ここでは3文字の空白を 指定しています。右のようなalertが出力されます。省略するとインデントは 付きません。

ファイル名が固定でかつ記述に手を入れることが可能なら、json記述の前に javascriptのvar定義部を追加して<script type="text/javascript" src="...">で読む方法も 現実的なやり方です。

var data=[{"NAME":"a","name_list":["b","c","d"]},
          {"NAME":"e","name_list":["f"]}];
この形であればデータ読み込みというより予めプログラムにデータ内容が 組み込まれているようなものなので煩わしさがありません。

 Javascriptでローカル・ファイル読み込み(ActiveX使用:参考)

IEでActiveXを用いればローカルファイルを読み込むことができます。ただし、 起動したHTMLがサーバ上にあっても読み込むファイルはブラウザが動いているローカル のファイルです。
動作の確認は行ってありますが、ActiveXでローカルファイルにアクセスする コードをブログに組むのはちょっと考えものなので、コードを示すだけにします。 指定ローカルファイルの内容を最大5行読んでalertに表示するページ記述と なっています。

<html><head></head><body>
<script type="text/javascript">
function readFile(fileName,maxline){
   var iomode=1; // 1:読み込み、2:書き出し、8:追加書き込み
   var create=false;
   var fso   =new ActiveXObject("Scripting.FileSystemObject");
   var file  =fso.OpenTextFile(fileName,iomode,create);
   var text="";
   var n=0;
   while( !file.AtEndOfStream ){
      if( ++n>maxline ) break;
      text += file.ReadLine()+"\n";
      }
   file.Close();
   return text;
   }
function loadFile(){
   alert(readFile(document.getElementById('fileName').value,5));
   }
</script>
入力ファイル名:<input type="text" id="fileName" style="width:30em"
                 value="C:/sample.txt" /><br>
<input type="button" value="ファイル読み込み" onClick="loadFile()" />
</body></html>
この例ではファイルは"C:/sample.txt"としています(操作による変更可)。 ファイルの位置はHTMLの位置とは全く関係が無いことに注意してください。 カレント位置はどうやらディスクトップになるようですが、正確な仕様 は分かりません。 Active-Xはマイクロソフトの製品なので そもそも仕様という概念はありません。たまたま どう動くものかというだけです。

 ###

本当はonClickは苦手でonMouseDownにしたいんだけど、世間の皆は 僕のように不器用ではないようなので、ここではonClickにしました。 でも、クリック(ボタンを押すことではなくボタンを離すこと)はどうしても 慣れることができない。。。

|

« ◆ドメインはないでしょう、域にしましょう | トップページ | ◆jQueryを使ってみる:クロスフェード画像切り替えなど »

トラックバック


この記事へのトラックバック一覧です: Javascriptで外部ファイルを読み込む、Jsonを読み込む:

« ◆ドメインはないでしょう、域にしましょう | トップページ | ◆jQueryを使ってみる:クロスフェード画像切り替えなど »