Javascriptで「外部ファイルの読み込み」を試してみた

14 2月, 2014 (13:04) | html | By: ohishi

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>

Write a comment