Javascriptで「外部ファイルの読み込み」を試してみた
Javascriptで「外部ファイルの読み込み」を試してみたので、メモしておきます。
で、この仕組みをHTML整形ツールに組み込みました。
◆デモ
http://u670.com/pikamap/js_demo.html
◆ソース
<html>
<head>
<title>javascript test</title>
</head>
<script type="text/javascript">
<!--
var value; //テキストのインデックス
var xmlHttp;
var buf; //テキスト格納変数
var file; //テキストの配列
var spchar; //スプリット文字
var count;?? //テキストの行数
loadText(); //テキストロード
function loadText() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = null;
}
}
xmlHttp.onreadystatechange = checkStatus;
//※読み込むファイルを指定する。ただし、同一サイトにないと読めない
xmlHttp.open("GET", "http://u670.com/pikamap/amazon.txt", true);
xmlHttp.send(null);
}
function checkStatus() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//ファイルを変数に代入
buf = xmlHttp.responseText;
//スプリット文字を設定
spchar="\n";
//変数を配列に変換する
file=buf.split(spchar);
//ファイルの行数を求める
count=file.length - 1;
mmset();
}
}
??? function mmoutput() {
??????? //HTMLの出力
??????? target = document.getElementById("output");
??????? target.innerHTML = file[value];
??? }
??? function mmset() {
??????? //乱数から出力番号を設定
??????? value = Math.floor(Math.random() * count);
??????? mmoutput();
??? }
??? function mmtop() {
??????? //先頭
??????? value = 0;
??????? mmoutput();
??? }
??? function mmdec() {
??????? //戻る
??????? value = value - 1;
??????? if(value == -1){value = value + count;}
??????? mmoutput();
??? }
??? function mmadd() {
??????? //進む
??????? value = value + 1;
??????? if(value == count){value = value - count;}
??????? mmoutput();
??? }
??? // -->
</script>
<body>
<input type="button" value="top" onclick="mmtop();" />
<input type="button" value=" < " onclick="mmdec();" />
<input type="button" value=" > " onclick="mmadd();" />
<div id="output"></div>
</body>
</html>
