Как читать текстовый файл с сервера с помощью JavaScript?

На сервере есть текстовый файл. Используя JavaScript на клиенте, я хочу иметь возможность прочитать этот файл и обработать его. Формат файла на сервере не может быть изменен.

Как я могу получить содержимое файла в переменных JavaScript, так что я могу сделать эту обработку? Размер файла может быть до 3,5 МБ, но его можно легко обработать в кусках, скажем, в 100 строк (1 строка - 50-100 символов).

Ни одно из содержимого файла не должно быть видимым для пользователя; он увидит результаты обработки данных в файле.

Ответ 1

Вы можете использовать скрытый фрейм, загрузить файл и проанализировать его содержимое.

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. _{кредит.}

Ответ 2

Загрузка этой гигантской капли данных не является отличным планом, но если вы должны здесь, очертите, как вы можете это сделать, используя 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>

Ответ 3

Вам нужно использовать Ajax, который в основном отправляет запрос на сервер, а затем получает объект JSON, который вы конвертируете в объект JavaScript.

Проверьте это:

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

Если вы используете библиотеку jQuery, это может быть еще проще:

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

Сказав это, я настоятельно рекомендую вам не загружать файл с 3.5MB в JS! Это не очень хорошая идея. Выполняйте обработку на своем сервере, а затем возвращайте данные после обработки. Затем, если вы хотите получить новые данные, отправьте новый запрос Ajax, обработайте запрос на сервере, а затем верните новые данные.

Надеюсь, что это поможет.

Ответ 4

Я использовал предложение Рафида об использовании AJAX.

Это сработало для меня:

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, чтобы отблагодарить их за все.

Я не знаю, как это работает, но вам не нужно знать, как ваши тормоза работают, чтобы использовать их;)

Надеюсь, это поможет!

Ответ 5

Вам нужно проверить статус 0 (как при загрузке файлов локально с помощью XMLHttpRequest, вы не получите статус, а если он с веб-сервера, он возвращает статус)

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 ( "Файл:///C:/your/path/to/file.txt" );

Для чтения файла с сервера используйте:

readTextFile ( " http://test/file.txt" );

Ответ 6

Я действительно думаю, что ты об этом поступил неправильно. Попытка загрузить и проанализировать текстовый файл + 3Mb - это полное безумие. Почему бы не разобрать файл на стороне сервера, сохраняя результаты viva ORM в базе данных (ваш выбор, SQL хорош, но он также зависит от данных о ключевом значении контента, лучше работает на чем-то вроде CouchDB), затем используйте ajax для анализа данных на стороне клиента.

Кроме того, еще лучшая идея - полностью пропустить текстовый файл для еще лучшей производительности, если это вообще возможно.