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')" />  <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番目の引数はインデント文字であり、ここでは３文字の空白を
指定しています。右のような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でローカルファイルにアクセスする
コードをブログに組むのはちょっと考えものなので、コードを示すだけにします。
指定ローカルファイルの内容を最大５行読んで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にしました。 でも、クリック（ボタンを押すことではなくボタンを離すこと）はどうしても 慣れることができない。。。
| 固定リンク