Muni Bus

パソコンの操作方法や設定方法を忘れないようにメモしています。ブログを一回引っ越ししているので、所々表示がかなり乱れています・・・

【JavaScript】サーバーに置いてあるテキストファイルを自動で読み込んで表示する

JavaScript

ブラウザーを操作している各コンピューターではなく、ウェブサーバーソフトウェアが稼働しているサーバーに置いたテキストファイルを、ブラウザーでHTMLファイルを開いたときに自動で画面に表示する方法。

以下をprint.htmlとして、ウェブサーバーソフトウェアのドキュメントフォルダーのルート（C:\Apache24\htdocsなど）に保存する。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <div id="result"></div>
    <script type = "text/javascript">
      let result = document.getElementById('result');
      let xhr = new XMLHttpRequest();
      xhr.open('GET', 'text.txt', true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            result.textContent = '';
            let lines = xhr.responseText.split('\n');
            let line = '';
            for(i = 0; i < lines.length; i++) {
              line += lines[i] + '<br />';
            }
            result.insertAdjacentHTML('afterbegin', line);
          } else {
            result.textContent = '通信エラーが発生';
          }
        } else {
          result.textContent = '通信中...';
        }
      }
      xhr.send(null);
    </script>
    <noscript>JavaScriptが利用できません</noscript>
  </body>
</html>

print.htmlと同じフォルダーに、以下をtext.txtとして保存する。

ABCDEabcde
1234567890
あいうえお
阿a井i宇u江e尾o

ブラウザーで開く。例えばアドレスバーに「http://localhost/print.html」と入力する。以下のように表示されるはず。

このprint.htmlはウェブサーバーソフトウェアを介して開く必要がある。エクスプローラーでprint.htmlをダブルクリックして開いても表示はされない。