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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です