web-dev-qa-db-ja.com

JavaScriptを使用してサーバーからテキストファイルを読み取る方法

サーバーには、テキストファイルがあります。クライアントでJavaScriptを使用して、このファイルを読み取って処理できるようにします。サーバー上のファイルの形式は変更できません。

ファイルのコンテンツをJavaScript変数に取得するにはどうすればよいですか？ファイルのサイズは最大3.5 MBですが、たとえば100行のチャンクで簡単に処理できます（1行は50〜100文字です）。

ファイルの内容がユーザーに表示されることはありません。ファイル内のデータの処理結果が表示されます。

javascriptajaxfile-io
34
Woody

隠しフレームを使用して、そこにファイルをロードし、その内容を解析できます。

HTML：

<iframe id="frmFile" src="test.txt" onload="LoadFile();" style="display: none;"></iframe>

JavaScript：

<script type="text/javascript">
function LoadFile() {
    var oFrame = document.getElementById("frmFile");
    var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
    while (strRawContents.indexOf("\r") >= 0)
        strRawContents = strRawContents.replace("\r", "");
    var arrLines = strRawContents.split("\n");
    alert("File " + oFrame.src + " has " + arrLines.length + " lines");
    for (var i = 0; i < arrLines.length; i++) {
        var curLine = arrLines[i];
        alert("Line #" + (i + 1) + " is: '" + curLine + "'");
    }
}
</script>

注：これをChromeブラウザで動作させるには、-allow-file-access-from-filesフラグ。 クレジット 。

32
Shadow Wizard

その巨大なデータの塊をロードすることは素晴らしい計画ではありませんが、必要な場合、 jQueryの$.ajax() 関数を使用してそれを行う方法の概要を以下に示します。

<html><head>
<script src="jquery.js"></script>
<script>
getTxt = function (){

  $.ajax({
    url:'text.txt',
    success: function (data){
      //parse your data here
      //you can split into lines using data.split('\n') 
      //an use regex functions to effectively parse it
    }
  });
}
</script>
</head><body>
  <button type="button" id="btnGetTxt" onclick="getTxt()">Get Text</button>
</body></html>
13
Amjad Masad

Ajaxを使用する必要があります。これは、基本的にサーバーにリクエストを送信し、次にJSONオブジェクトを取得して、JavaScriptオブジェクトに変換します。

これをチェックして：

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

JQueryライブラリを使用している場合、さらに簡単になります。

http://api.jquery.com/jQuery.ajax/

とはいえ、3.5MBのファイルをJSにダウンロードしないことを強くお勧めします！良い考えではありません。サーバーで処理を行い、処理後にデータを返します。次に、新しいデータを取得する場合は、新しいAjaxリクエストを送信し、サーバーでリクエストを処理してから、新しいデータを返します。

お役に立てば幸いです。

10
Rafid

AJAXを使用するというRafidの提案を使用しました。

これは私のために働いた：

var url = "http://www.example.com/file.json";

var jsonFile = new XMLHttpRequest();
    jsonFile.open("GET",url,true);
    jsonFile.send();

    jsonFile.onreadystatechange = function() {
        if (jsonFile.readyState== 4 && jsonFile.status == 200) {
            document.getElementById("id-of-element").innerHTML = jsonFile.responseText;
        }
     }

私は基本的に（ほぼ文字通り）このコードを http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get2 からコピーしたので、すべてを信用してくれました。

私はこれがどのように機能するかについて多くの知識を持っていませんが、あなたはあなたのブレーキがそれらを使用する方法を知っている必要はありません;）

お役に立てれば！

9
Noah Gary

ステータス0を確認する必要があります（XMLHttpRequestでローカルにファイルをロードする場合、ステータスは取得されず、Webサーバーからの場合はステータスを返します）

function readTextFile(file) {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
    if(rawFile.readyState === 4)
    {
        if(rawFile.status === 200 || rawFile.status == 0)
        {
            var allText = rawFile.responseText;
            alert(allText);
        }
    }
}
rawFile.send(null);

}

デバイスファイルの読み取りには、これを使用します。

readTextFile（ "file：/// C：/your/path/to/file.txt"）;

サーバーからのファイル読み取りの場合：

readTextFile（ " http：//test/file.txt "）;

0
Rahil Ali

XMLHttpRequestは Fetch API に置き換えられたようです。 Googleは良い 紹介 を公開しました。これには、あなたが望むことをするこの例が含まれています：

_fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });
_

ただし、おそらくresponse.text()の代わりにresponse.json()を呼び出したいでしょう。

0
Don Kirkby